CODEWITHSUNDEEP
javascriptjqueryhtml
user3222649
user3222649

Reputation: 1

Javascript function not outputting into html

I'm very new to Javascript and Jquery and am attempting to use this script externally to calculate the value of a users selections (Radio buttons and Checkboxes) and then output the value of the function into my HTML page (id cost) by pressing a button (id submit). This is what I have so far, I would be very appreciative if someone could help me understand why it isn't working.

  function add() {
    var val1 = 0;
      for (i = 0; i < document.form1."radio-choice-v-1"; i++)
      {
           if (document.form1."radio-choice-v-1"[i].checked === true)
           {
                val1 = document.form1."radio-choice-v-1"[i].value;
           }
      }
    var val2 = 0;
      for (i = 0; i < document.form2."radio-choice-v-2"; i++)
      {
           if (document.form2.radio-"choice-v-2"[i].checked === true)
           {
                val2 = document.form2."radio-choice-v-2"[i].value;
           }
      }
    var val3 = 0;
      for (i = 0; i < document.form3."radio-choice-v-3"; i++)
      {
           if (document.form3."radio-choice-v-3"[i].checked === true)
           {
                val3 = document."form3.radio-choice-v-3"[i].value;
           }
      }
       var val4 = 0;
      for (i = 0; i < document.form4."radio-choice-v-4"; i++)
      {
           if (document.form4."radio-choice-v-4"[i].checked === true)
           {
                val4 = document.form4."radio-choice-v-4"[i].value;
           }
       }

       var val5 = 0;
      for (i = 0; i < document.form5."radio-choice-v-5"; i++)
      {
           if (document.form5."radio-choice-v-5"[i].checked === true)
           {
                val5 = document.form5."radio-choice-v-5"[i].value;
           }
      }
      var val6 = 0;
    for( i = 0; i < document.form6."checkselection"; i++ )
    {
            val6 = document.form6."checkselection"[i].value;
        }

    $("cost").html(" = " + (val1 + val2 + val3 + val4 + val5 + val6)); 

}

<form name="form1" id="form1">
    <fieldset data-role="controlgroup">
        <legend>Please select a case:</legend>
        <input id="radio-choice-v-1a" name="radio-choice-v-1" value="40" CHECKED="checked" type="radio">
        <label for="radio-choice-v-1a">Choice 1 (£40)</label>
        <input id="radio-choice-v-1b" name="radio-choice-v-1" value="45" type="radio">
        <label for="radio-choice-v-1b">Choice 2 (£45)</label>
        <input id="radio-choice-v-1c" name="radio-choice-v-1" value="140" type="radio">
        <label for="radio-choice-v-1c">Choice 3 (£140)</label>
    </fieldset>
</form>
<form name="form6" id="form6">
    <fieldset data-role="controlgroup">
        <legend>Select your extras</legend>
        <input type="Checkbox" name="checkselection" id="checkbox-extra-1" value="20">
        <label for="checkbox-extra-1"> Selection 1 (£20) (recommended)</label>
        <input type="Checkbox" name="checkselection" id="checkbox-extra-2" value="12">
        <label for="checkbox-extra-2">Selection 2  (£12)</label>
        <input type="Checkbox" name="checkselection" id="checkbox-extra-3" value="4">
        <label for="checkbox-extra-3">Selection 3 (£4)</label>
        <input type="Checkbox" name="checkselection" id="checkbox-extra-4" value="30">
        <label for="checkbox-extra-4">Selection 4 (£30)</label>
    </fieldset>
</form>
<form>
    <input id="submit" type="button" value="Submit" onclick="add();">      
</form>
£<u id="cost"></u>

Upvotes: 0

Views: 81

Answers (2)

Raja Jaganathan
Raja Jaganathan

Reputation: 36127

Try with this one. Make sure all elements will be available like "radio-choice-v-2".

 function add() {

        var val1 = 0;        

        for (var i = 0; i < document.form1["radio-choice-v-1"].length; i++)
        {            
            if (document.form1["radio-choice-v-1"][i].checked === true)
            {
                val1 = document.form1["radio-choice-v-1"][i].value;                   
            }
        }

        var val2 = 0;
        for (i = 0; i < document.form2["radio-choice-v-2"].length; i++)
        {
            if (document.form2["radio-choice-v-2"][i].checked === true)
            {
                val2 = document.form2["radio-choice-v-2"][i].value;
            }
        }

        var val3 = 0;
        for (i = 0; i < document.form3["radio-choice-v-3"].length; i++)
        {
            if (document.form3["radio-choice-v-3"][i].checked === true)
            {
                val3 = document.form3["form3.radio-choice-v-3"][i].value;
            }
        }

        var val4 = 0;
        for (i = 0; i < document.form4["radio-choice-v-4"].length; i++)
        {
            if (document.form4["radio-choice-v-4"][i].checked === true)
            {
                val4 = document.form4["radio-choice-v-4"][i].value;
            }
        }

        var val5 = 0;
        for (i = 0; i < document.form5["radio-choice-v-5"].length; i++)
        {
            if (document.form5["radio-choice-v-5"][i].checked === true)
            {
                val5 = document.form5["radio-choice-v-5"][i].value;
            }
        }
        var val6 = 0;

        for( i = 0; i < document.form6["checkselection"].length; i++ )
        {
            if (document.form6["checkselection"][i].checked === true) //Are you missing check here
                val6 += document.form6["checkselection"][i].value; // += added here
        }

        $("#cost").html(" = " + (val1 + val2 + val3 + val4 + val5 + val6)); 
    }

</script>



<form name="form1" id="form1">
    <fieldset data-role="controlgroup">
        <legend>Please select a case:</legend>
        <input id="radio-choice-v-1a" name="radio-choice-v-1" value="40" CHECKED="checked" type="radio">
        <label for="radio-choice-v-1a">Choice 1 (£40)</label>
        <input id="radio-choice-v-1b" name="radio-choice-v-1" value="45" type="radio">
        <label for="radio-choice-v-1b">Choice 2 (£45)</label>
        <input id="radio-choice-v-1c" name="radio-choice-v-1" value="140" type="radio">
        <label for="radio-choice-v-1c">Choice 3 (£140)</label>
    </fieldset>
</form>
<form name="form6" id="form6">
    <fieldset data-role="controlgroup">
        <legend>Select your extras</legend>
        <input type="Checkbox" name="checkselection" id="checkbox-extra-1" value="20">
        <label for="checkbox-extra-1"> Selection 1 (£20) (recommended)</label>
        <input type="Checkbox" name="checkselection" id="checkbox-extra-2" value="12">
        <label for="checkbox-extra-2">Selection 2  (£12)</label>
        <input type="Checkbox" name="checkselection" id="checkbox-extra-3" value="4">
        <label for="checkbox-extra-3">Selection 3 (£4)</label>
        <input type="Checkbox" name="checkselection" id="checkbox-extra-4" value="30">
        <label for="checkbox-extra-4">Selection 4 (£30)</label>
    </fieldset>
</form>
<form>
    <input id="submit" type="button" value="Submit" onclick="add();">      
</form>
£<u id="cost"></u>

Upvotes: 0

Mark
Mark

Reputation: 2221

There where quite a few problems with your code. Please have a look at the working example I created on JSFiddle for you:

http://jsfiddle.net/95SrV/1/

I had to comment out the val2+ because you did not have those other forms in the sample HTML you provided:

Pure JavaScript

var val1 = 0;
for (i = 0; i < document.form1["radio-choice-v-1"].length; i++) {
    if (document.form1["radio-choice-v-1"][i].checked === true) {
        val1 = document.form1["radio-choice-v-1"][i].value;
    }
}

However, if you do want to full use jQuery you could use the following code instead:

Full jQuery

var val1 = 0;
$('[name="radio-choice-v-1"]').each(function() {
    currentItem = $(this);
    if (currentItem.is(":checked")) {
        val1 = currentItem.val();
    }        
});

Upvotes: 1

Related Questions