PDA

View Full Version : creating a form with javascript

anelson
11-14-2005, 12:07 PM
Hey everyone,

I have been working on trying to design a very simple "order form" that our clients can use to submit their order online, as opposed to mailing it. So, I have done a bunch of looking around online, and have found (mostly) what I needed.

For the part of actually entering the item number, quantity, etc. I have this code (actually a couple of codes that I found on www.irt.org , and modified to fit my needs):

<script language="JavaScript"><!--
function updateForm(what,count) {
selected = what.mySelect.selectedIndex;

value = what.mySelect.options[selected].value;

for (var i = 0, oldpos = -1; i<count-1; i++) {
pos = value.indexOf('&',oldpos+1);
data = value.substring(oldpos+1,pos);
what.elements['price' + i].value = value.substring(oldpos+1,pos);
oldpos = pos;
}
what.elements['price' + i].value = value.substring(oldpos+1,value.length)
}
//--></script>

<form>
<input type="text" name="quantity">
<select name="mySelect" onChange="updateForm(this.form,1)">
<option value="2.99">4x6
<option value="4.99">5x7
<option value="7.99">8x10
</select>
<input type="text" name="price0">
<input type="text" name="total0" onClick="this.form.total0.value = (this.form.quantity.value - 0) * (this.form.price0.value - 0)">
</form>

I finally got this to work how I need it to, however, I need to make more than one line, so that a client can enter multiple items. However, with this code, I cannot seem to find a way to make it work. If I copy the code, and paste it to create a second ordering line, changing the field names respectively (to "quantity1" from "quantity0" and so on...), when I preview the code in IE, I only get a "0" in the total field.

Is there a way that I can alter the code to make this work, or no? I have tried modifying it several ways, but since I am very novice in JS, I have had no luck.

I hope that I have made sense to someone, and that you are able to help me!
Thank you so much!
-andy
konithomimo
11-15-2005, 08:55 AM
Here is a working example of how I would do it:

<html>
<head>
<script type="text/javascript">
var divsarray=new Array('div0','div1','div2');


function showDivs(divs)
{
var num = parseInt(divs);//get number of div to show
alert(num);
var quantity;
quantity = 'quantity' + (num+1);//set quantity field
var price;
price = 'price' + (num+1);//set price field
var total;
total = 'total' + (num+1);//set total field
alert(price);

document.getElementById(divsarray[num]).style.display='block';//show the div

document.getElementById('lastdiv').value=(num+1);//add one for next div
alert(num+1);

quantity = 'quantity' + num;//set quantity field
price = 'price' + num;//set price field
total = 'total' + num;//set total field

var quant = document.getElementById('quantity100').value;
document.getElementById(quantity).value= quant;

var pri = document.getElementById('price100').value;
document.getElementById(price).value= pri;

var tot=document.getElementById('total100').value;
document.getElementById(total).value= tot;

//Clear the insert fields
document.getElementById('quantity100').value = "";
document.getElementById('price100').value = "";
document.getElementById('total100').value = "";
}

function updateForm(what)
{
selected = what.mySelect.selectedIndex;
values = what.mySelect.options[selected].value;

document.getElementById('price100').value = values;
document.getElementById('total100').value = eval(values * document.getElementById('quantity100').value);
}


</script>
</head>
<body>
<form name="divsform" id="divsform">
Quantity / Price per Unit / Total
<div id="div0" style="display:none">
<input type="text" name="quantity0" id="quantity0">
<input type="text" name="price0" id="price0">
<input type="text" name="total0" id="total0">
<p>
</div>
<div id="div1" style="display:none">
<input type="text" name="quantity1" id="quantity1">
<input type="text" name="price1" id="price1">
<input type="text" name="total1" id="total1">
<p>
</div>
<div id="div2" style="display:none">
<input type="text" name="quantity2" id="quantity2">
<input type="text" name="price2" id="price2">
<input type="text" name="total2" id="total2">
<p>
</div>
<p>
<input type="text" name="quantity100" id="quantity100">
<select name="mySelect" onChange="updateForm(this.form)">
<option value="2.99">4x6
<option value="4.99">5x7
<option value="7.99">8x10
</select>
<input type="text" name="price100" id="price100">
<input type="text" name="total100" id="total100" onClick="divsform.total100.value = (divsform.quantity100.value - 0) * (divsform.price100.value - 0)">
<input type="button" value="Add another item" onClick="showDivs(document.getElementById('lastdiv').value)">
<input type="button" value="Submit Order">
<input type="text" id="lastdiv" value=0 style="display:none">
</form>
</body>
</html>


To add more lines just copy the part in red, and paste it below the part in blue. Then change the zeros (indictaed in green) to a new number. . . such as "3" and then also put that the new ID (div3 in this case) at the end of the part in purple. For example, if you wanted to add another selection you would end up with:

<html>
<head>
<script type="text/javascript">
var divsarray=new Array('div0','div1','div2','div3');


function showDivs(divs)
{
var num = parseInt(divs);//get number of div to show
alert(num);
var quantity;
quantity = 'quantity' + (num+1);//set quantity field
var price;
price = 'price' + (num+1);//set price field
var total;
total = 'total' + (num+1);//set total field
alert(price);

document.getElementById(divsarray[num]).style.display='block';//show the div

document.getElementById('lastdiv').value=(num+1);//add one for next div
alert(num+1);

quantity = 'quantity' + num;//set quantity field
price = 'price' + num;//set price field
total = 'total' + num;//set total field

var quant = document.getElementById('quantity100').value;
document.getElementById(quantity).value= quant;

var pri = document.getElementById('price100').value;
document.getElementById(price).value= pri;

var tot=document.getElementById('total100').value;
document.getElementById(total).value= tot;

//Clear the insert fields
document.getElementById('quantity100').value = "";
document.getElementById('price100').value = "";
document.getElementById('total100').value = "";
}

function updateForm(what)
{
selected = what.mySelect.selectedIndex;
values = what.mySelect.options[selected].value;

document.getElementById('price100').value = values;
document.getElementById('total100').value = eval(values * document.getElementById('quantity100').value);
}


</script>
</head>
<body>
<form name="divsform" id="divsform">
Quantity / Price per Unit / Total
<p>
<div id="div0" style="display:none">
<input type="text" name="quantity0" id="quantity0">
<input type="text" name="price0" id="price0">
<input type="text" name="total0" id="total0">
<p>
</div>
<div id="div1" style="display:none">
<input type="text" name="quantity1" id="quantity1">
<input type="text" name="price1" id="price1">
<input type="text" name="total1" id="total1">
<p>
</div>
<div id="div2" style="display:none">
<input type="text" name="quantity2" id="quantity2">
<input type="text" name="price2" id="price2">
<input type="text" name="total2" id="total2">
<p>
</div>
<div id="div3" style="display:none">
<input type="text" name="quantity3" id="quantity3">
<input type="text" name="price3" id="price3">
<input type="text" name="total3" id="total3">
<p>
</div>
<input type="text" name="quantity100" id="quantity100">
<select name="mySelect" onChange="updateForm(this.form)">
<option value="2.99">4x6
<option value="4.99">5x7
<option value="7.99">8x10
</select>
<input type="text" name="price100" id="price100">
<input type="text" name="total100" id="total100" onClick="divsform.total100.value = (divsform.quantity100.value - 0) * (divsform.price100.value - 0)">
<input type="button" value="Add another item" onClick="showDivs(document.getElementById('lastdiv').value)">
<input type="button" value="Submit Order">
<input type="text" id="lastdiv" value=0 style="display:none">
</form>
</body>
</html>
konithomimo
11-15-2005, 04:26 PM
And here it is with a calculated total:

<html>
<head>
<script type="text/javascript">
var divsarray=new Array('div0','div1','div2');

function showDivs(divs)
{
var num = parseInt(divs);//get number of div to show
var quantity= 'quantity' + (num+1);//set quantity field
var price= 'price' + (num+1);//set price field
var total= 'total' + (num+1);//set total field
document.getElementById(divsarray[num]).style.display='block';//show the div
document.getElementById('lastdiv').value=(num+1);//add one for next div
quantity = 'quantity' + num;//set quantity field
price = 'price' + num;//set price field
total = 'total' + num;//set total field
document.getElementById(quantity).value= document.getElementById('quantity100').value;
document.getElementById(price).value = document.getElementById('price100').value;
document.getElementById(total).value=document.getElementById('total100').value;
//Clear the insert fields
document.getElementById('quantity100').value = "";
document.getElementById('mySelect').options[0].selected=true;
document.getElementById('price100').value = "";
document.getElementById('total100').value = "";
document.getElementById('grand').style.display='block';
//calculate the grand total
for(var j=0;j<divsarray.length;j++)
{
var mytotal = "total" + j;
var grand = eval(document.getElementById('grandtotal').value);
var totals = (grand + eval(document.getElementById(mytotal).value));
document.getElementById('grandtotal').value = totals.toFixed(2);
}
}

function updateForm(what)
{
selected = what.mySelect.selectedIndex;
values = what.mySelect.options[selected].value;
document.getElementById('price100').value = values;
document.getElementById('total100').value = eval(values * document.getElementById('quantity100').value).toFixed(2);
}
</script>
</head>
<body>
<form name="divsform" id="divsform">
Quantity / Price per Unit / Total
<div id="div0" style="display:none">
<input type="text" name="quantity0" id="quantity0">
<input type="text" name="price0" id="price0">
<input type="text" name="total0" id="total0" value="0">
<p>
</div>
<div id="div1" style="display:none">
<input type="text" name="quantity1" id="quantity1">
<input type="text" name="price1" id="price1">
<input type="text" name="total1" id="total1" value="0">
<p>
</div>
<div id="div2" style="display:none">
<input type="text" name="quantity2" id="quantity2">
<input type="text" name="price2" id="price2">
<input type="text" name="total2" id="total2" value="0">
<p>
</div>
<div id="grand" style="display:none">
Order Total:<br>
<input type="text" value="0" id="grandtotal" name="grandtotal">
</div>
<p>
<input type="text" name="quantity100" id="quantity100">
<select name="mySelect" onChange="updateForm(this.form)">
<option value="">
<option value="2.99">4x6
<option value="4.99">5x7
<option value="7.99">8x10
</select>
<input type="text" name="price100" id="price100">
<input type="text" name="total100" id="total100" onClick="divsform.total100.value = (divsform.quantity100.value - 0) * (divsform.price100.value - 0)">
<input type="button" value="Add another item" onClick="showDivs(document.getElementById('lastdiv').value)">
<input type="button" value="Submit Order">
<input type="text" id="lastdiv" value=0 style="display:none">
</form>
</body>
</html>
anelson
11-15-2005, 06:50 PM
konithomimo,
Wow! I can not thank you enough for taking the time to do that! It is truly awesome! I am in the process of looking through the code to try and make sense of what is going on (for learning purposes). I can usually make sense of what the code is doing when I see it, but don't have the knowledge to code (especially JS) myself.
Anywho, I may have some questions in the next day or 2, but if I do, perhaps I can message you?
Once again, thank you so much for your time and effort!! I didn't expect it to be so complex, and definitely didn't expect someone to be willing to invest (what appears to be) so much time into it!!
THANK YOU!! :thumbup: :cheers:
konithomimo
11-16-2005, 10:40 AM
Feel free to PM me if you need more help. As per the code, I can think of easier ways to do it, but I wanted to make it so that you might be able to understand all of the code.
konithomimo
11-16-2005, 10:49 AM
Actually, now that I look at it, the order total won't display perfectly, and some things can be taken out since they are repetitious. Here is the code fixed to correct all of that (with some extra comments to help you understand it better):

<html>
<head>
<script type="text/javascript">
var divsarray=new Array('div0','div1','div2');

function showDivs(divs)
{
//get number of div to show
var num = parseInt(divs);

//show the div
document.getElementById(divsarray[num]).style.display='block';

//add one for next div
document.getElementById('lastdiv').value=(num+1);

//set quantity field
var quantity = 'quantity' + num;

//set price field
var price = 'price' + num;

//set total field
var total = 'total' + num;

//put values in inputs fields of div displayed above
document.getElementById(quantity).value= document.getElementById('quantity100').value;
document.getElementById(price).value = document.getElementById('price100').value;
document.getElementById(total).value=document.getElementById('total100').value;

//Clear the original input fields
document.getElementById('quantity100').value = "";
document.getElementById('mySelect').options[0].selected=true;
document.getElementById('price100').value = "";
document.getElementById('total100').value = "";
document.getElementById('grand').style.display='block';

//calculate the grand total
var grand=0;
for(var j=0;j<divsarray.length;j++)
{
var mytotal = "total" + j;
grand = eval(document.getElementById(mytotal).value) + grand;
document.getElementById('grandtotal').value=grand;
}
}

function updateForm(what)
{
selected = what.mySelect.selectedIndex;
values = what.mySelect.options[selected].value;
document.getElementById('price100').value = values;
document.getElementById('total100').value = eval(values * document.getElementById('quantity100').value).toFixed(2);
}
</script>
</head>
<body>
<form name="divsform" id="divsform">
Quantity / Price per Unit / Total
<div id="div0" style="display:none">
<input type="text" name="quantity0" id="quantity0">
<input type="text" name="price0" id="price0">
<input type="text" name="total0" id="total0" value="0">
<p>
</div>
<div id="div1" style="display:none">
<input type="text" name="quantity1" id="quantity1">
<input type="text" name="price1" id="price1">
<input type="text" name="total1" id="total1" value="0">
<p>
</div>
<div id="div2" style="display:none">
<input type="text" name="quantity2" id="quantity2">
<input type="text" name="price2" id="price2">
<input type="text" name="total2" id="total2" value="0">
<p>
</div>
<div id="grand" style="display:none">
Order Total:<br>
<input type="text" value="0" id="grandtotal" name="grandtotal">
</div>
<p>
<input type="text" name="quantity100" id="quantity100">
<select name="mySelect" onChange="updateForm(this.form)">
<option value="">
<option value="2.99">4x6
<option value="4.99">5x7
<option value="7.99">8x10
</select>
<input type="text" name="price100" id="price100">
<input type="text" name="total100" id="total100" onClick="divsform.total100.value = (divsform.quantity100.value - 0) * (divsform.price100.value - 0)">
<input type="button" value="Add another item" onClick="showDivs(document.getElementById('lastdiv').value)">
<input type="button" value="Submit Order">
<input type="text" id="lastdiv" value=0 style="display:none">
</form>
</body>
</html>