Home/ Questions/Q 8867001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T16:55:17+00:00

I have an HTML form and using Serialization jQuery snippet to convert form data

  • 0

I have an HTML form and using Serialization jQuery snippet to convert form data to JSON representation as taught in this: Convert form data to JavaScript object with jQuery

I am only able to display the JSON output in an div tag. But I want to display the output in a new file or window upon form submit button click.

My jQuery Serialization snippet in header:

$.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;
};
$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject(), null, 4));
        return false;
    });
})

My HTML

<form id="student" method="post">
<label>Name: </label><input type="text" name="studentname" /><br />
<label>Age: </label><input type="text" name="age" /><br />
<label>City: </label><input type="text" name="city" />
<input type="submit" value="Submit" id="submitbutton" /><br />
</form>

<pre id="result"></pre>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Putting the result in a new window is easy – just change the submit section to somthing like this:

    $(function() {
    $('form').submit(function() {
        var txt = JSON.stringify($('form').serializeObject());
        $('#result').text(txt, null, 4);
        var recipe =  window.open('','ResultWindow','width=600,height=600');
        var html = '<html><head><title>Result Window</title></head><body><div>' + txt + '</div></body></html>';
    recipe.document.open();
    recipe.document.write(html);
    recipe.document.close();
        return false;
    });
})

    check out http://jsfiddle.net/u6z4X/

    • 0