Serialized Data Into A Form Input Fields Using Jquery

Posted By : Panaru Chaudhary | 26-May-2018

javascript

Let's see how to create input fields of serialize data into a form.

A method creating below most useful to create input fields of serializing data into the form.

this method contains two parameters first one form id and a second serialize data.

So having that first we create the object the form using id selector in jquery if the form exists then

we move forward else return from that.

Now, deserialize the serialized data having this iterate one by one using each function.

at the iteration time check the key is not null or empty if like this skips that iteration and move forward and apart

from that the check key already not exists if already there same as previous.

if all thing is being good then create the input filed for that key and value and append it to form finally

where the keys will be input id and name.

/**
* Creating as hidden fields into form of all serialized data .
* To be careful to avoid doubles, we have to check serialized data don't have mutiple key with same name
* @ param form object or formId
* @ param sdata is serialized data
* e.g.: deserialize( 'copydestinaytionId', $( 'formId' ).serialize( true ) );
*/

  deserialize = function( form, sdata) 
    {
	var form = $JQ("#"+ form );
	if ( ! sdata || sdata == null )
		  return;
	
	var dataInCurrentForm = $JQ(form).serialize();
	
	$JQ.each(deparam(sdata),function(key,data){
		if ( key == null || key.trim() == '' ) {
		   	   return;  }
		
	if (  dataInCurrentForm.indexOf( key )==-1 ) //cannot have two elements with same id
	{
		if ( data == null )
			data = '';
			
		$JQ('').attr({
            type: 'hidden',
            id: key,
            name: key,
            value: data
         }).appendTo(form);
	}
	});
}