Javascript 将 CheckBox 数据表单提交给 PHP答案

【问题标题】：Javascript Submit CheckBox Dataform to PHPJavascript 将 CheckBox 数据表单提交给 PHP
【发布时间】：2020-07-01 15:26:40
【问题描述】：

我使用 javascript 编写了一些代码来向 PHP 提交复选框表单数据。但是php无法获取数据。以下是我的代码。提前致谢。

HTML 代码：

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

Javascript 代码：

<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 代码：

$result = $_POST['formname']

【问题讨论】：

而var_dump($result) 显示什么？
onchange="fetch()" 与 <form> 不正确
@u_mulder 你好 u_mulder，它显示为空。如果我使用表单操作，我可以提交表单，PHP 代码也可以帮助我打印结果。 javascript真的很烦人。
@Yuan 你为什么要使用javascript？
你的<form>提交按钮在哪里？

标签： javascript php form-data

【解决方案1】：

这是来自MDN 的示例（稍作更改），我认为（！）然后您可以获得如下值： $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} ); 
} )

我希望这会奏效。

【讨论】：

谢谢。这是一种替代方法，但页面将被刷新。我的项目在页面上加载了一张地图，而且很重。预计用户将迅速更改复选框选项并看到不同的结果。所以页面是不允许刷新的。你有 javascritp 选项吗？
@Yuan 我改变了我的答案，希望这会奏效......（我不是这方面的专家......）

【解决方案2】：

非常感谢所有试图帮助我的人。我花了一个晚上找到了一个简单的方法来解决我的问题。解决方案是在表单中添加id 元素，并在FormData 元素中添加表单id。 I got the hint from this question

HTML 代码

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

Javascript 代码：

<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 代码：

$result = $_POST['formname']

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

【讨论】：