如何使用jQuery / Javascript遍历表单字段

Question

I have a form for an ASP.NET WebForms app that looks like this:

<div id="signinForm">
    <div class="form-inline form-group-sm">
        <div class="input-group">
            <label for="MemberName" class="sr-only">Email Address :</label>
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="email" required id="MemberName" placeholder="Email Address" class="form-control">
        </div>
        <div class="input-group">
            <label for="Password" class="sr-only">Password :</label>
            <input type="password" required id="Password" placeholder="Password" class="form-control">
        </div>
        <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button>
    </div>
</div>

I want to build a JSON object from the form fields to pass to a web service, and right now I'm using this:

            var formData = {};
            $(signinForm).find(':input').each(function () {
                formData[this.name] = this.value;
            });

            var json = JSON.stringify({ NewMember: formData });

If I inspect the JSON object built, the form fields are not included in the object -- they're blank (""). What am I missing in the code I have to achieve what I want, which is to include the name/value pairs of the form fields as part of the created JSON object?

Answer 1

This works. Please try.

 var formData = {}; $('#signinForm').find('input').each(function() { formData[this.id] = this.value; }); var json = JSON.stringify({ NewMember: formData }); console.log(json); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="signinForm"> <div class="form-inline form-group-sm"> <div class="input-group"> <label for="MemberName" class="sr-only">Email Address :</label> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="email" required id="MemberName" placeholder="Email Address" class="form-control"> </div> <div class="input-group"> <label for="Password" class="sr-only">Password :</label> <input type="password" required id="Password" placeholder="Password" class="form-control"> </div> <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button> </div> </div> 

Answer 2

I used a small jQuery helper function to do exactly this (I found the answer on another StackOverflow answer but can't actually find the original question to quote it for you)

Helper Function

I placed the below code in a separate javascript helper file to make it globally available across my app

$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;
};

The actual form itself was declared as:

<form id="frmShippingAccount" class="form-inline shipping-account-form" action="#">
    <input type="text" name="Name" />
</form>

Then, inside the on-click action of my form's Save button...

var shippingAccountForm = JSON.stringify($("#frmShippingAccount").serializeObject());

The serializeObject function would get each element in my form, and push the Name attribute into a JSON object as the property name, and the corresponding value as the value.

Eg { "Company":"", "Address1":"", "Address2":"", "City":"", "Zip":"", "Country":"" }

I think the main issue is that your 'form' is declared as a div, secondly I'm not too sure if your JSON.stringify syntax is correct.

The method above made a perfectly formed JSON object which I chucked at a web service, and then parsed into a Newstonsoft JObject with

JObject jData = JObject.Parse(jsonString);

where jsonString was a string of the JSON object passed from my ajax call

Hope that helps!

Answer 3

Try to remove the double point

$(signinForm).find('input').each(function () {

Also the input items in your html example don't have name attributes although you are using them here

 formData[this.name] = this.value;

Answer 4

The input fields are missing name attribute

 var formData = {}; $(signinForm).find('input[name]').each(function () { formData[this.name] = this.value; }); var json = JSON.stringify({ NewMember: formData }); console.log(json) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="signinForm"> <div class="form-inline form-group-sm"> <div class="input-group"> <label for="MemberName" class="sr-only">Email Address :</label> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="email" name="email" required id="MemberName" placeholder="Email Address" class="form-control"> </div> <div class="input-group"> <label for="Password" class="sr-only">Password :</label> <input type="password" required id="Password" placeholder="Password" class="form-control"> </div> <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button> </div> </div>