Develop Reference

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?

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

Have you tried to .serialize the form contents?

Saving data form without button

What is a good way of saving data form without submit button?
I have one idea. Below exemplary source code.
var delay = 1000,
timeId,
ajax,
//fw is some framework
form = fw.get('myform');
form.getFields().on('change', changeEventHandler);
function changeEventHandler() {
clearTimeout(timeId);
timeId = setTimeout(this.ajaxRequest, delay);
}
function ajaxRequest() {
//What do with old ajax request? Abort it?
ajax = fw.ajax({
url: 'ololo',
params: {
data: form.getValues()
}
});
}
What do with old ajax request? Abort it?
Have somebody other ideas?

I had a similar problem when designed an interactive form without save button.
First of all, its not a good idea to save the data on every change. I used on blur event, so when the input loses focus, I check if the value was changed (i.e. not just focus-blur on the input), if it was changed, I disabled the input and send an ajax request. When the request returned, I enabled the input once again (possibly displaying an error if the ajax failed and etc, depends on your needs).
Its the easiest way to do interactive form. This avoids the headache of multiple request trying to modify the same value on server side and the headache of monitoring all ajax requests.

Change value of dynamic inputs

I have a modal window that has a lot of new dynamic elements (inputs, buttons, etc.). I want to see if a certain element(or in this case, and input) gets created and if it does, then change its value.
The scenario is that if I make an ajax request for populating data, and as the user browses the modal window I can reuse some of that data. When the input field I'm looking for gets created, I can just put the value of the ajax call I made previously.
I have tried: $("#myinput_id").val(sellerData['id']);
obviously the above wont work because the element doesn't exists, yet. I'm also trying to avoid new ajax calls for the same data :/
Any thoughts?
$( "#add").bind('click', function() {
$.ajax({
url: '/seller/get',
type: 'POST',
success: function(response) {
sellerData = jQuery.parseJSON(response);
//other code here
//this doesn't work
$("#myinput_id").val(sellerData['id']);
}
});
});
Then the above gets triggers. The input field doesn't exist yet. How can I make it "look for it" if in the future the input field gets created?

Try using .length http://api.jquery.com/length/
if($("#myinput_id").length) //There is at least one element selected
//Do something

a bit confusing question you are saying u want to populate the data and your are using POST

jquery-autocomplete how to trigger the “autocomplete” event with send the value (the request value)

I want to trigger the “autocomplete” event from the sorce, and to send the value to set in the textBox.
I want it will be like a user typing the value and trigger the autocomplete,
I tried to look alot but all the examples I found didn't send the value,
and I need to send the value!!
This example dosn't help me, Because I need the request (like someone type it)
$("#CompanyList").autocomplete({
source : yourSource,
change : yourChangeHandler
});
$("#CompanyList").data("autocomplete")._trigger("change");
I hope you Understand me.

If I understand (I'm not sure).
You have to go costum:
Use:
$('.input_text_forms').keyup(function(event){ });
That fires:
var data = $('#lang_pass_threw').val();
$.post('auto_fill.php', { data: data }, function(response) { });
When the request is returned:
var arr = string.split("");
Now call to a Timeout function and set the result as the value...
Here is an example: jsfiddle
This example is a bit buggy, there is a cursor position to set.. and a backspace event to undo the autocomplete etc, let me know if its what you need and i'll tune this script a bit.

Problem with removing child

I have two drop down forms. When the first is "changed" the second is populated with some data via ajax.
It's work but the value of the second drop down is not cleared on every request (I'm using $('#second_drop_down').children().remove();)
Here is sample code
$('#first_drop_down').live('change', function() {
var x = "some ajax data recived via ajax";
$('#second_drop_down').children().remove();
$('#second_drop_down').append(f);
});

Here you have a code that works, but it is practically like yours (you have a mistake in your example, 2 differente variables "x" and "f"):
http://www.jsfiddle.net/dactivo/8jfHG/
var timeChanged=1;
$("#first_drop_down").change(function()
{
$("#second_drop_down").children().remove();
$("#second_drop_down").append("<option value=\"volvo\">Volvo"+
timeChanged+
"</option><option value=\"saab\">Saab"+ timeChanged+
"</option><option value=\"mercedes\">Mercedes"+ timeChanged+"</option>");
timeChanged++;
});
Probably the code you received by ajax is malformed (I suppose).

Do you make a synchronous Ajax call? If not, you must put the code that changes the second drop down in the callback function, otherwise you will work on data that was not yet received. Assuming you use jQuery:
$.get( 'http://www.example.com', {first:$('#first_drop_down').val()},
function(data) {
$('#second_drop_down').children().remove();
$('#second_drop_down').append(data);
});