Create, append and submit form using pure JavaScript

Question

I'm trying to implement onclick function, which send parameters using POST method. I need this function to reload the page, what makes me to use some other way than AJAX. I have a function to do this, but this function uses jQuery. Now I need to "port it" to pure JavaScript.

jQuery function:

function domainRemoveConfirmation(id, url) {
    //trick to send javascript redirect with post data
    var form = $('<form action="' + url + '" method="post" hidden="true">' +
              '<input type="text" name="domainId" value="'+ id + '" />' +
              '</form>');
    $('body').append(form);
    $(form).submit();
}

I look for the equivalent function in pure JavaScript, I need to create element (form with input fields), append it and submit it.

ElmoVanKielmo · Accepted Answer · 2014-06-04 14:08:56Z

14

Here you go:

function domainRemoveConfirmation(id, url){
    var myForm = document.createElement('form');
    myForm.setAttribute('action', url);
    myForm.setAttribute('method', 'post');
    myForm.setAttribute('hidden', 'true');
    var myInput = document.createElement('input');
    myInput.setAttribute('type', 'text');
    myInput.setAttribute('name', 'domainId');
    myInput.setAttribute('value', id);
    myForm.appendChild(myInput);
    document.body.appendChild(myForm);
    myForm.submit();
};

answered Jun 4, 2014 at 14:08

ElmoVanKielmo

11.4k2 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sabithpocker · Accepted Answer · 2014-06-04 14:10:36Z

2

var form = '<form name="myform" action="' + url + '" method="post" hidden="true">' +
          '<input type="text" name="domainId" value="'+ id + '" />' +
          '</form>';
document.body.innerHTML += form;
document.forms.myform.submit();

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('hidden',"true");
f.setAttribute('name',"myform");
f.setAttribute('action',url);

var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"domainId");
i.setAttribute('value', id);

f.appendChild(i);


document.getElementsByTagName('body')[0].appendChild(f);

document.forms.myform.submit();

edited Jun 4, 2014 at 14:10

answered Jun 4, 2014 at 14:04

sabithpocker

15.6k1 gold badge44 silver badges78 bronze badges

Collectives™ on Stack Overflow

Create, append and submit form using pure JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related