user3338822
user3338822

Reputation: 21

Button not running javascript

So this should be changing the page so that when they click the button it shows a total of everything they have selected in the form, but it is not doing anything. It seems that it is not even running the script at all, and I have no idea what is up.

...more form stuff up here    
<button type="button" onclick="total(this.form)">Get my Total</button>

    <p id="subtotal"></p>

    <input type="submit">
    </form>

    <script>
    function total(form)
    {
    var SynCr= form.Synth.value;
    document.getElementById("subtotal").innerHTML="You have ordered: <br>"+SynCr+" Synth");
    }
    </script>

Upvotes: 2

Views: 99

Answers (2)

SaidbakR
SaidbakR

Reputation: 13534

First of all: this.form does not return the parent form. Second: you have a syntax error in: document.getElementById("subtotal").innerHTML="You have ordered: <br>"+SynCr+" Synth"); the last ) should not be there.

The following is sinppet of code shows you in some what how to debug your code and it works:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<form id="hgg">
  <input type="text" name="Synth" value="" />
  <button type="button" onclick="total(this)">Get my Total</button>
  </form>
  <div id="subtotal">
    <p>5518</p>
  </div>
  <script>
    function total(button)
    {
      form1 = button.parentNode;
      alert(form1.Synth.value)
      /*alert(p.id)
      alert("555");*/
     SynCr= form1.Synth.value;
      alert(SynCr)
   k = document.getElementById("subtotal");
      k.innerHTML = "You have ordered: <br>"+SynCr+"Synth";
    }
    </script>


</body>
</html>

Look at this online demo: http://jsbin.com/voruzumi/1/

Upvotes: 0

Keith
Keith

Reputation: 994

Your problem is onclick="total(this.form)". When the handler is called this refers to the button, which does not have a form as a member.

Try instead:

onclick="total(document.getElementById('formId'))"

Upvotes: 3

Related Questions