javascript - html form not holding it's elements' attributes when being passed from web page to child iframe? -

i have form gets completed on webpage user, when user submits form, bring bootstrap modal dialog, dialog has iframe in loads form parent window calling function in so:

//parent window var formtosubmit; function getform(){    return formtosubmit; }  $("#submitbutton").click(function(){    //alterations elements in $("mainform")     formtosubmit = $("mainform");    $("#modaldialog").modal();    //... });  //modal iframe var parentform = parent.window.getform(); $("#maindiv").append(parentform[0].outerhtml); $("form").submit(function(){    parent.window.closemodalwindow(); //not sure whether close after form submitted yet  });  $("form").submit(); 

my problem i'm submitting these forms microsoft sql server reporting services , takes every input element parameter. have no control on this.

so when user clicks submit in main form, disable elements must not set parameters, thing is; form parent window , append modal iframe, seems of changes lost, there way preserve this?

your problem has call outerhtml on form. first of all, implementations of outerhtml have been different across browsers, avoid using if possible. second, outerhtml not contain live dom element, merely dump of string.

therefore, suggest deep cloning form before passing iframe.

with jquery (see docs):

$("#maindiv").append(parentform.clone(true));

or plain javascript (see docs):

document.getelementbyid('maindiv').appendchild(parentform[0].clonenode(true));

i ran tests verify this, , long you're cloning form, results you're expecting.

---

as side note, why duplicating form in modal? re-creating "please review" type thing user? seems strange process. ask, because perhaps there better ways you're asking. anyway, answer i've given should help.