Autofill data from a php form...

Discussion in 'Javascript' started by Truck Estevez, Dec 17, 2007.

  1. 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
    Truck Estevez, Dec 17, 2007
    #1
    1. Advertising

  2. Truck Estevez

    Doug Gunnoe Guest

    On Dec 17, 2:17 pm, Truck Estevez <> wrote:
    > 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


    Can you paste the code?

    To point you in the right direction, you will have to use events of
    the input and select elements.
    Doug Gunnoe, Dec 17, 2007
    #2
    1. Advertising

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





    On Dec 17, 1:00 pm, Doug Gunnoe <> wrote:
    > On Dec 17, 2:17 pm, Truck Estevez <> wrote:
    >
    > > 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

    >
    > Can you paste the code?
    >
    > To point you in the right direction, you will have to use events of
    > the input and select elements.
    Truck Estevez, Dec 17, 2007
    #3
  4. Truck Estevez wrote:
    > OK this is going to be long, sorry.


    No.

    > [more than 800 lines of uncommented code]
    > [top post]


    http://jibbering.com/faq/


    PointedEars
    Thomas 'PointedEars' Lahn, Dec 18, 2007
    #4
  5. Truck Estevez wrote:

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


    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,

    --
    Bart
    Bart Van der Donck, Dec 18, 2007
    #5
  6. Truck Estevez

    Doug Gunnoe Guest

    On Dec 17, 2:17 pm, Truck Estevez <> wrote:
    > 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


    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>
    Doug Gunnoe, Dec 18, 2007
    #6
  7. 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



    On Dec 18, 8:02 am, Bart Van der Donck <> wrote:
    > Truck Estevez wrote:
    > > 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?

    >
    > 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,
    >
    > --
    > Bart
    Truck Estevez, Dec 18, 2007
    #7
  8. Truck Estevez

    VK Guest

    On Dec 18, 10:09 pm, Truck Estevez <> wrote:
    > 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?


    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.
    VK, Dec 18, 2007
    #8
  9. Truck Estevez wrote:

    > On Dec 18, 8:02 am, Bart Van der Donck<> wrote:


    [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?


    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.

    --
    Bart
    Bart Van der Donck, Dec 19, 2007
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?THVjYSBNYXJ0aW5ldHRpIC0gUGhhdHNvZnQ=?=

    Asp.net multiple textbox autofill not work!!!

    =?Utf-8?B?THVjYSBNYXJ0aW5ldHRpIC0gUGhhdHNvZnQ=?=, Aug 30, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    2,808
    James Doughty
    Aug 31, 2005
  2. =?Utf-8?B?QW5kcmUgUmFuaWVyaQ==?=

    disable autofill in WebControls.TextBox control

    =?Utf-8?B?QW5kcmUgUmFuaWVyaQ==?=, Sep 29, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    12,384
    cmschick
    Nov 29, 2007
  3. rob
    Replies:
    1
    Views:
    387
  4. rob

    Autofill from External Program

    rob, Jan 6, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    464
    S. Justin Gengo
    Jan 6, 2006
  5. Rajive Narain
    Replies:
    0
    Views:
    1,538
    Rajive Narain
    Sep 18, 2009
Loading...

Share This Page