Javascript POSTing HTML form

Question

I need to post some data to a webservice using a single button click. I don't want to show the reply received from the server, which a simple HTML form does. So I came up with the following code:

<!DOCTYPE html>

<html>
<head>
<script>
function sendData() {

    var form = document.createElement('form');
    form.action = "https://posttestserver.com/post.php";
    form.method = 'POST';


    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = "args";
    input.value = "on";
    form.appendChild(input);

    form.submit();
    alert("Submited!");
}


</script>
</head>
<body>

<button onclick="sendData();">Click Me!</button>

</body>
</html>

Please enlighten me what exactly is going wrong, because its not posting any data.

Its working here: https://jsfiddle.net/6Ldp26d4/ Put your js function before closing `
` tag and try... — Rayon, Dec 17 '15 at 04:59

score 0 · Answer 1 · answered Dec 17 '15 at 05:05

0

Any reason you have to use JavaScript to create the form? Is it simply not posting the input or is the form failing to submit? You can always use your Web Inspect tool to see the request.

Try opening your web inspector and look at the console for any JavaScript errors.

answered Dec 17 '15 at 05:05

dranieri

199
1
7

I used the simple HTML form, it worked, but it showed the reply from server, which i dont want to show. Alternative? – Dushyant Bangal Dec 17 '15 at 05:35
Hmm if the server is sending a reply that means you are posting. Only thing i can think of is the URL you are posting to is looking for something in particular like a token. – dranieri Dec 18 '15 at 20:32

score 0 · Answer 2 · answered Dec 17 '15 at 05:21

0

your posted data found at http://www.posttestserver.com/data/2015/12/16/21.17.23451563624

plz, see the image.

answered Dec 17 '15 at 05:21

Ataur Rahman Munna

3,887
1
23
34

Maybe its not mine, because this one is not working :( – Dushyant Bangal Dec 17 '15 at 05:44

score 0 · Answer 3 · answered Dec 17 '15 at 06:06

0

you can use ajax to post data instead of form submit. params = { 'input':'on' } $.ajax(url,post,params,succ,err)

answered Dec 17 '15 at 06:06

Jiayu Wang

905
7
5

the brower can filter the input value based on the hidden attribute. – Jiayu Wang Dec 17 '15 at 06:09

score 0 · Answer 4 · edited May 23 '17 at 12:23

0

Solutions as per my understanding :

If you are placing script in head tag, refer 'Where should I put <script> tags in HTML markup?'. The conclusion is to put scripts in the head tag and use the async or defer attributes.
Append form to your body before submitting the form.
```
document.body.appendChild(form);     
```
Place script before body tag.

edited May 23 '17 at 12:23

Community

1
1

answered Dec 17 '15 at 06:42

Chandni

496
2
5
14

score 0 · Answer 5 · answered Dec 17 '15 at 07:42

Not sure why you want to create a form using JS just to post some data to server when you could have used ajax. As already mentioned in previous answers you can use jQuery. If you are reluctant to use jQuery, you could have used XML HTTP Request (XHR) object

A simple solution using jQuery would be

$.ajax({
    type: 'POST',
    url: 'https://posttestserver.com/post.php',
    data: {'args': 'on'}
});

Since you want the data to send on clicking a button, you could trigger the event on button click

$('button').on('click', function() {
    $.ajax({
        type: 'POST',
        url: 'https://posttestserver.com/post.php',
        data: {'args': 'on'}
    });
});

score 0 · Accepted Answer · answered Dec 21 '15 at 11:51

My main aim was

I don't want to show the reply received from the server

So I added an IFRAME in the page and then added it as the form's target

<form action="MYLINK" method="POST" target="hidden-form">
...
</form>
<IFRAME style="display:none" name="hidden-form"></IFRAME>

Now the reply from server is not visible

Javascript POSTing HTML form

6 Answers6