Set form data without creating DOM inputs

Question

I have an empty form tag, and a function which generates 4000 hidden inputs which contains the data to be send by the form.

Generating the 4000 hidden inputs is pretty fast (takes about 4ms). However, the browser freezes for about 1 second when i am appending the hidden inputs in the form tag.

I have also wrapped the hidden inputs in a <div/> tag, but doesn't helps too much.

Is there any way to set the form data programmatically, without using the input DOM elements?

Something like:

$form[0].setData([{ id: 1, value: "A" }, { id: 2, value: "B" }]);
$form.submit();

Here is the function which generates the hidden inputs

function saveUIPositions() {
    var $form = $("#saveUIPositionsForm");
    $form.empty();

    console.time("ui");

    var array = [];
    array.push("<div>");

    var items = dataTable.dataView.getItems();
    for (var i = 0, len = items.length; i < len; i++) {
        var item = items[i];
        var index = dataTable.dataView.getRowById(item.Id) + 1;

        array.push("<input type='hidden' name='[");
        array.push(i);
        array.push("].Item_Id' value='");
        array.push(item.Id);
        array.push("' />");

        array.push("<input type='hidden' name='[");
        array.push(i);
        array.push("].Index' value='");
        array.push(index);
        array.push("' />");
    }

    array.push("</div>");

    console.timeEnd("ui");

    // here it gets very costly (and not because of array.join())
    $form.append(array.join(""));

    $form.submit();
};

rd3n · Accepted Answer · 2014-04-25 09:07:57Z

1

Maybe you can send this data using ajax ? If so you will not have to generate and append your 4K hidden inputs to the DOM.

If ajax is not an option, can you give us the code generating and appending your inputs ? Maybe it can be optmized.

I wrote a small jsFiddle (open your debug console to see time informations) to illustrate the difference between a generate then append all solution:

for(var i=0; i<4000; i++)
    inputs += '<input type="hidden" value="' + i + '"/>'
$('form').append(inputs);

and generate and append each:

for(var i=0; i<4000; i++)
    $form.append('<input type="hidden" value="' + i + '"/>');

answered Apr 25, 2014 at 9:07

rd3n

4,7001 gold badge37 silver badges46 bronze badges

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

3 Comments

Krzysztof Jabłoński Over a year ago

Yup. Dom modifications are costly. One needs to coalesce changes and apply all at once.

Catalin Over a year ago

I've added an example

rd3n Over a year ago

The real problem is that you are appending 8K inputs to the DOM, which will always take time. You should definitely consider using another approach IMO. I still do some tests (jsfiddle.net/wPfuq/1). Also note that the $form.empty() is causing freeze when inputs are in the form (2nd click).

tbailey000 · Accepted Answer · 2014-04-25 09:23:28Z

You don't even really need a form element when working in just Javascript, data can be sent to your server with an ajax request.

$.ajax({
    url: "myScript.php", //The script on your server that deals with the data
    data: {
        dataA: "a",
        dataB: "b",
        dataC: "c"   //Your form input name and value key pairs
    },
    success: function(data){
        alert("Form Submitted, Server Responded:"+data); //The server response
    },
    error: function(data){
        alert("Error contacting server:"+data); //Error handler
    }
});

You don't even need to reload the page when the form is submitted. Unless you want to, then just add:

location.href="http://link.com";

to the success callback.

dops · Accepted Answer · 2014-04-25 09:27:13Z

You don't need to add the inputs to the DOM, you could create an array of the data an post the form via ajax e.g.

inputNames = 'YourInputNameHere'; // Could be an array of names
generatedData = arrrayOfData //presumably generated elsewhere

for (i=0;i<400;i++) {
    formData[inputName][i] = generatedData[i]

   // if you are using an array of names you want to change the above line to
   // formData[inputName[i]] = generatedData[i]
}

$('body').on('submit', '#myForm', function(e) {
   e.preventDefault();

   postUrl = 'url/to/send/data';

   // get any other use inputs that might have been taken from user ignore
   // this line if there are no inputs
   formData[] = $(this).serialize();

   $.ajax(
            {
                url: postUrl,
                type: 'POST',
                data: formData,
                dataType: 'html',
                success: function( data )
                {
                    // redirect, post message whatever
                }
            }
        )
});

Hope this helps and makes sense.

Collectives™ on Stack Overflow

Set form data without creating DOM inputs

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related