Page 1 of 1

Javasript price update in a PHP dynamically created form.

Posted: Fri Sep 18, 2009 3:57 pm
by dreagose
I have a product selection and checkout form that is dynamically created in a PHP page.
It has checkboxes and Qty amounts with a submit button to post it to an outside cartserver service.

My boss wants a running total that updates the price totals when the qty changes and/or the customer checks/unchecks a box.

1st question - Can it be done?
2nd question - How do I do it?

I am new to PHP and have NEVER done any Javascript beyond copying from an example. This was posted in the Javascript side because I think that it can only be done in Javascript.

A snippet of PHP code is included for an example but I can email someone the entire 450 lines to someone who would be willing to help. :)

Thanks a bunch...

Code: Select all

echo "<table width='800' border='1' rules=none bgcolor='#FFFFCC'>";
echo "<tr><td width='625'><font face='verdana' size='+1'>Front Tie Down Kit Part #: <font color='#333399'>".$fstag."</font> - only <font color='#333399'>$".$fpr."</font></font></td>";
echo "<td><strong>Qty: </strong><input type='TEXT' name='op1_front' value='1' size='2' /></td>"; // qty
echo "<td valign='middle'><strong>Select: </strong><input type='checkbox' checked='checked' value='s-1234^".$fstag."^".$fpd."^".$fpr."^op1^^^^".$fpw."' name='item_front' /></td></tr>";
if ($fs) echo "<tr><td width='625'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Regularly $".$fpn." <font color='#FF0000'><strong>On Sale for Only $".$fpr."</strong></font></td><tr>";

Re: Javasript price update in a PHP dynamically created form.

Posted: Fri Sep 18, 2009 4:47 pm
by califdon
You're right, that can be done in Javascript. It doesn't matter how the html code was generated, with php or not. Once it's in the browser, it's just html, so it's just like any other html page. You will need to have JS functions for each form element that the user can change, and the functions will be called in the onBlur event, which is when the user's cursor leaves the form element. Those JS functions will probably need to use data from other form elements (quantity, price, etc.), perform the arithmetic, then write the appropriate values to wherever you are going to display them on the form, either as a form element or possibly just the InnerHtml property of some other html element. So it doesn't involve any php code, except to send the JS code to the browser, which may or not be done with php, quite possibly not. It's just straight Javascript.

Re: Javasript price update in a PHP dynamically created form.

Posted: Mon Sep 21, 2009 11:41 am
by dreagose
Thanks for the info. I'm going to be banging my head for a while :banghead: because I'm VERY new at PHP and even NEWER at Javascript yet this project has forced me to learn on the fly some advanced (for me) stuff in both. :crazy:

in doing research I've found that a "check all" box would be great but every checkbox and qty textbox is named differently because of the outside cartserver that we are submitting the info to. I can only use the form ID as the same for all. http://www.americart.com/faqs_cart_setup_advanced.asp#2

I'm thinking that I should assign variables to each of these items but then how would I handle the checkboxes... The price amount for each item is assigned in PHP from data it pulls from a database so I have to figure out how to get a server side variable to populate a client side variable usable by javascript.

again, the cartserver is requiring me to use different form names for each item.

to make sure everything is really nuts the number and type of items listed is dynamically created as per previous choices.

Re: Javasript price update in a PHP dynamically created form.

Posted: Mon Sep 21, 2009 2:39 pm
by califdon
I certainly can't answer all your questions about a specific application, but perhaps these generalities will help point you in the right direction.

A browser interprets HTML, CSS and Javascript in order to display a web page and react to user actions. How it gets that code is immaterial. The browser doesn't even know whether a piece of Javascript, for example, was generated by PHP, a CGI Perl script, or simply part of a static HTML document. So your thinking must begin with what you want the browser to see. You might even want to start by writing a dummy web page that already has everything you want, then analyze which parts of it can just be in a static HTML document and which parts must be generated differently each time, requiring the use of PHP to do so. What you described in your original post is 100% Javascript, since the routines to calculate and display data based on user inputs won't change from one execution to another, so there's no PHP involved. The one exception is what you brought up in your previous post, if the number and names of the form elements are determined dynamically. To handle that will require PHP to insert the appropriate names into the Javascript code. I didn't really follow the details of your specific shopping cart application, but that could become rather complex, no doubt. That's the challenge of programming, and in particular when you use a system designed by someone else, but want to modify it or extend it for your own use. There's no substitute for programming experience in such a situation. You don't want to let a first year veterinary student attempt brain surgery on a human.

Re: Javasript price update in a PHP dynamically created form.

Posted: Thu Oct 01, 2009 1:52 pm
by dreagose
I found the solution after I posted another forum question..

Code: Select all

<script type="text/javascript">
    
    function updatetotal() {
        document.main.total.value = '';
        //var qtyid = document.getElementById(qty);
        //var selid = document.getElementById(sel);
        var sum = 0;
        var val = 0;
        var qty = 0;
        var ar = "none";
        for (cnt=0;cnt<document.main.sel.length;cnt++) {
          if (document.main.sel[cnt].checked) {
            var ar = new String(document.main.sel[cnt].value);
            var qty = parseInt(document.main.qty[cnt].value);
            var ara = ar.split('^');
            var val = ara[3];
            sum = sum + val * qty;
            // sum = sum + parseInt(document.main.choice[cnt].value);
          }
        }
        document.main.total.value = sum;
    }
</script>
 
 
<form name="main">
    <p>test a: Qty: <input type='TEXT' name='op1' id="qty" value='1' size='2' onblur="updatetotal()"/> 
    Select:
    <input type="checkbox" name="choice1" id="sel" value="acc1t^abc123^desc blah1^20.10^op1^^^^14" onchange="updatetotal()"/>$20.10<br/>
        test b: Qty: <input type='TEXT' name='op2' id="qty" value='1' size='2' onblur="updatetotal()"/>
         Select:
         <input type="checkbox" name="choice2" id="sel" value="acct1^abc124^desc blah2^30.20^op2^^^^24" checked="checked" onchange="updatetotal()"/>$30.20<br/>
        test c: Qty: <input type='TEXT' name='op3' id="qty" value='1' size='2' onblur="updatetotal()"/>
        Select:
        <input type="checkbox" name="choice3" id="sel" value="acct1^abc125^desc blah3^40.30^op3^^^^34" onchange="updatetotal()"/>$40.30<br/>
        test d: Qty: <input type='TEXT' name='op4' id="qty" value='1' size='2' onblur="updatetotal()"/>
        Select:
        <input type="checkbox" name="choice4" id="sel" value="acct1^abc126^desc blah4^50.40^op4^^^^44" onchange="updatetotal()"/>$50.40<br/>
    </p>
    <p>Total: <input type="text" size="5" name="total" value="0"/></p>
</form>

Re: Javasript price update in a PHP dynamically created form.

Posted: Fri Oct 02, 2009 9:22 am
by lowcostweb
you can generate array and use that. This way value of checkbox will be simple and probably you may need that in php after posting form so coding in php will also be avoided.

another way is ajax but this is not good solution

http://phpwebsites.info

Re: Javasript price update in a PHP dynamically created form.

Posted: Fri Oct 02, 2009 9:44 am
by dreagose
Forgive me if I misunderstand your comment but I cannot change the format of the value field for the checkbox. That is because of the outside cart server service that we are using. I have to post the data as-is or it will fail. The form is developed by a PHP program but when the form is submitted, it's out of my hands and off-site.

I did get a viable solution with the above code with some small snags. The textbox value was being hijacked by the javascript somehow and not allowing the form to pass the updated value forcing it to only pass the default value assigned at the start. I think I fixed it with the change from onchange to onkeyup for the event trigger and it seems to work... I hope. :wink:

This has been a long and hard learning curve for me with PHP AND javascript. I'm very new at both but it's the only solution we had to make our customers get the correct items.