is it possible to send a HTML form that includes a submit button via JavaScript?

Question

I need to send a file via HTTP Post (a form) to more than one destination via a single click.

The form has a submit button

<input type="submit" id="button1" name="submit" value="upload file">

The action attribute and various different hidden fields that are needed, are set via JavaScript.

After button1 is clicked the file is sent to the first destination without problems.

It is impossible for me, to send the form a second time with different values because of the submit button.

I cannot use an external button like

<button id="button1">upload file</button>

This would make the problem easy to solve (I already tried it) but it is impossible here. The reason is that the message needs these lines at the end that are generated by a real submit button inside the HTML form:

Content-Disposition: form-data; name="submit"

upload file

My question: How can I send a form via JavaScript that includes a submit button? How can I "click" a submit button via JavaScript?

This is my Java Script file:

// If frame 1 is loaded, the function prepareUpload() will be executed
$("#frame1").ready(function() {  
   prepareUpload();  
}); 


function prepareUpload(){

     // click-handler is registered to button1
     $('#button1').click(function(){
            // if clicked...
            // "Please Wait" window
            $.blockUI({ css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } }); 

            //register load handler on iframe which triggers uploadData() 
            $('#frame1').load(function(){
                // reload from iframe
                uploadData();
            });

            iTargetNumber = 0;
            // call function uploadData()
            uploadData();
            return true;
        });
}


function uploadData() {
    var dataSet = data[iTargetNumber];
    document.getElementById("statusbar").style.width = (iTargetNumber / data.length * 200) + "px";

    // if file is uploaded to all servers...
    if (iTargetNumber == data.length) {
       document.getElementById("statustext").innerHTML = "done";
       // Reload browser window
       document.location.reload();
       return;
    }

    // status message
    document.getElementById("statustext").innerHTML = "uploading to " + dataSet.sUrl;

    //set "action" attribute in HTML form    
    $('#form1').attr('action', dataSet.sUrl);

    //set hidden fields in HTML form   
    for (var key in dataSet){
        $('#' + key).attr('value', dataSet[key]);
    }

    // HERE IT HANGS after the first run is completed because of the submit button.

    //submit HTML form with correct values
    $('#form1').submit();

    // increment variable +1
    iTargetNumber++;
}

// initialize variable 
var iTargetNumber = 0;

It hangs after the first form is send (because of the submit button).

Using

var myForm = document.forms.form1
var emptyForm = document.createElement('form');
emptyForm.submit.apply(myForm);

insted of

$('#form1').submit();

does not help too. The resulting message has no these lines included:

Content-Disposition: form-data; name="submit"

upload file

An additional hidden field like

<input type="hidden" id="submit" name="submit" value="submit">

that would create a Content-Disposition: form-data; name="submit" does not help too because it would be before the content of the file and there would be no upload file in the end.

================

The problem is solved. The solution is that the JavaScript funktion is called by a button

<button id="button1">upload file</button>

Inside the form is also a hidden submit button

<input type="submit" style="display:none" id="button2" name="submit" value="upload file">

The JavaScript funktion calls this hidden submit button. Now, it is working without problems.

Answer 1

Getting a submit method from another form should do the trick.

var myForm = document.forms.id_of_form;
var emptyForm = document.createElement('form');
emptyForm.submit.apply(myForm);