www.webdeveloper.com
Results 1 to 3 of 3

Thread: How do I get my php generated array input fields to Javascript for ajax

  1. #1
    Join Date
    Jan 2009
    Posts
    1

    How do I get my php generated array input fields to Javascript for ajax

    When the user enter a value into the quantity input field it calculates the first amount another entry to the same field would calculate the second amount instead of the second input fields entry. The other input fields behave the same as the first one. How do I match the input fields to quantity? Here is the code.

    <code>
    <?php
    include_once ("db.php");
    //include_once("common.php");
    ?>
    <!--
    To change this template, choose Tools | Templates
    and open the template in the editor.
    -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="CssTest6.css"></link>
    <script src="risingajax.js"></script>
    </head>
    <body>
    <form name="ticket" action="ticinsert.php" method="POST">
    <fieldset>
    <legend >Your Info</legend>
    <table border="0" width="100%" cellspacing="0" cellpadding="5">
    <thead>
    <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>First Name</td>
    <td><input type="text" name="first" value="" size="8" /></td>
    <td>Last Name</td>
    <td><input type="text" name="last" value="" size="8" /></td>
    <td>Address</td>
    <td><input type="text" name="address" value="" size="10" /></td>
    </tr>
    <tr>
    <td>City</td>
    <td><input type="text" name="city" value="" size="5" /></td>
    <td>State</td>
    <td><input type="text" name="state" value="" size="1" /></td>
    <td>Zip</td>
    <td><input type="text" name="zip" value="" size="2" /></td>
    </tr>
    <tr>
    <td>Email</td>
    <td><input type="text" name="email" value="" size="10" /></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>

    </tbody>
    </table>
    </fieldset>
    <fieldset>
    <legend>Ticket Info</legend>
    <?php
    dbConnect('comprise');


    {

    $rs = mysql_query("SELECT * FROM contributions where type = 'ticket'");

    // create an array holding the classes you want to switch between
    $classes=array("td1","td2");
    // a counter to keep track of which class is currently being used
    $classifier=0;
    $num = mysql_num_rows($rs);
    $i = 0;

    echo "<TABLE width=100% align=left cellpadding=5 cellspacing=0>";
    echo "<tr class=trhead >";

    echo"<td>Quantity</td>";
    echo"<td>Description</td>";
    echo"<td>Type</td>";
    echo"<td>Price</td>";
    echo"<td>Amount</td>";
    echo "</tr>";

    while ($i < $num){
    $price= mysql_result($rs,$i,"price");
    $description = mysql_result($rs,$i,"description");
    $typeid= mysql_result($rs,$i,"typeid");

    //$dmiddle= mysql_result($rs,$i,"middle");

    // access the value in the array associated with the key equal to the counter and print it in the <tr> bg
    echo "<tr class=" . $classes[$classifier] .">";
    echo '<td><input type="text" name="quantity[]" onkeyup = "calamount(this.value)" size="1" /></td>';
    echo "<td>" . $description . "</td>";
    echo "<td>" . $typeid . "</td>";
    echo "<td>" ."$". $price . "</td>";
    echo '<td id="amt" ></td>';//<input type="text" name="amount[$i]" size="3" /
    $i++;
    // increment the counter and mod it by 2 to effectively alternate between two numbers
    $classifier=($classifier+1)%2;
    }
    }
    echo "</table>";

    //

    ?>

    </fieldset>
    <div align="right"><input type="submit" value="Calculate" name="pay" /></div>
    </form>
    <!--<p>Suggestions: <span id="amt"></span></p>-->
    </body>

    </html>
    </code>

    Javascript File risingajax.js
    -----------------------
    <code>
    /*
    * To change this template, choose Tools | Templates
    * and open the template in the editor.
    */
    var xmlHttp
    function calamount(str)
    {
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
    {
    alert ("Browser does not support HTTP Request")
    return
    }
    var url="ticinsert.php"
    url=url+"?q="+str
    url=url+"&sid="+Math.random()
    xmlHttp.onreadystatechange=stateChanged
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
    }function stateChanged()
    {
    if (xmlHttp.readyState==4 )//|| xmlHttp.readyState=="complete"
    {
    document.getElementById("amt").innerHTML=xmlHttp.responseText
    }
    }function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
    //Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    }
    catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    return xmlHttp;
    }
    </code>
    PHP File ticinsert.php
    ----------------------

    <code>
    <?php
    include_once ("db.php");
    //include_once("common.php");
    ?>
    <?php
    $q=$_GET["q"];

    dbConnect('comprise');
    {

    $rs = mysql_query("SELECT * FROM contributions where type = 'ticket'");

    $num = mysql_num_rows($rs);
    $i = 0;
    while ($i < $num){
    $price= mysql_result($rs,$i,"price");
    $amount = $price * $q[$i];
    echo"$"; echo $amount ;

    $i++;

    }
    }


    ?>

  2. #2
    Join Date
    Jan 2009
    Posts
    19
    There are several avenues that you can look into:
    1. when the user changes values, repost the form, update the tables and render the form with the new values via PHP
    2. Use DOM methods to get and set values on the form

    The first method would be easiest since you already know PHP, the second is a bit more difficult because you are working with a dynamic table and your calculations are being completed on row/column. But, since your table is pretty basic, the following may help:

    you will need to put the extended row amount into an input field (name=\"amt[]\")for this to work.

    Code:
        function calcBase2(field){
            // Gain access to <tr> tag that holds row
            var tr = getParent(field, "tr");
            // Get values of form fields
            var qty = Number( getField(tr.cells[1], "input").value );
            var price = Number( getField(tr.cells[4], "input").value );
            var ttlNode = getField(tr.cells[5], "input");
            var ttlstd = Number( ttlstdNode.value );
    
            // Check for errors in data and fail silently
            if ( isNaN(qty) || isNaN(price)){
                alert('Non Numeric value detected');
                return;
            }
    
            // Run calculations
            var dc = qty * price;
            // sum the price column
            var amtttl = sumAmtFields('amt[]');
    
            // Update form display
            ttlNode.value = dc.toFixed(6);
            
            // something like this
           //document.form.ttlprice.value = amtttl.toFixed(2);
    
            // Clean up DOM node references
            ttlNode = null;
        }
    
        function sumAMTFields(fields) {
            var i = 1;
            var field;
            var val;
            var sum = 0;
            while(field = fields[i]) {
                val = Number(field.value);
                if ( isNaN(val) ) {
                    return NaN;
                }
                sum += val;
                i++;
            }
            return sum;
        }
    Last edited by radi8; 01-15-2009 at 02:54 PM.

  3. #3
    Join Date
    Jan 2010
    Posts
    3

    How to retrieve last value in an array type number field and calculate it?

    How to retrieve last value in an array type number field and calculate any number functions on this field?

    Lets say my field is "TEST" number type and repetition is 6 in table Dashboard and I have entered values to that field as 1,3,2,5,8,4
    Then calculation Last (Dashboard::TEST) will return value 4

    Max (Dashboard::TEST ) will return 8
    Min ( Dashboard::TEST ) will return 1
    Sum (Dashboard::TEST) will return 23

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles