Validation of Radio buttons in javascript

Question

I have a select list and 2 radio buttons from which a user will select 2 options from each and according to that, the cost of the item will be shown.

                  *Registration Category:
                    <select name="catg">
                    <option>Select..</option>
                    <option>Student</option>
                    <option>Student at another institution</option>
                    <option>Staff</option>
                    <option>other</option>

Thats my select list.

            Yes <input type="radio" name="slides" id="yes" onchange="payment()" />
            No <input type="radio" name="slides" id="no" onchange="payment()"/>
            <br />

Those are my radio buttons.

           <input type="text" size="10" name="cost"  readonly/>
           <br />

Thats the text box where the cost will show in dollars.

                  function payment(){
                  var yes = document.getElementById('yes').checked;
                  var no = document.getElementById('no').checked;
                  var catg = formname.catg.selectedIndex;
                  var cost = formname.cost;

                  if(catg==1||catg==3 && (yes))
                  {
                    cost.value = " 23";
                  }
                  else if (catg==1||catg==3 && (no))
                  {
                    cost.value = " Free";
                  }
                  }

So if a use selects 'Student' or 'Staff' from the select list and 'Yes' from radio buttons, the cost should be $23. I get that to work but if the user selects 'Student' or 'Staff' and then 'No' from the radio buttons, the cost should change to 'Free', which isnt happening.

Answer 1

according to http://jsfiddle.net/WeyLJ/8/

if ((catg == 1 || catg == 3) && (yes))

you need bracket around your || in your if condition.

i heard there is a trick in javascript which make the condition if( a || b ||c & d ||e ) be true because "a || b" is true and it wont check the rest of the condition.

but there still be a probleme with your else if with no else. check the comment of your question or the code.

Answer 2

Working jsfiddle: demo

I added a few things that you left out. I left out the if in after else, you need a condition after that, same as any other if statement.

var formname = document.getElementById('form');

payment = function() {
      var yes = document.getElementById('yes').checked;
      var no = document.getElementById('no').checked;
      var catg = formname.catg.selectedIndex;
      var cost = formname.cost;
      if (catg == 1 || catg == 3 && (yes)) {
          cost.value = " 23";
      } else {
          cost.value = " Free";
      }
}

note: the function is declared without var (and not like this: function payment(), which is the same as far as scoping goes) because in jsfiddle the scope there is not the window. In your code you can write it like that if it's in the global (window) scope.