Javascript function not outputting into html

Question

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>

Selecting elements by id requires a hash in front of the id: #cost — C3roe
– C3roe, Commented Jan 22, 2014 at 13:34
Unfortunately the beginner I am means I wouldn't know how to go about doing that, this is the way that I have seen others do similar things to me. — user3222649
– user3222649, Commented Jan 22, 2014 at 13:40

Mark · Accepted Answer · 2014-01-22 13:51:04Z

1

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();
    }        
});

edited Jan 22, 2014 at 13:51

answered Jan 22, 2014 at 13:40

Mark

2,2111 gold badge17 silver badges28 bronze badges

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

5 Comments

user3222649 Over a year ago

Thanks you for your help, the selection boxes are not working in your example?

Mark Over a year ago

Sorry I just fixed the check boxes. Please try the new link in the post :)

user3222649 Over a year ago

Thanks again, in the selection boxes only the largest selection in the checkboxes is being put through to my html, do you possibly now how to rectify this?

Mark Over a year ago

Ahh that's because val6 is being replaced with the new value as it loops through the checkboxes. Try the new updated version here: jsfiddle.net/95SrV/2 that does val6 = val6 +

user3222649 Over a year ago

Thank you very much for your help, the code seems to be working for me now!

Raja Jaganathan · Accepted Answer · 2014-01-22 13:57:47Z

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>

Collectives™ on Stack Overflow

Javascript function not outputting into html

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related