Question

I’ve been trying to find a way for my jQuery AJAX-script to find out the values of my posted form, but I’m not sure what I’m doing wrong. I’ve probably missed out on some fundamental knowledge.

Anyhow. This is my jQuery so far:

function updaterow(sub){

            var form = sub.form;

            var ID = $(form).find('input[name="ID"]').val();

            var ArtName = $(form).find('input[name="ArtName"]').val();

            var ArtNumber = $(form).find('input[name="ArtNumber"]').val();

            var CustContact = $(form).find('input[name="CustContact"]').val();

            var SupStatus = $(form).find('select[name="SupStatus"]').val();

            var SupName = $(form).find('select[name="SupName"]').val();

            var OrderOther = $(form).find('textarea[name="OrderOther"]').val();



            var dataString = 'ID=' + ID + '&ArtName=' + ArtName + '&ArtNumber=' + ArtNumber + '&CustContact=' + CustContact + '&SupStatus=' + SupStatus + '&SupName=' + SupName + '&OrderOther=' + OrderOther;

            alert(sub.form);
            alert(dataString);

            return false;
        }

EDIT: This returns every variable as undefined in Firefox. It seems to be correct in IE 9.

This is my HTML(PHP), this is also updated to contain a few more input fields:

while ($row = mysql_fetch_array($query)) {
        echo "<tr><form id='".$row['ID']."' class='fcform'>
                    <td class='idcell'><input type='text' class='fcid' name='ID' readonly='readonly' value='".$row['ID']."' /></td>
                    <td><input type='text' name='ArtName' value=' ".$row['ArtName']."' /></td>
                    <td><input type='text' name='ArtNumber' value='".$row['ArtNumber']."' /></td>
                    <td><a href='/singlepost.php?ID=".$row['ID']."' title='Skriv ut ".$row['CustName']."'>".$row['CustName']."</a></td>
                    <td><input type='text' name='CustContact' value='".$row['CustContact']."' /></td>
                    <td>
                        <select name='SupStatus' class='fcsupstatus'>
                            <option value='".$row['SupStatus']."'>".$row['SupRealStatus']."</option>
                            <option value='01'>Mottagen</option>
                            <option value='02'>Lagd i korg</option>
                            <option value='03'>Beställd</option>
                            <option value='04'>Ankommen</option>
                            <option value='05'>Slutförd</option>
                            <option value='06'>Nekad</option>
                        </select>
                    <td>
                        <select>
                            <option value='".$row['SupName']."'>".$row['SupRealName']."</option>
                            <option value='01'>2020</option>
                            <option value='02'>Order</option>
                            <option value='03'>Brightpoint</option>
                            <option>---------</option>
                            <option value='04'>12 Volt</option>
                            <option value='05'>Armour</option>
                            <option value='06'>Brodit</option>
                            <option value='07'>Captech</option>
                            <option value='08'>DLS</option>
                            <option value='09'>Garmin</option>
                            <option value='10'>GL Batterier</option>
                            <option value='11'>Ingram</option>
                            <option value='12'>Isicom</option>
                            <option value='13'>KGK</option>
                            <option value='14'>MTU</option>
                            <option value='15'>Peltor</option>
                            <option value='16'>Pioneer</option>
                            <option value='17'>TMT</option>
                            <option value='18'>Övriga</option>
                        </select>
                    </td>
                    <td>".$row['Date']."</td>
                    <td>
                        <textarea name='OrderOther' cols='40' rows='3' class='fcorderother'>".$row['OrderOther']."</textarea>
                        <input class='savebutton' type='button' value=' ' name='Submit".$row['ID']."' onClick='updaterow(this);' />
                    </td>
                    </form></tr>";}

I have posted this as another post but then I was asking why my ajax wasn’t posted. That’s fixed now, but now the problem with the variables has arisen. Just can’t see why…

I can’t use ID since the forms are generated dynamically. But it doesn’t seem that the jQuery knows which form I want to post.

I’ve tried using traversal with classes as well as by name, but to no avail.

EDIT:
Link to the files:

http://bilradiocentrum.se/txt/listheader.txt

http://bilradiocentrum.se/txt/orderlist.txt

http://bilradiocentrum.se/txt/updaterowajax.txt

Answer 1

You need to add a parameter to updateRow function (line #1). And get the form object from the parameter (line #2).

See how is done bellow.

function updaterow(sub){ // (line #1)
    var form= sub.form;  // (line #2)
    var ID = $(form.ID]).val();
    var SupStatus = $(form.SupStatus).val();
 ...

Here form will be your form as you have used onClick='updaterow(this);' in an input element sub will be the input element. And sub.form will be the form containing the input element. Hence form get the actual form.

Update

There is problem in jquery find statement. use $(form.NAME).val() where NAME is the element name such as ArtName, ID, OrderOther etc. ( I have updated the code above too).

Another option is to use a unique key as Id for each element. See bellow the example,

<input id='ArtName-".$row['ID']"' type='text' name='ArtName' value=' ".$row['ArtName']."' />

Now can fetch this row in updaterow() function easily by $("#ArtName-"+$(form).prop('id')) or by $("ArtName-"+ID).

The later will work only if you change the update function to updaterow(sub, ID) and change the submit input element to

<input class='savebutton' type='button' value=' ' name='Submit".$row['ID']."' onClick='updaterow(this, \"".$row['ID']."\");' />