use jquery to capture form data and post using ajax call

Question

Newbie here. I am building an app in rails and I'm trying to use jquery to capture the values of multiple select boxes within a form. I've tried to simplify this down as much as possible.

form html:

<form action="/units" data-remote="true" id="add_form" method="post">

<select class="select_box" id="box_1">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
</select>

<select class="select_box" id = "box_2"
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
</select>

*... additional select boxes...*

<input disable_with="Loading..." name="commit" type="submit" value="Submit" />

</form>

In my application.js I want to capture the selected value of each select box.

I've tried using serialize() but can't get it to work since the form is dynamically generated using javascript (i.e. is not part of the DOM when the page is initially loaded).

Since there a lot of form elements (~20) I want to avoid working through the form elements one-by-by to capture the data, e.g.

var val_1 = $("#box_1").find(":selected").val()
var val_2 = $("#box_2").find(":selected").val()
...

Is there some way I can capture all of the selected values of a given class of elements (i.e. .select_box) and store them in an array?

perhaps something along the lines of:

var form_data = $(".select_box").find(":selected").data()

or somehow loop through the elements of class .select_box ?

Just can't quite get my head around this one. Thanks!

easy · Accepted Answer · 2014-08-17 12:10:49Z

1

This is how you can get your relevant data:

var form_data = $(".select_box").find(":selected").map(function (index) {
            return ($(this))[0].value;
        });

and this is how you can convert it to JSON for sending to server:

JSON.stringify(form_data.get())

answered Aug 17, 2014 at 12:10

easy

3181 silver badge10 bronze badges

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

Comments

Kyle Emmanuel · Accepted Answer · 2014-08-17 10:53:08Z

1

The data() method is used to get the values of an element's data attributes.

You can use the serialize() method on the form element to retrieve the values of all elements within the form.

Or you can use the val() method to retrieve the value of each element.

i.e: $("#textfield_id").val(); // gets the value of a textfield

answered Aug 17, 2014 at 10:53

Kyle Emmanuel

2,2211 gold badge17 silver badges23 bronze badges

3 Comments

user3711600 Over a year ago

Sorry I meant to say that I can't use serialize... I have to cycle through the elements one by one and capture the values.. reason being is that the html form I am working with is dynamically generated using javascript, i.e. not part of the DOM when the page is loaded. hope that makes sense

user3711600 Over a year ago

I have a lot (~20) elements in the form so don't want to use val() to get the value for each one. Is there someway to get all of the values with a given class, i.e. .select_box ?

Tsahi Asher Over a year ago

@user3711600 why is that a problem? once you add elements to the DOM with javascript, they become part of the DOM, and you can serialize them as if they were loaded with the page.

Cyberpks · Accepted Answer · 2014-08-17 11:09:07Z

0

You should use serialize() to serialize (as Kyle said) form data, and then post the form. Try this:

$.post( "yourPageUrl", $( "#add_form" ).serialize() );

answered Aug 17, 2014 at 11:09

Cyberpks

1,4216 gold badges21 silver badges56 bronze badges

Collectives™ on Stack Overflow

use jquery to capture form data and post using ajax call

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related