Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create, append and submit form using pure JavaScript

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.

Thanks in advance!

like image 634
kmb Avatar asked Jun 04 '14 13:06

kmb


People also ask

Can I use JavaScript to submit a form?

Generally, a form is submitted when the user presses a submit button. However, sometimes, you may need to submit the form programmatically using JavaScript. JavaScript provides the form object that contains the submit() method. Use the 'id' of the form to get the form object.

What is correct way to submit a form using JavaScript?

When we click on the link, the function submitForm() will get executed. This function will get the element object using DOM getElementById() method by passing the form id to this method, then the form will be submitted by using submit() method. Example: Create a form and submit it using the above approach.

What does JavaScript submit () do?

The method form. submit() allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.


2 Answers

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();
};
like image 135
ElmoVanKielmo Avatar answered Oct 03 '22 16:10

ElmoVanKielmo


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();
like image 35
sabithpocker Avatar answered Oct 03 '22 16:10

sabithpocker