在 HTML 选择更改后将值传递给 PHP答案

【问题标题】：Pass value to PHP after HTML Select Change在 HTML 选择更改后将值传递给 PHP
【发布时间】：2018-10-23 10:22:35
【问题描述】：

我的 html 表单有一个 Select 选项。在 i Change data from option 和 Submit the data 之后运行 Mysql 查询。我想要的是，从 select 中选择数据后，它将重新加载并将值传递给 php 代码。

这里是html

<form action='a.php?'>
        <SELECT name="client_id" ID="mySelect">
                <OPTION value="artes>'">artes</OPTION>
                <OPTION value="ingles">inglés</OPTION>
        </SELECT>
<input type="submit" name="chooseclient" value="Select">
</form>

这是提交后运行的php

        if(isset($_POST['chooseclient'])){  
    $clientid = mysqli_real_escape_string($mysqli, $_POST['client_id']);
MYSQL query here
    }

我已经尝试过 this.form.submit() ，但它不发送数据。我知道我需要 Ajax 。有没有办法 onChange 重新加载表单并将数据传递给 php ？

【问题讨论】：

我没有注意到。能不能多解释一下
您是希望在更改选择值时在后台发送表单，还是希望在您选择值后自动提交？
您应该使用Prepared Statements 而不是手动转义值并连接您的查询。此外，mysqli_real_escape_string() 用于转义字符串，而不是整数。
@Alihosseinshahabi 当我选择一个选项时，我希望代码输入 isset($_POST['chooseclient'] 然后做剩下的事情。
@lou 我希望代码在我选择一个值后输入 isset($_POST['chooseclient'] 。 select 的值也需要在 php 代码中传递

标签： php html

【解决方案1】：

如果你想在字段值改变时通过Ajax自动将选中的值发送到a.php，你可以使用下面的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>

<form action='a.php?'>
    <SELECT name="client_id" ID="mySelect">
        <option value="A1>'">A1</option>
        <option value="A2">A2</option>
        <option value="A3">A3</option>
    </SELECT>

</form>

<script type="text/javascript">

    $(document).ready(function() {

        $("#mySelect").change(function(){

            var value =$("#mySelect").val();

            alert(value);
            $.ajax({
                url: 'a.php', 
                type: "POST",
                data: ({chooseclient: value}),
                success: function(){
                    location.reload();
                }
            });

        });
        });
</script>
</body>

如果您不希望页面在发送信息并保存到数据库后重新加载，请评论location.reload();

a.php：

<?php

if(isset($_POST['chooseclient'])){
    $clientid = mysqli_real_escape_string($mysqli, $_POST['chooseclient']);
    #MYSQL query here
    # do something
}

【讨论】：

如果您要在 ajax 调用后重新加载页面，为什么还要使用 Ajax？只发布表单会更容易。

【解决方案2】：

要实现您所期望的，您必须使用一些 javascript。据我了解，您不需要发送 ajax 请求，因为您要求表单在提交时重新加载。但我会给你两种方法。

无 AJAX

首先，我们将在您的表单中添加一个 ID。在我的示例中，它将是“my-form”。还有一个 onchange 事件到你的选择，它将调用 myFunction();。我们还必须告诉您的表单发布数据以使您当前的 PHP 脚本正常工作，否则它将作为 get 发送

<form id="my-form" action='a.php?' method="post">
    <SELECT onchange="myFunction()" name="client_id" ID="mySelect">
        <OPTION value="artes>'">artes</OPTION>
        <OPTION value="ingles">inglés</OPTION>
    </SELECT>
    <input type="submit" name="chooseclient" value="Select">
</form>

现在在一个 javascript 文件或一个脚本标签之间添加你的函数：

<script>
function myFunction(){
    document.getElementById("my-form").submit();
}
</script>

现在，当您更改选择的值时，您的表单应该自行提交。但是你会有另一个问题。

if(isset($_POST['chooseclient'])){  
    $clientid = mysqli_real_escape_string($mysqli, $_POST['client_id']);
//MYSQL query here
}

当您通过 javascript 提交表单时，您的提交按钮将不会与其余数据一起发送。所以if(isset($_POST['chooseclient'])) 永远不会是真的。为了解决这个问题，你有几个选择，我给你两个：

您可以更改您的 PHP 以检查 client_id（如果您这样做，您可以完全删除您的提交按钮）：

if(isset($_POST['client_id'])){  
    $clientid = mysqli_real_escape_string($mysqli, $_POST['client_id']);
//MYSQL query here
}

或者将您的提交按钮更改为隐藏字段：

<form id="my-form" action='a.php'>
    <SELECT onchange="myFunction()" name="client_id" ID="mySelect">
        <OPTION value="artes>'">artes</OPTION>
        <OPTION value="ingles">inglés</OPTION>
    </SELECT>
    <input type="hidden" name="chooseclient" value="Select">
</form>

Ajax

就像在第一种方法中一样，我们将向您的表单添加一个 id 并为您的选择添加一个 onchange 事件，您还应该删除您的提交按钮或将其更改为隐藏字段，在本例中我将删除它：

<form id="my-form" action='a.php'>
    <SELECT onchange="myFunction()" name="client_id" ID="mySelect">
        <OPTION value="artes>'">artes</OPTION>
        <OPTION value="ingles">inglés</OPTION>
    </SELECT>
</form>

脚本与第一个脚本完全不同：

<script>
function myFunction(){
    var form = document.getElementById("my-form");
    var action = form.getAttribute("action");
    var data = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", action);
    xhr.send(data);
}
</script>

再次，您将不得不修复您的 PHP 不以选择客户端为条件（除非您将其设为隐藏字段）：

if(isset($_POST['client_id'])){  
    $clientid = mysqli_real_escape_string($mysqli, $_POST['client_id']);
//MYSQL query here
}

如果您选择 ajax 方法，您可能想对响应做一些事情，stackoverflow 上有很多关于此的线程，这里有一个：How to get the response of XMLHttpRequest?

【讨论】：

感谢您的详细解释。我会检查并让你知道它是否有效。
问题是，代码没有进入 if(isset($_POST['client_id'])){
@MosarofHossain 您是否将方法 post 添加到表单的代码中？ <form id="my-form" action='a.php' method="post">
@MosarofHossain 这就是第二部分提到的Ajax方法。它可能会回显 12 但在您的 xhr 响应中。我修改了链接中的代码以使用非 ajax 方法，因为您似乎想在响应中输出 html。它在我的终端上运行良好，你能验证它是否在你的终端上运行吗？
它有效。我刚刚通过使用 $_POST['client_id'] 进行了检查，并且 this.form.submit() 值被传递给了 php -_- 。编码的悲哀