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
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.

Edited by denno020
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.