0

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.

redk
  • 1
  • It's rather difficult to submit many forms at the same time. I would recommend putting them all into one form. – Ian Hazzard Nov 17 '14 at 16:48
  • @Godisgood Hi, this is why I make a new form through JavaScript, so just I can concentrate all the data(from the other forms) in one form and send it right after. – redk Nov 17 '14 at 16:52
  • What is `Picture`? You cannot populate `file` inputs programmatically for security reasons. – Bergi Nov 17 '14 at 16:54
  • @Bergi Hi, Somewhere in my page I have a form with a `file` type input, named `Picture`. In the page, the user populates that file and later, the JavaScript code just tries to copy its value in the new created form in order to send it. – redk Nov 17 '14 at 17:04
  • Yeah, you cannot really do that. You either need to *move* the file input (I think that should work without loosing the value), or you use Ajax and `FormData` like in [this example](http://stackoverflow.com/a/24072954/1048572) – Bergi Nov 17 '14 at 17:20
  • @Bergi Thank you, I saw the `FormData` and I think it will do the work, but I also need to open the page where I submit the data, exactly like using the submit button in a form. As far as I can know, `Ajax` sends the data in the background. But is there anything that will stimulate a normal submit button? Thank you. – redk Nov 17 '14 at 19:49

0 Answers0