JQuery .each loop prob

Question

Okay so here's the idea:

I want to make a jQuery script to handle multiple forms. Every form has a button. When you click this button the script should send all input fields' name and value in $_POST to the form's action URL. But I can't make it work.

It won't loop through my .each on line 3 in my jQuery file.

jQuery:

$("input[type='button']").click(function(){
    var query = {};
    $(this).parent('form').children('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });

    $.post($(this).parent('form').attr('action'), query, function(data) {
        $("#dialog").html(data);
        $("#ui-id-1").html('Activate account');
        $("#dialog").dialog("open");
    }, 'json');
});

HTML:

<form action="/action/activateacc.php">
<table>
    <tr>
        <td>E-mail:</td>
        <td><input type="text" id="mail" name="mail" /></td>
        <td><img class="tick" id="mailIMG" width="20px" /></td>
    </tr>
    <tr>
        <td>Activation code:</td>
        <td><input type="text" id="code" name="code" /></td>
        <td><img class="tick" id="codeIMG" width="20px" /></td>
    </tr>
    <tr>
        <td>Choose organization-name:</td>
        <td><input type="text" id="name" name="name" /></td>
        <td><img class="tick" id="nameIMG" width="20px" /></td>
    </tr>
    <tr>
        <td></td>
        <td style="text-align:center"><input type="button" style="cursor:pointer" value="Activate account" /></td>
    </tr>
 </table>
 </form>

wirey00 · Accepted Answer · 2013-01-22 15:23:09Z

2

Just use .serialize() with the form to get name/values of your inputs- also you should be using closest since parent only goes up one level

$("input[type='button']").click(function(){   
    var query = $(this).closest('form').serialize();
    $.post($(this).parent('form').attr('action'), query , function(data) {
        $("#dialog").html(data);
        $("#ui-id-1").html('Activate account');
        $("#dialog").dialog("open");
    }, 'json');
});

answered Jan 22, 2013 at 15:23

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

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

Comments

Manse · Accepted Answer · 2013-01-22 15:19:32Z

0

.parent() only goes up a single level of the DOM - try using .closest() and find() - so

$(this).closets('form').find('input[type="text"]').each(function(){

answered Jan 22, 2013 at 15:19

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Comments

Anton · Accepted Answer · 2013-01-22 15:19:42Z

0

Use .find to find children and .parents to find the form

$(this).parents('form').find('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });

answered Jan 22, 2013 at 15:19

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Comments

Mark Pieszak - Trilon.io · Accepted Answer · 2013-01-22 15:20:00Z

0

Easiest way for me to read it, would be to use .closest() (which goes up all the way instead of parent which is one level) and also find() (which runs a query through your current jQuery object):

$(this).closest('form').find('input[type="text"]').each(function(){ 
    query[$(this).attr('name')] = $(this).val();
});

jsFiddle Demo

answered Jan 22, 2013 at 15:20

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

Comments

Naryl · Accepted Answer · 2013-01-22 15:23:02Z

0

parent() only goes up 1 level in the DOM tree and children() only goes down 1 level in the DOM tree.

You should try either to use more of them if you are 100% sure the structure won't change (not recommended, it's not that clean), or use closest(), that will retrieve the closest given tag name in the DOM tree.

answered Jan 22, 2013 at 15:23

Naryl

1,8881 gold badge10 silver badges12 bronze badges

Comments

Mattias Buelens · Accepted Answer · 2013-01-22 15:23:20Z

0

You can spare yourself from the headaches of serializing your form elements into a query by simply using the built-in $.serialize.

The .serialize() method creates a text string in standard URL-encoded notation. It operates on a jQuery object representing a set of form elements.

In your case:

var query = $(this).closest('form').serialize();

answered Jan 22, 2013 at 15:23

Mattias Buelens

20.2k4 gold badges47 silver badges52 bronze badges

Collectives™ on Stack Overflow

JQuery .each loop prob

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related