CODEWITHSUNDEEP
phpjqueryajax
Johannes Ohlsson
Johannes Ohlsson

Reputation: 55

Finding a specific value of input when having multiple forms on a page

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

Upvotes: 1

Views: 212

Answers (2)

Shiplu Mokaddim
Shiplu Mokaddim

Reputation: 57650

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']."\");' />

Upvotes: 1

Ofir Baruch
Ofir Baruch

Reputation: 10356

A simple change will fix your problem:

Change:

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

To:

               <input type='button' value='Spara' name='Submit".$row['ID']."' onClick=updaterow('".$row['ID']."'); />

And in your script:

function updaterow(formid){

            var form = document.getElementById(formid); //Why you need this line??

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

            var SupStatus = $("#"+formid).find('input[name="SupStatus"]').val();
            var OrderOther = $("#"+formid).find('input[name="OrderOther"]').val();

EDIT: I added quotes to the values of the name attribute. (update your js code and try now)

Upvotes: 1

Related Questions