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

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

how updaterow is attached to the form element? by any html attribute or by jquery? — Shiplu Mokaddim
– Shiplu Mokaddim, Commented Feb 27, 2012 at 17:03
var form = this;? by your code it seems that this refer nothing , no? — Ofir Baruch
– Ofir Baruch, Commented Feb 27, 2012 at 17:05

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 27, 2012 at 17:05

Shiplu Mokaddim

57.5k20 gold badges147 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shiplu Mokaddim Over a year ago

@JohannesOhlsson I have updated the answer completely. See it. I hope there will be no problem now.

Ofir Baruch · Accepted Answer · 2012-02-28 15:18:15Z

1

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)

edited Feb 28, 2012 at 15:18

answered Feb 27, 2012 at 17:11

Ofir Baruch

10.3k2 gold badges29 silver badges39 bronze badges

9 Comments

Johannes Ohlsson Over a year ago

This returns undefined as well.

Ofir Baruch Over a year ago

2 things: 1.When you'r viewing source , what's written in the line of the button (is there a number instead the variable onClick=updaterow('".$row['ID']."'); />) ? 2.Try adding alert(formid) at the updaterow function.

Johannes Ohlsson Over a year ago

1. Yes, there's a number: <input type='button' value='Spara' name='Submit39' onClick=updaterow('39'); /> 2. Yes, it returns an ID as numbers (in the case I just tried it was 39).

Ofir Baruch Over a year ago

wait a second , what was returned undefiend exatcly?

Johannes Ohlsson Over a year ago

the values that's represented by ID, SupStatus and OrderOther. Basically the things that I want to send on with the post :D so say: var ID = $("#"+formid).find('input[name=ID]').val(); returns undefined.

|

Collectives™ on Stack Overflow

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

2 Answers 2

Update

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related