[Solved-6 Solutions] JavaScript post request like a form submit - javascript tutorial

Problem:

How JavaScript post request like a form submit ?

Solution 1:

The easiest way is using Ajax Post Request:

 $.ajax({
    type: "POST",
    url: 'http://www.myrestserver.com/api',
    data: data,
    success: success,
    dataType: dataType
    });

Where:

Data is an object
DataType is the data expected by the server (xml, json, script, text, html).
URL is the address of server or using any function on the server side that accept the HTTP-POST.

Solution 2:

Here using javascript framework to be simple and quick implementation.

document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>';
document.getElementById("dynForm").submit();

Read Also

Redirect request after a jquery ajax

Solution 3:

Try this:

function post(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

Solution 4:

This code using a jQuery.

function post(path, parameters) {
    var form = $('<form></form>');

    form.attr("method", "post");
    form.attr("action", path);

    $.each(parameters, function(key, value) {
        var field = $('<input></input>');

        field.attr("type", "hidden");
        field.attr("name", key);
        field.attr("value", value);

        form.append(field);
    });

    // The form needs to be a part of the document in
    // order for us to be able to submit it.
    $(document.body).append(form);
    form.submit();
}

Solution 5:

Here we can use the createElement function, which is necessary due to IE's brokenness with the name attribute on elements created normally with document.createElement:

function postToURL(url, values) {
    values = values || {};

    var form = createElement("form", {action: url,
                                      method: "POST",
                                      style: "display: none"});
    for (var property in values) {
        if (values.hasOwnProperty(property)) {
            var value = values[property];
            if (value instanceof Array) {
                for (var i = 0, l = value.length; i < l; i++) {
                    form.appendChild(createElement("input", {type: "hidden",
                                                             name: property,
                                                             value: value[i]}));
                }
            }
            else {
                form.appendChild(createElement("input", {type: "hidden",
                                                         name: property,
                                                         value: value}));
            }
        }
    }
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

Solution 6:

To post a form with a field called as submit. For example, post_to_url("http://wikitechy.com/",{ submit: "submit" } );. Using this function have the variable space collision.

function post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        //Move the submit function to another variable
        //so that it doesn't get overwritten.
        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_(); //Call the renamed function.
    }
    post_to_url("http://google.com/", { submit: "submit" } ); //Works!

UP NEXT IN Javascript

JavaScript Arrays

JavaScript Date

JavaScript with AngularJS

JavaScript Variables

JavaScript Operators

JavaScript Functions

JavaScript Objects

JavaScript Scope

JavaScript Events

JavaScript Strings

JavaScript Numbers

jQuery

JavaScript JSON

JavaScript Timing

JavaScript Loops

JavaScript DOM

JavaScript Ajax

JavaScript HTML/CSS

JavaScript Advanced

JavaScript Vs Other

Related Searches to How JavaScript post request like a form submit - javascript tutorial

javascript post request examplejavascript post form ajaxjavascript post data to urljavascript submit form onclickjavascript send post request jsonjavascript form submit examplejavascript post methodjavascript read post datasubmit form using ajax jqueryjavascript submit form ajax without jqueryjavascript ajax form submit examplepure javascript submit formform submit using ajax in phpajax form submit jqueryajax form submit without refreshsimple ajax formjavascript tutorialjava scriptjavascriptjavascript arrayjavascript booklearn javascriptjavascript codejavascript editorjavascript classjavascripjavascript debuggerjavascript onlinejavascript examplesjavascript testjavascript documentjavascript sliderwhat is javascriptjavascript form validationjavascript validatorhtml javascriptjavascript alertjavascript eventsjavascript printjavascript domjavascript objectjavascript functionhref javascriptjavascript datejavascript promptjavascript onclickjavascript returnjavascript forjavascript numberjavascript confirmjavascript onchangejavascript regular expressionjavascript ifjavascript variablejavascript timerjavascript cookiejavascript getelementbyidjavascript innerhtmljavascript calljavascript regexpjavascript includesjavascript thisjavascript eval