Reputation: 21
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
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
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