Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post

    AJAX-created form inputs not posting

    I've looked around quite a bit, and I'm fairly certain the problem I'm having is pretty similar to a lot of other people's issues, but I've been beating my head into a wall for a long time now and can't get this working right.

    Basically I'm using AJAX to create a couple read-only text-input form fields based on a value in a drop-down menu (the contents of which are pulled from mysql). The fields appear correctly with all the values visible, but when I submit the form (post), the fields that were generated all post with empty values. Unless, of course, I am using IE, then there is no problem. This leads me to believe I'm screwing up the DOM somewhere but I can't figure out where - I don't have any open/misplaced <table> or <form> or <___>, nor does the PHP file that creates the field elements. Here is a (brief) overview of the project (helps to know what I'm trying to achieve I guess):

    This is a form used to 'repack'(alter) an inventory item by removing an existing inventory item (such as 1000 boxes of 15# asparagus) and creating a new inventory item (such as 500 boxes of 30# asparagus). The idea is that the user clicks the "Lot Number" drop-down, selects which lot number they want to repack, and gets to see what the current weight/size/type values of that lot number are. They are read-only fields, but I need them to be included when the form posts so that the transaction handler records everything that got repacked. There is also a real-time "calculator" at the bottom of the page that shows the total weight before the repack (splits the weight string at the # character, multiplies the preceding number by the box count, add every line together), after the repack, and whatever difference there is. This calculator also does not work, as the DOM never correctly has the current values (even though they are being displayed on the screen) - unless, of course, you're using IE, then it works fine.

    Here is all the code I that I think is pertinent:

    HTML form:
    Code:
    <table align="left" width="826" border="0" cellspacing="0" cellpadding="3" class="main-table">
     <form action="repack_form_csv.php" method="post" name="repack_form" id="repack_form">
    (some table content/etc)
        <tr>
          <td align="left"><em>1: Removed</em></td>
    	<td align="center">
    	    <?php $Row = "1";                <!-- Using a PHP function to create the drop-down select list - this part works and posts fine -->
    	    lotNumberSelect($Row); ?>
    	</td>
    	<td colspan=3>
    	<div id="txtHint1">&nbsp;</div>    <!-- this div is where the new fields get created. They show up with the right values, but don't post in FF/Chrome -->
    	</td>
    	<td align="center"><input onchange="updateTotal()" name="ItemAmount1" type="text" size="8"></td>
    	<td align="center">&nbsp;</td>
        </tr>
    (more table stuff)
     </form>
    </table>

    Here is the PHP function I'm using to generate the drop-down list. It has an onchange event that triggers the creating of the input elements by the PHP file via AJAX:

    PHP Code:
        <?php
        
    function lotNumberSelect($Row){
            include(
    "assets/connect.php");
            
    $LotNumber "LotNumber" $Row;
            
    $Row "-" $Row;
            
    $query "SELECT `lotnumber` FROM `inventorylist`";
            
    $result mysql_query($query);
            echo 
    "<select name='$LotNumber' onchange='showItems(this.value)'>";
            echo 
    "<option selected value=''></option>";
            while(
    $nt=mysql_fetch_array($result)){
            
    $value $nt['lotnumber'].$Row;
                echo 
    "<option value='$value'>$nt[lotnumber]</option>"; }
            echo 
    "</select>";
        }
    ?>

    And here's my AJAX JS:
    Code:
    function showItems(str)
    {
        var divArray = str.split("-");
        var divID = 'txtHint' + divArray[1];
        
        if (str=="") {
    	document.getElementById("txtHint").innerHTML="";
    	return;
    	} 
        if (window.XMLHttpRequest) {	// code for IE7+, Firefox, Chrome, Opera, Safari
    	xmlhttp=new XMLHttpRequest();
    	}
        else {				// code for IE6, IE5
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
        xmlhttp.onreadystatechange=function() {
    	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    	    document.getElementById(divID).innerHTML=xmlhttp.responseText;
    	}
        }
        xmlhttp.open("GET","assets/repack_form/getitems.php?q="+str,true);
        xmlhttp.send();
    }
    And here is the getitems.php:
    PHP Code:
    <?php
    $q
    =$_GET["q"];

    $qArray explode("-"$q);
    $RowNumber $qArray[1];
    $LotNumber $qArray[0];

    include(
    "../connect.php");

    $sql="SELECT * FROM inventorylist WHERE lotnumber = '".$LotNumber."'";

    $result mysql_query($sql);
    while(
    $row mysql_fetch_array($result))
      {
      echo 
    "<tr>";
      echo 
    "<td><input type=text name=descWeight" $RowNumber " size=12 value='" $row['weight'] . "'></td>";
      echo 
    "<td><input type=text name=descSize" $RowNumber " size=12 value='" $row['size'] . "'></td>";
      echo 
    "<td><input type=text name=descType" $RowNumber " size=12 value='" $row['type'] . "'></td>";
      echo 
    "</tr>";
      }
    ?>
    The PHP is used in 10 different rows of cells across the page, hence all the "RowNumber" and string exploding (tried making it as modular as I could).

    I created a test button at the bottom of the page using this code:
    Code:
    <input type="button" value="Test Select" onclick="alert(document.repack_form.descWeight1.value)">
    And when I click it in IE (after selecting something in the drop-down) it shows me the value, but in FF/Chrome, it doesn't do anything (no value there). Using Chrome's element inspector, I can see the source code changing to reflect the text fields, and they are all definitely within the FORM tags, so I'm stumped. Any help would be appreciated!


    For some potential clarity, here is a snapshot of the source in Chrome's element inspector after I select something to create the text fields (I'll paste the whole row:

    Code:
    <tr>
          <td align="left"><em>1: Removed</em></td>
    <!-- LotNumber1 -->
    	<td align="center">
    	     <select name="LotNumber1" onchange="showItems(this.value)"><option selected="" value=""></option><option value="66666-1">66666</option><option value="66666R1-1">66666R1</option><option value="66666R2-1">66666R2</option><option value="66666R3-1">66666R3</option><option value="66666R4-1">66666R4</option><option value="66666R5-1">66666R5</option></select>	</td>
    	<td colspan="3">
    <!-- Weight/Size/Type Span 1 -->
    	<div id="txtHint1"> <input type="text" name="descWeight1" size="12" value="15# Loose Carton"><input type="text" name="descSize1" size="12" value="Bagged"><input type="text" name="descType1" size="12" value="Export Asparagus"></div>
    	</td>
    <!-- ItemAmount1 -->
    	<td align="center"><input onchange="updateTotal()" name="ItemAmount1" type="text" size="8"></td>
    	<td align="center">&nbsp;</td>
        </tr>
    Last edited by armaddon; 12-23-2010 at 10:40 AM. Reason: Added some more code, project overview

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <td colspan=3>
    <div id="txtHint1">&nbsp;</div> <!-- this div is where the new fields get created. They show up with the right values, but don't post in FF/Chrome -->
    </td>
    document.getElementById(divID).innerHTML=xmlhttp.responseText;
    PHP Code:
    echo "<tr>";
      echo 
    "<td><input type=text name=descWeight" $RowNumber " size=12 value='" $row['weight'] . "'></td>";
      echo 
    "<td><input type=text name=descSize" $RowNumber " size=12 value='" $row['size'] . "'></td>";
      echo 
    "<td><input type=text name=descType" $RowNumber " size=12 value='" $row['type'] . "'></td>";
      echo 
    "</tr>"
    Have you ever heard about markup validity? To expect something logical from a document, you need to have a valid markup first. This is applicable for both static and dynamic html.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    I think I managed to find the issue, I'll let you guys know what I figured out -

    I admit that I'm quite guilty of learning a lot as I go here, and this is my first project of this magnitude that I've been given to try. I based what I put together on the example given here: http://www.w3schools.com/php/php_ajax_database.asp But using my PHP file to create form text input fields rather than table cells filled with text. I'm definitely trying to keep everything valid, even if the element names/IDs look a bit crazy - the source generated by the PHP (according to the element inspector in Chrome) all checks out in the validator now (posted an example of the chunks of code in question below). The "divID" variable value in the AJAX JS is generated via parsing a string passed into showItems() by a PHP function in the page. I tried making it generic so that I didn't have to have 10 separate JS and PHP functions for each line. By the time this code is reached:

    Code:
    document.getElementById(divID).innerHTML=xmlhttp.responseText;
    the divID variable has the value "txtHint1", at least in this case, and continues executing correctly. As for the php lines that generate the <input> elements, the source output checks out, so I'm not sure if there's an issue with them - is there a better convention for how I should echo the elements back to the main page?

    All that I ended up doing to "fix" my issue was move the <form> and </form> outside the main <table> (everything in the table is supposed to be included in the form post anyway). I also had an unclosed <td> which I fixed (the code generated by getitems.php would start by echoing "<tr>", but since the div that code gets placed in is enclosed by <td> and </td> tags, the first <td> before the div was being left open - I just echoed a "</td>" at the start of getitems.php). I have a feeling I've still got something screwy (open tag, etc) within the table itself (before any generated php) but I'm working that out.

    Here is the code I talked about at the start (not my entire page source, just a representation of the page source including code generated via php functions) - It all passes the w3 validator:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>test</title>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function showItems(str)
    {
        var divArray = str.split("-");
        var divID = 'txtHint' + divArray[1];
        
        if (str=="") {
    	document.getElementById("txtHint").innerHTML="";
    	return;
    	} 
        if (window.XMLHttpRequest) {	// code for IE7+, Firefox, Chrome, Opera, Safari
    	xmlhttp=new XMLHttpRequest();
    	}
        else {				// code for IE6, IE5
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
        xmlhttp.onreadystatechange=function() {
    	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    	    document.getElementById(divID).innerHTML=xmlhttp.responseText;
    	}
        }
        xmlhttp.open("GET","assets/repack_form/getitems.php?q="+str,true);
        xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <form action="repack_form_csv.php" method="post" name="repack_form" id="repack_form">
    <table>
    <tr>
    <td>
    <!-- Here is where the code generated by PHP starts -->
    <select name="LotNumber1" onchange="showItems(this.value)"><option selected="selected"></option><option value="66666-1">66666</option><option value="66666R1-1">66666R1</option><option value="66666R2-1">66666R2</option><option value="66666R3-1">66666R3</option><option value="66666R4-1">66666R4</option><option value="66666R5-1">66666R5</option>
    <option value="66666R6-1">66666R6</option></select></td>
    
    <!-- Here is the generated source for the div that gets filled by getitems.php (txtHint1 in this case) -->
    <td colspan="3">
    	<div id="txtHint1">
            <input type="text" name="descWeight1" size="12" value="28# Bunch Special Carton">
            <input type="text" name="descSize1" size="12" value="150 Gram">
            <input type="text" name="descType1" size="12" value="Festival Asparagus">
            </div>
    </td>
    </table>
    </form>
    </body>
    </html>
    And my current version of getitems.php (any tips on how to better do the input field element echos would be appreciated - it definitely looks pretty hacked together):
    PHP Code:
    <?php
    $q
    =$_GET["q"];

    $qArray explode("-"$q);
    $RowNumber $qArray[1];
    $LotNumber $qArray[0];

    include(
    "../connect.php");

    $sql="SELECT * FROM inventorylist WHERE lotnumber = '".$LotNumber."'";

    $result mysql_query($sql);
    while(
    $row mysql_fetch_array($result))
      {
      echo 
    "</td><tr>";
      echo 
    "<td><input type=text name=descWeight" $RowNumber " size=12 value='" $row['weight'] . "'></td>";
      echo 
    "<td><input type=text name=descSize" $RowNumber " size=12 value='" $row['size'] . "'></td>";
      echo 
    "<td><input type=text name=descType" $RowNumber " size=12 value='" $row['type'] . "'></td>";
      echo 
    "</tr>";
      }
    ?>
    I'm going through the rest of my code to find any other validity issues. Maybe someday my code will look like it was put together by someone who knows what they're doing


  •  

    LinkBacks (?)


    Posting Permissions

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