Required data entry element cloned from 1st form to another using PHP and Javascript
Ok, I have a function in the template that is sent via method = "POST". But I can't imagine it ok, since that's all I want to present, and there is already a tag defined above the code, not below the code, the form closure with that should stay there. Since there is no way in forms to have forms, I use Javascript to create a form and submit it on the fly. But I need to get a copy of the file input element defined in the document.forms.creator form. I am using PHP and Javascript to accomplish what I have now, but cloneNode (true) does not receive the $ _FILES ['image'] array and sets it to the $ _FILES ['sigImg'] array :(
echo '<tr><td colspan="2"><a href="#" name="sig' . $user_info['id'] . '"></a><center><b>Signature Image Rotator</b></center><br /><center>
Add Image: <input type="file" size="48" id="imagefile" name="image" /> <input type="button" value="Upload" onclick="createFormAndSubmit()"></center>';
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
//helper function to create the form
function getNewSubmitForm(){
var submitForm = document.createElement("FORM");
document.body.appendChild(submitForm);
submitForm.enctype = "multipart/form-data";
submitForm.method = "POST";
return submitForm;
}
//function that creates the form, clones <input type="file" name="image">,
//and then submits it
function createFormAndSubmit(){
var submitForm = getNewSubmitForm();
var element = document.getElementById("imagefile");
element = element.cloneNode(true);
element.id = \'sigImgId\'; //<- ID Assignment
element.name = \'sigImg\'; //<- NAME Assignment
submitForm.appendChild(element);
submitForm.action= "', $scripturl, '?action=sigimages;sa=upload";
submitForm.submit();
}
// ]]></script></td></tr>';
How can I get a real clone of the file input defined in php echo and put it in the form defined in the createFormAndSubmit () function?
Please, help...
Okay thanks Chris, be sure to keep this in mind. Just figured out a way to fix it myself and I use this method which just changes the form action and submits, only the problem is representing everything in the form, not just the imagefile object. But I think this is not a problem, is it? Anyways works with this code:
// change the action and submit the form...
function submitSigImg(){
var mainForm = document.forms.creator;
mainForm.action= "', $scripturl, '?action=sigimages;sa=upload";
mainForm.submit();
}
This just changes the action of the form it is already in, and since this function is only used when the upload button is clicked and redirected back to the page, this is not a problem when the form is submitted normally.
Thanks again:)
Mark Allen's comment on another thread suggests that instead of adding your new cloned input (which IE does not give the selected file property) to another form, you replace the old input with a new input (which looks correct), and then you put the old input into your upload form.
This way your code will become:
// clone up a new one
var oldFile = document.getElementById("imagefile");
var newFile = oldFile.cloneNode(true);
// set props
newFile.id = "sigImgId"; //<- ID Assignment
newFile.name = "sigImg"; //<- NAME Assignment
// replace old with new
oldFile.parentNode.replaceChild(newFile, oldFile);
// attach old to upload form
submitForm.appendChild(oldFile);
a source to share