CODEWITHSUNDEEP
javascriptdrop-down-menu
Nic Meiring
Nic Meiring

Reputation: 882

using conditionals with drop down menus in javascript

 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

Upvotes: 0

Views: 164

Answers (2)

Ettiene Grobler
Ettiene Grobler

Reputation: 525

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

  1. 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.
  2. 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>

Upvotes: 1

Kunal Vashist
Kunal Vashist

Reputation: 2471

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

Upvotes: 0

Related Questions