Javascript Submit CheckBox Dataform to PHP

Question

I wrote some code using javascript to submit checkbox form data to PHP. But the php cannot get the data. The following are my codes. Thanks in advance.

HTML CODE:

<form onchange="fetch()" method="post">
    <input type="checkbox" name="formname[]" value="value1" />
    <input type="checkbox" name="formname[]" value="value2" />
</form>

Javascript Code:

<script>
    function fetch() {
        var data = new FormData(); 
        data.append("formname[]", document.getElementsByName("formname[]"));
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "the url to php code", true); 
        xhr.send(data);

...
</script>

PHP Code:

$result = $_POST['formname']

@u_mulder Hello u_mulder, it shows null. I could submit the form if I used form action and PHP code could also help me to print the result. The javascript is really annoying. — Yuan, Jul 01 '20 at 15:36
@KUMAR While the page does not refresh if I use Javascript and quick. I prefer to use this method. Any hint? — Yuan, Jul 01 '20 at 15:39
@KUMAR I used the onchange method, the javascript code will be triggered if the checkbox was checked or unchecked. The user does not need to click the submit button. — Yuan, Jul 01 '20 at 15:42

Seabyte · Answer 1 · 2020-07-01T16:57:25.700

This an example from MDN (changed a bit) and I think (!) you can then get the value like this: $res = $_POST["CHECKBOX"];

const btn = document.querySelector('button');

function sendData( data ) {
  const XHR = new XMLHttpRequest(),
        FD  = new FormData();

  // Push our data into our FormData object
  for( name in data ) {
    FD.append( name, data[ name ] );
  }

  // Define what happens on successful data submission
  XHR.addEventListener( 'load', function( event ) {
    alert( 'Yeah! Data sent and response loaded.' );
  } );

  // Define what happens in case of error
  XHR.addEventListener(' error', function( event ) {
    alert( 'Oops! Something went wrong.' );
  } );

  // Set up our request
  XHR.open( 'POST', 'PHP file' );

  // Send our FormData object; HTTP headers are set automatically
  XHR.send( FD );
}

btn.addEventListener( 'click', function() 
  { sendData( {CHECKBOX:document.querySelector("input[type=checkbox]").value} ); 
} )

I hope that this will work.

Thank you. This is an alternative, but the page will be refreshed. My project loads a map on the page and it is heavy. The user is expected to swiftly change the checkbox options and see different results. So the page are not allowed to refresh. Do you have a javascritp option? — Yuan, Jul 01 '20 at 16:48
@Yuan I changed my answer, hopefully that will work... (I'm not an expert on this...) — Seabyte, Jul 01 '20 at 16:58

score 0 · Answer 2 · answered Jul 02 '20 at 01:01

Thanks very much for everyone who tried to help me. I spent a night and find an easy fix for my problem. The solution is to add an id element to the form and add the form id in the FormData element. I got the hint from this question

HTML Code

<form onchange="fetch()" method="post" id="myform">
    <input type="checkbox" name="formname[]" value="value1" />
    <input type="checkbox" name="formname[]" value="value2" />
</form>

Javascript Code:

<script>
    function fetch() {
        var data = new FormData(document.getElementById("myform"));
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "the url to php code", true);
        xhr.send(data);

...
</script>

PHP Code:

$result = $_POST['formname']

AND I found the same result even using:
$result = $_POST['formname[]']

Javascript Submit CheckBox Dataform to PHP

2 Answers2