Jump to content

Multiply Form Input Fields


elite311

Recommended Posts

So I'm new to the javascript world and attempting my first project and I'm stumped and hoping someone can tell me what I'm doing wrong here.

 

What I am trying to accomplish is:

If the user wants to buy between 1-4 set the mark price to 5 per mark, if it's between 5-9 set the price to 10 per mark, if it's greater than 9 set the price to 15 per mark

 

So when the user puts how many marks they want to buy into the additonal marks field and then picks how many courses they want the total will show up to reflect this.

 

So they want to buy 3 marks for 2 courses ((3x5)x2) total is $30

 

Heres my code:

 

<script language="javascript">
function calcVals(){
//set form to document.form1
form = document.form1;
//get the fields
val = form.AdditionalMarks;
val1 = form.NumberOfCourses;
//check the value and set the price
if (val<=4) {
var markprice=5;
}
else if (addnlmarks==5,6,7, {
var markprice=10;
}
else if (addnlmarks>=9) {
var markprice=15;
}
//multilpy all the fields up
total = (val * markprice) * val1;
//if there's a problem inform the user
if (String(total) != 'NaN') {
form.valTotal.value = total;
} else {
form.valTotal.value = 'ERROR';
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" >
<H2>The Request</H2>
<table border = "3">
<tr> <td> Id </td> <td> <input name = "Id" type = "text" size="10"> </td> </tr>
<tr> <td> Course Number </td> <td> <input name = "CourseNumber" type = "text" size="10"> </td> </tr>
<tr> <td> Description </td> <td> <input name = "Description" type = "text" size="20"> </td> </tr>
<tr> <td> Distance Education </td> <td> <input name = "DistanceEducation" type = "checkbox" size="2"> </td> </tr>
<tr> <td> Additional Marks </td> <td> <input name="AdditionalMarks" type="text" size="10"> </td> </tr>
</table>
<p> </p>
Number of courses <input name="NumberOfCourses" type="text" size="5" value="0">
Total Cost <input name="valTotal" id="valTotal" readonly type="text" size="5" value="0"> <br>
<p> </p>
<p> </p>
<input type = "button" value = "Go for It" onclick="calcVals()">
</form>

 

I put the values in and nothing happens and I have not been able to figure out why. Any help would be greatly appreciated.

Link to comment
https://forums.phpfreaks.com/topic/271057-multiply-form-input-fields/
Share on other sites

There's a bit more that you need to do:

function calcVals(){
//set form to document.form1
form = document.form1;
//get the fields
val = document.getElementsByName('AdditionalMarks')[0].value;
val1 = document.getElementsByName('NumberOfCourses')[0].value;
//check the value and set the price
if (val<=4) {
var markprice=5;
}else if (val>=5 && val<= {
var markprice=10;
}else if (val >= 9) {
var markprice=15;
}
//multilpy all the fields up
total = (val * markprice) * val1;
//if there's a problem inform the user
if (String(total) != 'NaN') {
form.valTotal.value = total;
alert(total); //show pop up dialog with the total cost (used for debugging)
}else{
form.valTotal.value = 'ERROR';
}
}

 

That code seems to work, as you can see from the alert I've made pop up, however the value that's set in the total cost field doesn't stay there, it is always changed back to 0 after a split second.. I'm not sure why that is, but maybe you could figure it out as you play with it.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.