How can I submit an HTML form written in javascript without button?

Question

This is what I have tried so far, but it doesn't seem to work.

      var myJSON = JSON.stringify(distMatrix);

      var testform = `<form id="jsform" action="test.php" >
        <input type="hidden" name="array" value="${myJSON}"> /
      </form>`

      var printdata = document.getElementById('jsform');
      document.write(printdata);
      document.getElementById('jsform').submit();

Why are you trying to create a form instead of just sending the HTTP request? — melpomene, Sep 28 '19 at 12:49
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest — melpomene, Sep 28 '19 at 12:53
Possible duplicate of [Send POST data using XMLHttpRequest](https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest) — Denis O., Sep 28 '19 at 13:07
yes, because the array syntax comes into play when using stringify, and it has to be formatted for submitting — drtechno, Sep 28 '19 at 13:07
@Clabis check this answer if you just need to send some date from your js https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest#9713078 — Denis O., Sep 28 '19 at 13:08

Denis O. · Accepted Answer · 2019-09-28T13:03:56.623

0

You are trying to submit your form before it is actually created. First do document write and then submit.

UPD: ok, here we go.

Create form by simply putting it to html part of your file.
Set the required data into input via JS
submit the form

var distMatrix = [[1,2],[2,2]];

// save the value into input
var input = document.getElementById('dist_matrix_json');
input.value = JSON.stringify(distMatrix);

// submit the form
document.getElementById('jsform').submit();

<form id="jsform" action="test.php" >
    <input type="hidden" id="dist_matrix_json" name="array" value=""> /
</form>

edited Sep 28 '19 at 13:03

answered Sep 28 '19 at 12:48

Denis O.

1,841
19
37

1

it looks like they just are passing a json object, which would be just a simple XMLHttpRequest() routine and no html. – drtechno Sep 28 '19 at 12:51
@drtechno you're right and that is far not the only issue of the example. yet, to answer the question asked we only need to put submitting line at the end. – Denis O. Sep 28 '19 at 12:54

score 0 · Answer 2 · answered Sep 28 '19 at 13:37

Sending a json object can be as simple as this javascript :

 <script>
 var myObj = { "name":"John", "age":31, "city":"New York" };
 var myJSON = JSON.stringify(myObj);
 window.location = "demo_json.php?x=" + myJSON;
 </script>

That was for the GET method.

if you need post or put methods:

    <div>
      <form id="myForm" action="page.php" method="post">
          <p id="demo"></p>
      </form>
    </div>

    <script>
     var myObj, x;
     myObj = {"name":"John", "age":30, "car":null};
     for (x in myObj) {
     document.getElementById("demo").innerHTML += '<input type="text" name="'+x+'" value="'+myObj[x]+'"><br>';
      }
      document.getElementById("myForm").submit();
     </script>

How can I submit an HTML form written in javascript without button?

2 Answers2