jQuery/Javascript code to retrieve values of all form elements for AJAX form submission script

Question

I'm building a javascript to submit an html form automatically using jQuery. I'm wondering if it's possible to create a javascript method that will return a map of all form elements and values if given an identifier to find the form with. I'd rather use such a method than manually specifying jQuery selectors for each form element.

function form_submit(){
    jQuery.ajax({  
        type: 'post',  
        url: '/signup/',  
        data: map_form_elements_values('my_form'),  
        success: function(data, textStatus, jqXHR){
                        //foo
                 }
    });  
    return false; 
}

<form id="my_form" action="">
<input class="" id="name" type="text" name="last-name" />
<select class="" id="fruit" type="select" name="fruit-name" />
<option>bananas</option>
</select>
</form>

the goal would be to have map_form_elements_values('my_form') return a map that can be used by the ajax function. Does anyone know how to do this?

Take a look at .serializeArray() - api.jquery.com/serializeArray — Sam Dufel
– Sam Dufel, Commented Jun 25, 2011 at 18:41
I hope I correctly understood your problem in my answer, but please let me know if not. — BonyT
– BonyT, Commented Jun 25, 2011 at 18:50

BonyT · Accepted Answer · 2011-06-25 18:46:28Z

1

Take a look at the jQuery forms plugin: http://jquery.malsup.com/form/

If you don't need the extra functionality then a simple statement along the lines of:

 myData = $("#formToSubmit").serialize();

        $.ajax({
        type: "POST",
        url: "process_form.php",
        data: myData,
        dataType: "json",
        success: function(data) { ....etc

answered Jun 25, 2011 at 18:46

BonyT

11k5 gold badges34 silver badges53 bronze badges

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

1 Comment

Casey Flynn Over a year ago

thanks! That plugin looks very useful I think I'm going to try using it!

Community · Accepted Answer · 2017-05-23 12:08:41Z

1

I answered on that recently:

JQuery. How to load inputs values to an array?

jQuery.fn.inputs2obj=function (){
        var out={};
        var arr=this.filter(':input').each(function () {
    e=$(this);
        out[e.attr('name')]=e.val();
        }).get();
        return out;
    }

Usage example:

inputs=$('form').find(:input).inputs2obj();

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jun 25, 2011 at 18:42

zb'

8,0793 gold badges44 silver badges68 bronze badges

2 Comments

BonyT Over a year ago

how is this relevant to this question?

zb' Over a year ago

jQuery.ajax({ type: 'post', url: '/signup/', data: $('#myform').find(:input).inputs2obj(); success: function(data, textStatus, jqXHR){ //foo } }); return false; }

mirk · Accepted Answer · 2011-06-25 18:49:42Z

0

You can use serialize() or serializeArray()

var params = $("#my_form").serialize();
        $.post( "/signup/",params,
                 function(data,textStatus, jqXHR){foo ... } )

See for example

http://api.jquery.com/serialize/

answered Jun 25, 2011 at 18:49

mirk

4324 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery/Javascript code to retrieve values of all form elements for AJAX form submission script

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related