asked on

How do I submit partial form content with JQuery?

Hi

I have a main form. I would like to be able to make ajax posts using the form elements within a selected div. Using the example code below, I'm trying to do an ajax post like:

$.ajax({
url: "/JQueryTest/InnerForm",
type: "POST",
data: $.toJSON($('#inner-form-1').serializeArray(),
success: function (data) {
$("#results").html(data);
}
})

Basically, I can't get the contents of the '#inner-form-1' div.

How do I do this?
Thanks
Andrew

<form action="/JQueryTest/Create" method="post">
    <div>
        <input type="text" name="name" value="name" />
        <div id="inner-form-1">
            <input type="text" name="inner.name" value="inner.name" />
            <input type="button" value="Inner submit 1" />
        </div>
        <div id="inner-form-2">
            <input type="text" name="inner.name" value="inner.name" />
            <input type="button" value="Inner submit 2" />
        </div>
        <input type="submit" value="Submit" /></div>
    </form>

Open in new window

leakim971

You miss a parenthese just before the comma : data: $.toJSON($('#inner-form-1').serializeArray()),

data: $.toJSON($('#inner-form-1').serializeArray(),
data: $.toJSON($('#inner-form-1').serializeArray()),

leakim971

use underscore instead tilde :

$(document).ready(function() {
		$.ajax({
			url: "ajaxcall.html",
			type: "POST",
			data: $("*", "#inner_form_1").serializeArray(),
			success: function (data) {
				$("#results").html(data);
			}
		})
	});

Open in new window

leakim971

test page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$.ajax({
			url: "ajaxcall.html",
			type: "POST",
			data: $("*", "#inner_form_1").serializeArray(),
			success: function (data) {
				$("#results").html(data);
			}
		})
	});
</script>
</head>
<body>
<form action="/JQueryTest/Create" method="post">
    <div>
        <input type="text" name="name" value="name" />
        <div id="inner_form_1">
            <input type="text" name="inner.name" value="inner.name" />
            <input type="button" value="Inner submit 1" />
        </div>
        <div id="inner_form_2">
            <input type="text" name="inner.name" value="inner.name" />
            <input type="button" value="Inner submit 2" />
	    </div>
    <input type="submit" value="Submit" /></div>
</form>
</body>
</html>

Open in new window

leakim971

With your URL :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$.ajax({
			url: "/JQueryTest/InnerForm",
			type: "POST",
			data: $("*", "#inner_form_1").serializeArray(),
			success: function (data) {
				$("#results").html(data);
			}
		})
	});
</script>
</head>
<body>
<form action="/JQueryTest/Create" method="post">
    <div>
        <input type="text" name="name" value="name" />
        <div id="inner_form_1">
            <input type="text" name="inner.name" value="inner.name" />
            <input type="button" value="Inner submit 1" />
        </div>
        <div id="inner_form_2">
            <input type="text" name="inner.name" value="inner.name" />
            <input type="button" value="Inner submit 2" />
	    </div>
    <input type="submit" value="Submit" /></div>
</form>
</body>
</html>

Open in new window

j055

ASKER

Hi

Thanks, I can get it to work now.. I think it was hyphens in the ids that was throwing me.

Sorry if this is slightly off topic but how can I know the parent div of a click event in a collection of divs?

e.g. the code below can submit if the button with parent id '#inner_form_1' is clicked. What if I have 10 divs and 10 buttons and want to submit only the content of the buttons parent div?

Hope that makes sense?
Thanks again
Andrew

        $(function () {
            $("#inner_submit_1").click(function () {
                $.ajax({
                    url: "/JQueryTest/InnerForm",
                    type: "POST",
                    data: $("*", "#inner_form_1").serializeArray(),
                    success: function (data) {
                        $("#results").html(data);
                    }
                });
            });
        });

Open in new window

leakim971

Try :

data: $(this).parent<b>s</b>("div").serializeArray(),

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

Thanks for the points!