CODEWITHSUNDEEP
phpjavascriptformscheckbox
Moumita
Moumita

Reputation: 360

compare two form's check box checked or not

I have two or more form. and each form contain some check box and the check value shown in a text box. I want that when I chek some check box total value will shown in a text box in that form. I want that when I check some check box of one form other form's check box will not checked and return a alert. here is my code: 

<head>
<script>function UpdateCost() {
  var sum = 0;
  var gn, elem;
  for (i=0; i<5; i++) {
    gn = 'budget'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2);
} 
</script>
</head>

<body>
// 1st form
<form name= "form1">
<input type="checkbox" id='budget0' value="9.99"  onclick="UpdateCost()">Game 1 ( 9.99)<br>
<input type="checkbox" id='budget1' value="19.99" onclick="UpdateCost()">Game 2 (19.99)<br>
<input type="checkbox" id='budget2' value="27.50" onclick="UpdateCost()">Game 3 (27.50)<br>
<input type="checkbox" id='budget3' value="45.65" onclick="UpdateCost()">Game 4 (45.65)<br>
<input type="checkbox" id='budget4' value="87.20" onclick="UpdateCost()">Game 5 (87.20)<br>
<input type="text" id="totalcost" value="">// total budget
</form>
// 2nd form
<form name= "form2">
<input type="checkbox" id='budget0' value="9.99"  onclick="UpdateCost()">Game 1 ( 9.99)<br>
<input type="checkbox" id='budget1' value="19.99" onclick="UpdateCost()">Game 2 (19.99)<br>
<input type="checkbox" id='budget2' value="27.50" onclick="UpdateCost()">Game 3 (27.50)<br>
<input type="checkbox" id='budget3' value="45.65" onclick="UpdateCost()">Game 4 (45.65)<br>
<input type="checkbox" id='budget4' value="87.20" onclick="UpdateCost()">Game 5 (87.20)<br>
<input type="text" id="totalcost" value="">// total budget
</form>

</body>

Upvotes: 0

Views: 637

Answers (3)

Samuel
Samuel

Reputation: 18586

First of all id's need to be unique so for example add the form to the id.

Moreover tell the UpdateCost function what form you are working on, by adding a parameter

Than you will already modify the correct total field, and the total will be calculated for each form you have.

<head>
<script>

    var only_allowed_for = '';

    function UpdateCost(form) {
        if (only_allowed_for == '') {

            only_allowed_for = form;

        }

        var sum = 0;
        var gn, elem;
        for (i=0; i<5; i++) {

            gn = form + '_budget'+ i;
            elem = document.getElementById(gn);

            if (elem.checked == true)
                if (only_allowed_for == form) {
                    sum += Number(elem.value);
                } else {

                    elem.checked = false;

                }

          }
          document.getElementById(form + '_totalcost').value = sum.toFixed(2);
    } 
</script>
</head>

<body>
// 1st form
<form name= "form1">
<input type="checkbox" id='form1_budget0' value="9.99"  onclick="UpdateCost('form1')">Game 1 ( 9.99)<br>
<input type="checkbox" id='form1_budget1' value="19.99" onclick="UpdateCost('form1')">Game 2 (19.99)<br>
<input type="checkbox" id='form1_budget2' value="27.50" onclick="UpdateCost('form1')">Game 3 (27.50)<br>
<input type="checkbox" id='form1_budget3' value="45.65" onclick="UpdateCost('form1')">Game 4 (45.65)<br>
<input type="checkbox" id='form1_budget4' value="87.20" onclick="UpdateCost('form1')">Game 5 (87.20)<br>
<input type="text" id="form1_totalcost" value="0.00">// total budget
</form>
// 2nd form
<form name= "form2">
<input type="checkbox" id='form2_budget0' value="9.99"  onclick="UpdateCost('form2')">Game 1 ( 9.99)<br>
<input type="checkbox" id='form2_budget1' value="19.99" onclick="UpdateCost('form2')">Game 2 (19.99)<br>
<input type="checkbox" id='form2_budget2' value="27.50" onclick="UpdateCost('form2')">Game 3 (27.50)<br>
<input type="checkbox" id='form2_budget3' value="45.65" onclick="UpdateCost('form2')">Game 4 (45.65)<br>
<input type="checkbox" id='form2_budget4' value="87.20" onclick="UpdateCost('form2')">Game 5 (87.20)<br>
<input type="text" id="form2_totalcost" value="0.00">// total budget
</form>

</body>

Upvotes: 0

hsz
hsz

Reputation: 152284

Fistr of all - ID has to be unique - you cannot add two elements with the same id.

Change them to name="budget[0]" and so on. The same thing with totalcost -> name="totalcost".

Then modify your function to:

function UpdateCost(input) {
    var elements = input.form.elements;
    var sum = 0;
    var resultElement;

    for ( var i = 0; i < elements.length; i++ ) {
        var element = elements[i];
        if ( element.type == 'checkbox' && element.checked ) {
            sum += parseFloat( element.value );
        } else if ( element.type == 'text' ) {
            resultElement = element;
        }
    }

    element.value = sum;
}

And now change onclick events to onclick="UpdateCost(this)"

Upvotes: 2

user693336
user693336

Reputation: 335

Take a look at JQuery or Prototype Javascript libraries. They were built for doing such things and should make it easy.

Upvotes: 1

Related Questions