using conditionals with drop down menus in javascript

Question

 var macTeamList = "Team" + "<br>";
  var macScoreList = "Score" + "<br>";
  var nicTeamList = "Team" + "<br>";
  var nicScoreList = "Score" + "<br>";

 $('form').submit(function(e) {

     if ($('input[name="Player1"]').val() ==="Nic") {

      e.preventDefault();
      var nicTeamValue = $('input[name="Team1"]').val();
      nicTeamList += nicTeamValue + "<br>" ;

      var nicScoreValue = $('input[name="Score1"]').val();
      nicScoreList += nicScoreValue + "<br>";

      $('#nicteamcolumn').html(nicTeamList);
      $('#nicscorecolumn').html(nicScoreList);

      return false;
     }

 else if ($('input[name="Player1"]').val() === "Mac") {


      e.preventDefault();
      var macTeamValue = $('input[name="Team1"]').val();
      macTeamList += macTeamValue + "<br>" ;

      var macScoreValue = $('input[name="Score1"]').val();
      macScoreList += macScoreValue + "<br>";

      $('#macteamcolumn').html(macTeamList);
      $('#macscorecolumn').html(macScoreList);

      return false;
 } 
 })

    <form>

<input name="foo" id="team" class="teamcolumn" type="text" value="Team?">
<input name="foobar" id="score" class="inputright" type="text" value="Score?">

<input type="submit" value="Go">

<select name="select" size="1" id="PID">
    <option value="Nic">Nic</option>
    <option value="Mac">Mac</option>
    </select>
</form>
<div  id ="nicteamcolumn" class="teamcolumn TOSRcolumn nicColumn">Team </div>
 <div id="nicscorecolumn" class="scorecolumn TOSRcolumn nicColumn">Score</div>
 <div id="macteamcolumn" class="teamcolumn TOSRcolumn macColumn">Team </div>
 <div id="macscorecolumn" class="scorecolumn TOSRcolumn macColumn">Score</div>

Basically, I am having the user input 2 text values as well as choose from 2 options on a drop down menu. If the user chooses "Mac" the info in the two fields should print to #macscorecolumn and #macteamcolumnand vice versa if they choose "Nic". The list variables are keeping track of the whole list of scores so the new score is simply added to the end and they're all shown. Not sure why the script isnt working. Any help would be awesome

Ettiene Grobler · Accepted Answer · 2012-02-23 10:14:47Z

1

First of all, your code actually needs a rewrite :)

You don't need to submit a form to do this kind of thing, you could merely add either a link or a button (for GO), add a click function to it, and do your stuff in there.
Also I agree with Kunal that your syntax for the if statement is incorrect etc.

Just practice some more and remember that the jquery docs is your friend... :)

Here is your code I modified a little bit to make it work for you. But remember, you don't need a form for this, I just didn't have time to rewrite it differently for you. I also included jquery library just in case you missed that, which is critical.

    <form>

<input name="foo" id="team" class="teamcolumn" type="text" value="Team?">
<input name="foobar" id="score" class="inputright" type="text" value="Score?">

<button id="dostuff" value="Go">Go</button>

<select name="select" size="1" id="PID">
    <option value="Nic">Nic</option>
    <option value="Mac">Mac</option>
    </select>
</form>
<div  id ="nicteamcolumn" class="teamcolumn TOSRcolumn nicColumn">Team </div>
 <div id="nicscorecolumn" class="scorecolumn TOSRcolumn nicColumn">Score</div>
 <div id="macteamcolumn" class="teamcolumn TOSRcolumn macColumn">Team </div>
 <div id="macscorecolumn" class="scorecolumn TOSRcolumn macColumn">Score</div>
    <script src="js/jquery-1.6.4.min.js"></script> 

<script>    
        var macTeamList = "Team" + "<br>";
      var macScoreList = "Score" + "<br>";
      var nicTeamList = "Team" + "<br>";
      var nicScoreList = "Score" + "<br>";

     $('#dostuff').click(function(e) {
                e.preventDefault();
                var teamvalue = $('input[name="foo"]').val();
                var teamscore = $('input[name="foobar"]').val();
                var pidType = $("#PID").val();


         if (pidType =="Mac") {

          nicTeamList += teamvalue + "<br>" ;
          nicScoreList += teamscore + "<br>";

          $('#nicteamcolumn').html(nicTeamList);
          $('#nicscorecolumn').html(nicScoreList);

         }

            else {


          macTeamList += teamvalue + "<br>" ;
          macScoreList += teamscore + "<br>";

          $('#macteamcolumn').html(macTeamList);
          $('#macscorecolumn').html(macScoreList);


     }
     });
</script>

answered Feb 23, 2012 at 10:14

Ettiene Grobler

5253 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nic Meiring Over a year ago

thanks! would you mind taking a look at this code? I am trying to have it so the info entered in the fields matching where the person's name was chosen in the drop down (ie. if mac was chosen on the dropdown the info in those text fields would go to macs columns) Let me know if that makes any sensehttp://jsfiddle.net/PvfvD/

Ettiene Grobler Over a year ago

ok try this... I rewrote your code (made it cleaner), and also more reusable. the dropdowns and input boxes for each row are now wrapped with a div class="teaminfoGroup" .. You can just copy and paste as many of those divs as you want for input. The jquery is supposed to handle it correctly... I hope :) jsfiddle.net/PvfvD/1

Kunal Vashist · Accepted Answer · 2012-02-23 10:02:00Z

0

You have used else if condition Its condition element you have to put some condition

else if{ } // syntax error

else if("somethign goes in here"){ // your code } // correct way

and over here only else can do the thing

You have putted ; at the block end of if statement and and the block end of else. Syntax error

answered Feb 23, 2012 at 10:02

Kunal Vashist

2,4816 gold badges33 silver badges64 bronze badges

Collectives™ on Stack Overflow

using conditionals with drop down menus in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related