CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
tylerl
tylerl

Reputation: 1180

jQuery .clone() Entire HTML Form AND All Its Values

I'm using jQuery and an $.ajax() call to post some complex HTML via POST to my database. I'm able to get the form's structure via .html(), but the user's selections are lost in the process. I thought I could use .clone() instead but I got this error:

Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

// Cloning my form
var myFormHTML = $("#myForm").clone();

console.log(myFormHTML);

var inputData = {
  advancedSearchHTML: myFormHTML,
  otherParam: otherVar
};

console.log(inputData);

// JS ERROR is down here in the $.ajax() call:
$.ajax({
    type: "POST",
    url: 'serverSideScript.php',
    dataType: 'html',
    data: inputData,
    success: function (response) {
        console.log(response);
    }
});

These forms are very complex and they include over 100 <input type="hidden">'s which change according to the user's selections. I can't change the way this works. So my problem is that I have complex forms with HTML generated by the user and I need to copy both the HTML AND all its values so that it can be inserted into my database and eventually reloaded back into the DOM, perhaps months later. Any ideas?

EDIT: I've tried everything I can think of but I can't seem to get user input values out of the HTML, which is frustrating because I'm used to just hitting "Copy HTML" in Chrome's Inspector, so to me it seems like it should be easy to get that same HTML out of the <form> as a string. Some of the things I've tried:

$myFormHTML.html()
$myFormHTML.innerHTML
$myFormHTML.outerHTML
$myFormHTML.get(0).innerHTML
$myFormHTML.get(0).outerHTML
JSON.stringify($myFormHTML.html())

I've got it down to the point where I've got a complete jQuery Object which, when appended to the DOM, has all the user's input included (:selected states, :checked states, input values, etc.). I need to take this jQuery Object and spit out all its HTML content into a string that can be transferred to the server. Does anyone have any idea what to do? Maybe there's a way to do the same loop that gets done during an $.append() so I could build up a string from scratch? Any other ideas?

Upvotes: 0

Views: 1705

Answers (2)

sctskw
sctskw

Reputation: 1598

http://api.jquery.com/serialize/

This does exactly what you want, except since your form is built by user-input you cannot verify if it's a valid form or not. If the form markup is incorrect, you cannot serialize the data.

Here is the example:

http://jsfiddle.net/jyc30nxz/1/

$('#myForm').serialize();

An important aspect of this is if your form inputs do not have the "name" attribute, then you cannot return it's value during serialization which is why you end up with an empty string.

Edit:

This also works:

console.log($(this).clone().html())

My guess is your form markup is invalid

Upvotes: 1

Traveling_Monk
Traveling_Monk

Reputation: 788

Have you tried to .serialize the form contents?

Upvotes: 0

Related Questions