问题描述:

I would like to ask a question about creating an HTML form through JavaScript, populating data in it(including file types) and submitting it right after.

I somehow managed to have three different forms in a page and I need to concurrently submit them all together and open the new page where I submit my data. Because we cannot have nested forms in a page, I found out that I can create a new form through JavaScript, copy the data in the new created form and then send them. So far so good(if I only had text data), but I also need to copy(and send) a file(image) type and there is where something seems to not work.

Below I'm providing the JavaScript code only, mentioning the important point where I believe the problem is:

function viewpreview(){

Elements = new Array();

counter =0;

$('input[name="ElementValues[]"]').each(function() {

Elements[counter]=$(this).val();

counter+=1;

});

Title = $('#Title').val();

Picture = $('#Picture').val();

EditorText = $('#editor1').val();

var theForm, newInput1, newInput2, newInput3, newInput4;

theForm = document.createElement('form');

theForm.action = 'preview.php';

theForm.method = 'post';

theForm.enctype ='multipart/form-data';

theForm.target = '_blank';

newInput1 = document.createElement('input');

newInput1.type = 'hidden';

newInput1.name = 'Elements[]';

newInput1.value = Elements;

newInput2 = document.createElement('input');

newInput2.type = 'hidden';

newInput2.name = 'Title';

newInput2.value = Title;

newInput3 = document.createElement('input');

newInput3.type = 'file'; // <-- Important point here. If I make it a 'hidden' input type, it sends only the text-name of the file. If I make it a 'file' type, it does not work at all.

newInput3.name = 'Picture';

newInput3.value = Picture;

newInput4 = document.createElement('input');

newInput4.type = 'hidden';

newInput4.name = 'EditorText';

newInput4.value = EditorText;

theForm.appendChild(newInput1);

theForm.appendChild(newInput2);

theForm.appendChild(newInput3);

theForm.appendChild(newInput4);

document.getElementById('hidden_form_container').appendChild(theForm);

theForm.submit();

}

Is there someone who have dealt with that issue before or is able to find a solution to this?

If necessary, I can also accept a new workaround to this, as far as we can keep the 3 forms in the page.

Thank you very much in advance.

相关阅读:
Top