44

I'm trying to create a form and submit it immediately with javascript and I cannot figure out what I'm doing wrong. here is my code:

function autoLogIn(un, pw) {
var form = document.createElement("form");
document.body.appendChild(form);
form.method = "POST";
form.action = "login.php";
var element1 = document.createElement("<INPUT NAME='un' TYPE='hidden' VALUE='"+un+"'>");  
 form.appendChild(element1);
var element2 = document.createElement("<INPUT NAME='pw' TYPE='hidden' VALUE='"+pw+"'>"); 
form.appendChild(element2);
form.submit();
}
5
  • 3
    you created form element properly. but what happened to input? it should be done the same way too! also, just noticed, you were appending form, and then changing it's attributes, and also, never appending element1,2 to form! overall, it's pretty much messed up! why not use xhr instead?
    – Prasanth
    Commented Oct 21, 2012 at 20:27
  • 1
    You could use form.innerHTML += "<INPUT NAME='un' TYPE='hidden' VALUE='"+un+"'>"; But as @goldenparrot points out, you're using document.createElement incorrectly. Commented Oct 21, 2012 at 20:28
  • @goldenparrot The input fields are appended to the form. Just the code is on the same line as the creation code of the fields.
    – Kokozaurus
    Commented Oct 21, 2012 at 20:30
  • 1
    lol.. I'm retarded. I don't know why I didn't try that.. Thanks for ur help. whats xhr? Commented Oct 21, 2012 at 20:31
  • 1
    Does anyone know if a form can be submitted without appending it to the DOM? Commented Oct 21, 2012 at 20:32

4 Answers 4

114

The problem is that createElement does not accept HTML. It accepts a tagname and returns a DOM element. You can then set the value attribute on this element to what you require.

function autoLogIn(un, pw) {
    var form = document.createElement("form");
    var element1 = document.createElement("input"); 
    var element2 = document.createElement("input");  

    form.method = "POST";
    form.action = "login.php";   

    element1.value=un;
    element1.name="un";
    form.appendChild(element1);  

    element2.value=pw;
    element2.name="pw";
    form.appendChild(element2);

    document.body.appendChild(form);

    form.submit();
}
3
  • 3
    Better to append the form to the document after appending the inputs to it so the DOM is only updated once. Also, to be successful, form controls must have a name or they will not be sent.
    – RobG
    Commented Oct 21, 2012 at 20:37
  • 6
    Thank you for the LOWERCASE TAG NAMES. Using uppercase for tags and/or attributes really annoys me, for some reason. Commented Oct 21, 2012 at 21:47
  • how to pass contentType in this form submission
    – Nithin
    Commented Aug 2, 2019 at 9:48
7

Modified code: jsfiddle.

function autoLogIn(un, pw) {
   var form = document.createElement("form");
   document.body.appendChild(form);
   form.method = "POST";
   form.action = "login.php";
   var element1 = document.createElement("INPUT");         
    element1.name="un"
    element1.value = un;
    element1.type = 'hidden'
    form.appendChild(element1);
    var element2 = document.createElement("INPUT");         
    element2.name="pw"
    element2.value = pw;
    element2.type = 'hidden'
    form.appendChild(element2);
    form.submit();
}
4

You also can do the Saurabh Chauhan response but without add the dinamic element to body This solution is all dinamic solution.

    var myform = document.createElement("form");
    myform.action = "myForm.aspx";
    myform.method = "post";


    product = document.createElement("input");
    product.value = "value";
    product.name = "name";

    myform.appendChild(product);
    myform.submit();
1
  • 1
    Note, this code won't work in the latest version of most browsers these days as they are now enforcing item 4.10.21.3.2 of the HTML standard. See -> html.spec.whatwg.org/multipage/…. i.e. the document.body.appendChild(form); is necessary
    – mjj1409
    Commented Jul 18, 2018 at 17:47
1

I've created a function to do this:

function PostDataRedirect(data, dataName, location) {
var form = document.createElement("form");

form.method = "POST";
form.action = location;

if (data.constructor === Array && dataName.constructor === Array) {
    for (var i = 0; i < data.length; i++) {
        var element = document.createElement("input");
        element.type = "hidden";
        element.value = data[i];
        element.name = dataName[i];
        form.appendChild(element);
    }
} else {
    var element1 = document.createElement("input");
    element1.type = "hidden";
    element1.value = data;
    element1.name = dataName;
    form.appendChild(element1);
}

document.body.appendChild(form);

form.submit(); 
}

Usage for question:

PostDataRedirect([ un, pw ], ["un", "pw"], "login.php");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.