Daniel Anderson Daniel Anderson - 5 months ago 22
jQuery Question

"JSON.stringifiy" returns URLEncoded data instead of JSON

I am writing an ASP.NET Web Forms app, and in one of the pages I have a modal form for registration that uses JQuery

.dialog()
to display it. Because of the limitation in ASP.NET that a page can contain only one
form
element (the master page contains one, of course), the modal form I've created uses
DIV
tags. So, the outer wrapper DIV is named "register". Here's the DIV code:

<div id="register" title="New Member Registration">
<div class="modalCaption">
<span class="red">Fields in red</span>
<span>are required. Your information is not shared with anyone and is fully encrypted in our
database for your peace of mind.</span>
</div>
<br />
<div class="row">
<div class="row_label_red">Desired User Name :</div>
<div class="row_field"><input type="text" name="userName" size="32" MaxLength="32" /></div>
</div>
<div class="row">
<div class="row_label_red">Your Email :</div>
<div class="row_field"><input type="text" name="email" size="32" MaxLength="64" /></div>
</div>
<div class="row">
<div class="row_label_red">Password (6 char. min) :</div>
<div class="row_field"><input type="password" name="pwd" size="32" MaxLength="32" /></div>
</div>
<div class="row">
<div class="row_label_red">Confirm Password :</div>
<div class="row_field"><input type="password" name="conPwd" size="32" MaxLength="32" /></div>
</div>
<div class="row">
<div class="row_label">Your Last Name :</div>
<div class="row_field"><input type="text" name="lastName" size="32" MaxLength="64" /></div>
</div>
<div class="row">
<div class="row_label">Your First Name :</div>
<div class="row_field"><input type="text" name="firstName" size="32" MaxLength="64" /></div>
</div>
<div class="row">
<div class="row_label">ZIP/Postal Code :</div>
<div class="row_field"><input type="text" name="zip" size="10" MaxLength="10" /></div>
</div>
<div class="row">
<div class="row_label">How Did You Hear About Us?</div>
<div class="row_field">
<select name="about">
<option Value="NONE" Selected>-- Please Choose One --</option>
<option value="News">News Article</option>
<option value="Google">Google Search</option>
<option value="Bing">Bing Search</option>
<option value="OtherSearch">Other Search Engine</option>
<option value="Friend">Friend's Referral</option>
<option value="Miscellaneous">Other</option>
</select>
</div>
</div>
<div class="row">
<div id="spStatus"></div>
</div>
</div>


To capture the form field data (since I'm having to use
DIV
instead of
form
), I am trying to use
JSON.stringify()
to format the data into JSON name/value pairs. To test this, I am using the following:

var formData = JSON.stringify($.param($('#register').find(':input')));

var data = '{ "register": "' + formData + '"}"';
alert(data);


When I test this, I get this as the output of the
stringify()
call:

Output of web page

As you can see, the
stringify()
call is giving me URL-encoded data, which isn't what I need or really expected. Can anyone offer some help here on what I'm missing?

Answer

Don't use $.param, it serializes all the inputs into a URL-encoded string. Loop over the input elements and put them into an object, then convert that to JSON.

var formData = {};
$('#register').find(':input').each(function() {
    formdata[this.name] = this.value;
});
var json = JSON.stringify(formData);