Autofill data from a php form...

T

Truck Estevez

So I have this form I created in PHP, to get a general estimate of the
cost of my product... right now i have it so whatever you select, be
it in a dropdown menu or checkbox, your total is displayed at the
bottom, in textboxes, by clicking submit. I'd like it so the form
dynamically changes these totals depending on the value of the
dropdowns/checkboxes so I can remove the submit button completely if
that makes any sense... anybody have any suggestions, or is there a
tutorial out there that shows how to do this?

Thanks
truck
 
D

Doug Gunnoe

So I have this form I created in PHP, to get a general estimate of the
cost of my product... right now i have it so whatever you select, be
it in a dropdown menu or checkbox, your total is displayed at the
bottom, in textboxes, by clicking submit. I'd like it so the form
dynamically changes these totals depending on the value of the
dropdowns/checkboxes so I can remove the submit button completely if
that makes any sense... anybody have any suggestions, or is there a
tutorial out there that shows how to do this?

Thanks
truck
Click to expand...

Can you paste the code?

To point you in the right direction, you will have to use events of
the input and select elements.
 
T

Truck Estevez

OK this is going to be long, sorry. I'm just pasting the code as it is
in the browser, without all the php...do you want to see it with all
that (it's 3 documents and pretty long)....


<form method="post">
<table cellpadding="4" cellspacing="10" width="730" bgcolor="#EAE8E8"
border="0">
<tr><td valign="top" colspan="4">1. Garment Info:</td></tr>
<tr><td valign="top" colspan="4">


<select name="garmentquantity" style="width: 200px; margin: 3px;">


<option value="null">Garment Quantity</option>


<option value="72" >72</option>


<option value="108" >108</option>

<option value="144" >144</option>


<option value="216" >216</option>


<option value="288" >288</option>


<option value="360" >360</option>


<option value="504" >504</option>


<option value="648" >648</option>


<option value="936" >936</option>


<option value="1224" >1224</option>


</select>



<select name="imprintlocations" style="width: 200px; margin: 3px;">


<option value="null"># of Imprint Locations</option>


<option value="1" >1</option>


<option value="2" >2</option>


<option value="3" >3</option>


<option value="4" >4</option>


</select>


</td></tr>
<tr><td height="15" colspan="4" background="img/divider.gif"></td></
tr>
<tr><td valign="top" colspan="4">2. Imprint Info</td></tr>
<tr><td valign="top" align="center" colspan="4">
<table width="550" cellspacing="10">
<tr><td valign="top">
#1<br>

<select name="imprintlocation1" style="width: 200px; margin: 3px;">

<option value="null">Imprint Location</option>


<option value="full_front" >Full Front</option>


<option value="front_left_chest" >Left Chest</option>


<option value="front_center_chest" >Center Chest</option>


<option value="front_right_chest" >Above Pocket</option>


<option value="-" >-------------------------</option>


<option value="back_full_back" >Full Back</option>


<option value="back_high_back" >High Back</option>


<option value="--" >-------------------------</option>


<option value="sleeve_left_sleeve" >Left Sleeve</option>


<option value="sleeve_right_sleeve" >Right Sleeve</option>


<option value="---" >-------------------------</option>


<option value="sleeve_left_sleeve_long" >Left Sleeve (Long)</option>


<option value="sleeve_right_sleeve_long" >Right Sleeve (Long)</
option>


</select>

<br>

<select name="colors1" style="width: 200px; margin: 3px;">


<option value="null"># of Colors</option>


<option value="1_color" >1 Color</option>


<option value="2_color" >2 Color</option>


<option value="3_color" >3 Color</option>


<option value="4_color" >4 Color</option>


<option value="5_color" >5 Color</option>


<option value="6_color" >6 Color</option>


<option value="7_color" >7 Color</option>


<option value="8_color" >8 Color</option>


<option value="full_color" >Full Color</option>


</select>

<br>

<select name="inkchanges1" style="width: 200px; margin: 3px;">


<option value="null"># of Ink Changes</option>


<option value="1" >1</option>


<option value="2" >2</option>


<option value="3" >3</option>


<option value="4" >4</option>


<option value="5" >5</option>


<option value="6" >6</option>


<option value="7" >7</option>


<option value="8" >8</option>


<option value="9" >9</option>


<option value="10" >10</option>


</select>

<br>Unit Cost: <input type="text" size="6" name="T_Price"
value="0.00"> Total Cost: <input type="text" size="6" name="T_Price"
value="0.00">
</td>
<td valign="top">
#2<br>

<select name="imprintlocation2" style="width: 200px; margin: 3px;">


<option value="null">Imprint Location</option>


<option value="full_front" >Full Front</option>


<option value="front_left_chest" >Left Chest</option>


<option value="front_center_chest" >Center Chest</option>


<option value="front_right_chest" >Above Pocket</option>


<option value="-" >-------------------------</option>


<option value="back_full_back" >Full Back</option>


<option value="back_high_back" >High Back</option>


<option value="--" >-------------------------</option>


<option value="sleeve_left_sleeve" >Left Sleeve</option>


<option value="sleeve_right_sleeve" >Right Sleeve</option>


<option value="---" >-------------------------</option>


<option value="sleeve_left_sleeve_long" >Left Sleeve (Long)</option>


<option value="sleeve_right_sleeve_long" >Right Sleeve (Long)</
option>


</select>

<br>

<select name="colors2" style="width: 200px; margin: 3px;">


<option value="null"># of Colors</option>


<option value="1_color" >1 Color</option>


<option value="2_color" >2 Color</option>


<option value="3_color" >3 Color</option>


<option value="4_color" >4 Color</option>


<option value="5_color" >5 Color</option>


<option value="6_color" >6 Color</option>


<option value="7_color" >7 Color</option>


<option value="8_color" >8 Color</option>


<option value="full_color" >Full Color</option>


</select>

<br>

<select name="inkchanges2" style="width: 200px; margin: 3px;">


<option value="null"># of Ink Changes</option>


<option value="1" >1</option>


<option value="2" >2</option>


<option value="3" >3</option>


<option value="4" >4</option>


<option value="5" >5</option>


<option value="6" >6</option>


<option value="7" >7</option>


<option value="8" >8</option>


<option value="9" >9</option>


<option value="10" >10</option>


</select>

<br>Unit Cost: <input type="text" size="6" name="T_Price"
value="0.00"> Total Cost: <input type="text" size="6" name="T_Price"
value="0.00">
</td>

</tr>
<tr><td valign="top">
#3<br>

<select name="imprintlocation3" style="width: 200px; margin: 3px;">


<option value="null">Imprint Location</option>


<option value="full_front" >Full Front</option>

<option value="front_left_chest" >Left Chest</option>


<option value="front_center_chest" >Center Chest</option>


<option value="front_right_chest" >Above Pocket</option>


<option value="-" >-------------------------</option>


<option value="back_full_back" >Full Back</option>


<option value="back_high_back" >High Back</option>


<option value="--" >-------------------------</option>


<option value="sleeve_left_sleeve" >Left Sleeve</option>


<option value="sleeve_right_sleeve" >Right Sleeve</option>


<option value="---" >-------------------------</option>


<option value="sleeve_left_sleeve_long" >Left Sleeve (Long)</option>


<option value="sleeve_right_sleeve_long" >Right Sleeve (Long)</
option>


</select>

<br>

<select name="colors3" style="width: 200px; margin: 3px;">


<option value="null"># of Colors</option>


<option value="1_color" >1 Color</option>


<option value="2_color" >2 Color</option>


<option value="3_color" >3 Color</option>


<option value="4_color" >4 Color</option>


<option value="5_color" >5 Color</option>


<option value="6_color" >6 Color</option>


<option value="7_color" >7 Color</option>


<option value="8_color" >8 Color</option>


<option value="full_color" >Full Color</option>


</select>

<br>

<select name="inkchanges3" style="width: 200px; margin: 3px;">


<option value="null"># of Ink Changes</option>


<option value="1" >1</option>


<option value="2" >2</option>


<option value="3" >3</option>


<option value="4" >4</option>


<option value="5" >5</option>


<option value="6" >6</option>


<option value="7" >7</option>


<option value="8" >8</option>


<option value="9" >9</option>


<option value="10" >10</option>


</select>

<br>Unit Cost: <input type="text" size="6" name="T_Price"
value="0.00"> Total Cost: <input type="text" size="6" name="T_Price"
value="0.00">
</td>
<td valign="top">
#4<br>

<select name="imprintlocation4" style="width: 200px; margin: 3px;">


<option value="null">Imprint Location</option>


<option value="full_front" >Full Front</option>


<option value="front_left_chest" >Left Chest</option>


<option value="front_center_chest" >Center Chest</option>


<option value="front_right_chest" >Above Pocket</option>


<option value="-" >-------------------------</option>


<option value="back_full_back" >Full Back</option>


<option value="back_high_back" >High Back</option>


<option value="--" >-------------------------</option>


<option value="sleeve_left_sleeve" >Left Sleeve</option>


<option value="sleeve_right_sleeve" >Right Sleeve</option>


<option value="---" >-------------------------</option>


<option value="sleeve_left_sleeve_long" >Left Sleeve (Long)</option>


<option value="sleeve_right_sleeve_long" >Right Sleeve (Long)</
option>


</select>

<br>

<select name="colors4" style="width: 200px; margin: 3px;">


<option value="null"># of Colors</option>


<option value="1_color" >1 Color</option>


<option value="2_color" >2 Color</option>


<option value="3_color" >3 Color</option>


<option value="4_color" >4 Color</option>


<option value="5_color" >5 Color</option>


<option value="6_color" >6 Color</option>


<option value="7_color" >7 Color</option>


<option value="8_color" >8 Color</option>


<option value="full_color" >Full Color</option>


</select>

<br>

<select name="inkchanges4" style="width: 200px; margin: 3px;">


<option value="null"># of Ink Changes</option>


<option value="1" >1</option>


<option value="2" >2</option>


<option value="3" >3</option>


<option value="4" >4</option>


<option value="5" >5</option>


<option value="6" >6</option>


<option value="7" >7</option>


<option value="8" >8</option>


<option value="9" >9</option>


<option value="10" >10</option>


</select>

<br>Unit Cost: <input type="text" size="6" name="T_Price"
value="0.00"> Total Cost: <input type="text" size="6" name="T_Price"
value="0.00">
</td>
</tr>
</table>
</td></tr>
<tr><td height="15" colspan="4" background="img/divider.gif"></td></
tr>
<tr>
<td valign="top" colspan="4">
3. Upcharges</td></tr>
<tr>
<td valign="top" align="center" colspan="4">

<!-- begin upcharges -->
<table border="0" cellspacing="10" width="560">
<tr>
<td valign="top">

<input type="checkbox" name="fleece" value="sportshirts" >

Fleece/Sport Shirts 25%
</td>
<td valign="top">

<input type="checkbox" name="preprodsample" value="longsleeve" >

Pre-Production Sample $45 Per Color
</td>

<td valign="top">


<select name="additionaleproof" style="width: 120px;">


<option value="null">Additional E-Proof</option>


<option value="1" >1</option>


<option value="2" >2</option>


<option value="3" >3</option>


<option value="4" >4</option>


<option value="5" >5</option>


<option value="6" >6</option>


<option value="7" >7</option>


<option value="8" >8</option>


<option value="9" >9</option>


<option value="10" >10</option>


</select>

</td></tr>
<tr>
<td valign="top">

<input type="checkbox" name="foldpolybag" value="sportshirts" >

Fold and Polybag

</td>
<td valign="top">

<input type="checkbox" name="exactquantity" value="sportshirts" >

Exact Quantity 25%
</td>
<td valign="top">


<select name="splitshipment" style="width: 120px;">


<option value="null">Split Shipment</option>


<option value="1" >1</option>


<option value="2" >2</option>


<option value="3" >3</option>


<option value="4" >4</option>


<option value="5" >5</option>


<option value="6" >6</option>


<option value="7" >7</option>


<option value="8" >8</option>


<option value="9" >9</option>


<option value="10" >10</option>


</select>

</td></tr>
<tr>
<td valign="top">

<input type="checkbox" name="hangtag" value="sportshirts" >

Hang Tag
</td>
<td valign="top">


<select name="artpreptime" style="width: 120px;">


<option value="null">Art Prep Time</option>


<option value="1" >1 hr.</option>


<option value="2" >2 hr.</option>


<option value="3" >3 hr.</option>


<option value="4" >4 hr.</option>


<option value="5" >5 hr.</option>


<option value="6" >6 hr.</option>


<option value="7" >7 hr.</option>


<option value="8" >8 hr.</option>


</select>

</td><td valign="top">


<select name="rushservice" style="width: 120px;">

<option value="null">Rush Service</option>


<option value="1.0" >1 Day Rush 100%</option>


<option value=".75" >3 Day Rush 75%</option>


<option value=".50" >5 Day Rush 50%</option>


<option value=".25" >7 Day Rush 25%</option>


</select>

</td></tr>
<!-- end upcharges -->
</table>
</td></tr>
<tr><td height="15" colspan="4" background="img/divider.gif"></td></
tr>
<tr>
<td valign="top" colspan="4">
4. Calculate Your Costs</td></tr>

<tr>
<td valign="top" align="center" colspan="4">
<table border="0" cellspacing="0">
<tr><td valign="top">
Garment Cost:<br>
Unit Cost: <input type="text" size="4" name="garmentunitcost"
value="0.00">
Total Cost: <input type="text" size="4" name="garmenttotalcost"
value="0.00">
</td><td width="10"></td><td valign="top">
Printing Cost:<br>
Unit Cost: <input type="text" size="4" name="T_Price" value="0.00">
Total Cost: <input type="text" size="4" name="T_Price" value="0.00">

</td><td width="10"></td><td valign="top">
Total Cost:<br>
Unit Cost: <input type="text" size="4" name="T_Price" value="0.00">
Total Cost: <input type="text" size="4" name="T_Price" value="0.00">
</td></tr>
</table>
</td></tr>
</table>
<input type="Submit" name="submit" value="Submit">
</form>
 
B

Bart Van der Donck

Truck said:
So I have this form I created in PHP, to get a general estimate of the
cost of my product... right now i have it so whatever you select, be
it in a dropdown menu or checkbox, your total is displayed at the
bottom, in textboxes, by clicking submit. I'd like it so the form
dynamically changes these totals depending on the value of the
dropdowns/checkboxes so I can remove the submit button completely if
that makes any sense... anybody have any suggestions, or is there a
tutorial out there that shows how to do this?
Click to expand...

I believe the following should get you started (select + radio +
input):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My web page</title>
<script type="text/javascript">
function calc() {
var am;

// loop through document.f.amount to see which one is checked...
for (var i = 0; i < document.f.amount.length; ++i) {
if (document.f.amount.checked) am = document.f.amount.value;
}

// multiply fruit and amount
var fruit =
document.f.fruit.options[document.f.fruit.selectedIndex].value;
var total = parseFloat(fruit) * parseFloat(am);

// add bag and/or box if checked
if (document.f.bag.checked) total+=parseFloat(document.f.bag.value);
if (document.f.box.checked) total+=parseFloat(document.f.box.value);

// give box with totals the right (rounded) value
document.f.total.value = Math.round(total*100) / 100;
}
</script>
</head>
<body>
<form name="f" action="#">
<p>
Fruit: <br>
<select size="1" name="fruit" onChange="calc()">
<option value="0" selected>---</option>
<option value="1.40">Banana | 1.40</option>
<option value="0.85">Pear | 0.85</option>
</select>
</p>
<p>
Amount: <br>
<input onClick="calc()" type="radio"
value="0" name="amount" checked>0<br>
<input onClick="calc()" type="radio"
value="1" name="amount">1<br>
<input onClick="calc()" type="radio"
value="2" name="amount">2
</p>
<p>
Extras:<br>
<input type="checkbox" name="bag" value="0.08"
onClick="calc()">Bag | 0.08<br>
<input type="checkbox" name="box" value="0.13"
onClick="calc()">Box | 0.13
</p>
<p>
Total:<br>
<input type="text" name="total" onFocus="blur();" value="0">
</p>
<p>
<input type="Reset">
</p>
</form>
</body>
</html>

Hope this helps,
 
D

Doug Gunnoe

So I have this form I created in PHP, to get a general estimate of the
cost of my product... right now i have it so whatever you select, be
it in a dropdown menu or checkbox, your total is displayed at the
bottom, in textboxes, by clicking submit. I'd like it so the form
dynamically changes these totals depending on the value of the
dropdowns/checkboxes so I can remove the submit button completely if
that makes any sense... anybody have any suggestions, or is there a
tutorial out there that shows how to do this?

Thanks
truck
Click to expand...

And another how to example. One thing to watch for is the string to
number conversion in JavaScript.

parseInt and parseDouble are two useful functions to deal with this.

<html>
<head>

<script>

function updateTotals(){
totalBX = document.getElementById('totals');
totalBX.value = addEmUp();
}

function addEmUp(){
priceOfShirt = 5; //cheap ey?
totals = 0;

garmQTY = document.getElementById('garmentquantity');
prntLocation = document.getElementById('imprintlocations');
prntLocation1 = document.getElementById('imprintlocation1');
garmColors = document.getElementById('colors1');


totals += priceOfShirt * parseInt(garmQTY.value);


totals += (parseInt(prntLocation.value) * 2) *
parseInt(garmQTY.value); //$2 bucks per location per shirt


switch(prntLocation1.value){
case 'full_front': totals += parseInt(garmQTY.value) * 3; //$3 bucks
for this option per shirt
break;
case 'front_left_chest': totals += parseInt(garmQTY.value) * 2; //$2
bucks for this one option per shirt
break;
default: totals += parseInt(garmQTY.value) * 1; //all others are a
buck per shirt
break;
}

switch(garmColors.value){
case "1_color": totals += parseInt(garmQTY.value) * 1;
break;
case "2_color": totals += parseInt(garmQTY.value) * 2;
break;
case "3_color": totals += parseInt(garmQTY.value) * 3;
break;
case "full_color": totals += parseInt(garmQTY.value) * 4;
break;
}

return totals;

}

</script>

</head>

<body onload="updateTotals()">

<form>
Garment Quantity
<select id="garmentquantity" style="width: 200px; margin: 3px;"
onchange="updateTotals()">
<option value="10" SELECTED >10</option>
<option value="20" >20</option>
<option value="30" >30</option>
<option value="40" >40</option>
<option value="50" >50</option>
<option value="60" >60</option>
<option value="70" >70</option>
<option value="80" >80</option>
<option value="90" >90</option>
<option value="100" >100</option>
</select>

<hr />
# of Imprint Locations
<select id="imprintlocations" style="width: 200px; margin: 3px;"
onchange="updateTotals()">
<option value="1" SELECTED>1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>

<hr />
Imprint Location
<select id="imprintlocation1" style="width: 200px; margin: 3px;"
onchange="updateTotals()">
<option value="full_front" SELECTED>Full Front</option>
<option value="front_left_chest" >Left Chest</option>
<option value="front_center_chest" >Center Chest</option>
<option value="front_right_chest" >Above Pocket</option>
</select>

<hr />
# of Colors
<select id="colors1" style="width: 200px; margin: 3px;"
onchange="updateTotals()">
<option value="1_color" SELECTED>1 Color</option>
<option value="2_color" >2 Color</option>
<option value="3_color" >3 Color</option>
<option value="full_color" >Full Color</option>
</select>

<hr />

Total: <input type="text" id="totals" value="0" />

</form>

</body>



</html>
 
T

Truck Estevez

Right, thats a great example but I have php doing all my calculations
and I really don't want to re-write the whole thing in javascript...
am I screwed or is there a way to integrate my php calculations with
the js?

truck



Truck said:
So I have this form I created in PHP, to get a general estimate of the
cost of my product... right now i have it so whatever you select, be
it in a dropdown menu or checkbox, your total is displayed at the
bottom, in textboxes, by clicking submit. I'd like it so the form
dynamically changes these totals depending on the value of the
dropdowns/checkboxes so I can remove the submit button completely if
that makes any sense... anybody have any suggestions, or is there a
tutorial out there that shows how to do this?
Click to expand...

I believe the following should get you started (select + radio +
input):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My web page</title>
<script type="text/javascript">
function calc() {
var am;

// loop through document.f.amount to see which one is checked...
for (var i = 0; i < document.f.amount.length; ++i) {
if (document.f.amount.checked) am = document.f.amount.value;
}

// multiply fruit and amount
var fruit =
document.f.fruit.options[document.f.fruit.selectedIndex].value;
var total = parseFloat(fruit) * parseFloat(am);

// add bag and/or box if checked
if (document.f.bag.checked) total+=parseFloat(document.f.bag.value);
if (document.f.box.checked) total+=parseFloat(document.f.box.value);

// give box with totals the right (rounded) value
document.f.total.value = Math.round(total*100) / 100;
}
</script>
</head>
<body>
<form name="f" action="#">
<p>
Fruit: <br>
<select size="1" name="fruit" onChange="calc()">
<option value="0" selected>---</option>
<option value="1.40">Banana | 1.40</option>
<option value="0.85">Pear | 0.85</option>
</select>
</p>
<p>
Amount: <br>
<input onClick="calc()" type="radio"
value="0" name="amount" checked>0<br>
<input onClick="calc()" type="radio"
value="1" name="amount">1<br>
<input onClick="calc()" type="radio"
value="2" name="amount">2
</p>
<p>
Extras:<br>
<input type="checkbox" name="bag" value="0.08"
onClick="calc()">Bag | 0.08<br>
<input type="checkbox" name="box" value="0.13"
onClick="calc()">Box | 0.13
</p>
<p>
Total:<br>
<input type="text" name="total" onFocus="blur();" value="0">
</p>
<p>
<input type="Reset">
</p>
</form>
</body>
</html>

Hope this helps,
Click to expand...
 
V

VK

Right, thats a great example but I have php doing all my calculations
and I really don't want to re-write the whole thing in javascript...
am I screwed or is there a way to integrate my php calculations with
the js?
Click to expand...

You did not say that you want to make any PHP integrations. All you
said was "I'd like it so the form dynamically changes these totals
depending on the value of the dropdowns/checkboxes", that is what this
nice sample by Bart Van der Donck is about. For the quoted question
yes, you are kind of screwed because PHP is run server-side and
Javascript is run client-side and they have no native runtime
connection whatsoever. You may of course attach event listeners to
form elements and onchange use XMLHttpRequest to the server to get the
calculation result so to update relevant form fields (kind of RMI/
WebService path). But if it's nothing than simple cost/total/tax etc.
calculations then such approach is hugely ineffective IMO. Just use
Javascript alone. Other option is to keep everything server-side and
provide "Recalculate total" or similar submit button in the form to re-
submit the form every time user wants to see the results of her
selections. You also may use Javascript solution for automated updates
client-side and normally hidden <noscript> block with "Recalculate
total" or similar submit button in case if the script support is
disabled.
 
B

Bart Van der Donck

Truck said:
On Dec 18, 8:02 am, Bart Van der Donck<[email protected]> wrote:
Click to expand...

[snip code]
Right, thats a great example but I have php doing all my calculations
and I really don't want to re-write the whole thing in javascript...
am I screwed or is there a way to integrate my php calculations with
the js?
Click to expand...

I'm afraid that the PHP-code cannot be ported. You'll need to write it
from scratch in javascript. But frankly, I don't see what could be
wrong with doing it in PHP.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can't execute php to delete multiple rows in database 3
Survey details won't go through using php, ajax, Mysql 0
How to store data from a sign up form on a website into an sql databse 1
Dynamicly add dropdown lists to a form populated with php/mysql query 2
Dynamic Drop Downs PHP AJAX 0
Form Data Help 4
Post to PHP script from Java Applet 4
Gathering data from form fields within iFrames 2

Members online

No members online now.
Total: 23 (members: 1, guests: 22)
Robots: 320

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top