Question

问题：触发选择输入的onchange事件后，如何基于MySQL查询更新表单的选择输入值和文本输入字段？

我尝试过的方法：我试图将AJAX与post和get数据类型一起使用，调用一个运行查询并回显结果的php文件。什么也没显示。我沿途遇到的任何错误通常都是小问题，会导致服务器500错误。我已将console.log语句放置在运行JQuery AJAX请求的函数中。检测到更改事件，成功调用了ajax。我也尝试将.load（）与GET和POST一起使用，也没有运气。我还有其他实现AJAX的功能，并且我尝试过对其进行修改以适合这种情况，但没有成功。

我还尝试仅使用选择输入，当更改时将使用AJAX请求和.load函数来显示其他输入，这些输入将在php端进行格式化，并以选定的值和反映数据库结果的值回显到页面。 / p>

我想要什么：我想要一个简单的表单示例，其中包含一个带有三个选项的选择输入，文本类型输入和一个提交按钮。该表单是一个客户端后端表单，用于将更新发送到MySQL数据库。每个输入代表db中的一个字段。想法是，当用户更改选择输入的选择值时，将执行查询，该查询使用选择值仅返回一个结果。该字段中记录该值的每个字段现在都应反映在表格中。首先，请告诉我这是否是解决此问题的正确方法，如果没有告诉我您会怎么做。

示例index.php：

   let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
    let  btn = UIButton()
    btn.frame = CGRect(x: -15, y: 0, width: 44, height: 50)
    btn.setImage(UIImage(name:"img").withRenderingMode(.alwaysTemplate), for: .normal)
    btn.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
    view.addSubview(btn)
    let leftButtonBar = UIBarButtonItem(customView: view)
    self.navigationItem.leftBarButtonItems = ( [leftButtonBar])

在触发#contact_name的更改事件时，我需要使用数据库具有的值来更新字段。

您将如何实施？预先感谢。

更新：这里要求的是我的JQuery代码，但是我知道我的示例没有使用相同的名称。

    <form action="editForm.php" method="POST" enctype="multipart/form-data">
        <select id="contact_name" name="contact_name" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
        </select>    
        <input type="text" name="age" placeholder="Age" required>
        <input type="text" name="race" placeholder="Select Race" required>
        <select id="veteran_status" name="veteran_status" placeholder="Select Veteran Status" required>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </form>

这是我对如何执行此操作的理解：

首先，检测事件并通过ajax传递数据以供查询检索记录。这是在文档准备功能中，用于确保DOM准备就绪。

    <script type="text/javascript">
  $(document).ready(function(){
    $('#currency_select').on('change', function (e) {
      $.ajax({
        type: 'post',
        url: 'getCurrentValues.php',
        data: {currency: 'EUR'},
        success: function () {
          console.log('ajax was submitted');
        }
      });
    });
  });
</script>

editForm.php：

     $("#contact_name).on("change", function(e){
       $.ajax({
        type: 'post',
        url: 'editForm.php',
        data: {name: this.value},
        success: function () {
          console.log('ajax was submitted');
        }
      });
    };

Answer 1

您的索引：

<select id="contact_name" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
</select>  

<form action="editForm.php" id="form" method="POST" enctype="multipart/form-data">  
<select name="contact_name" id="contact_form" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
</select> 
        <input type="text" id="age" name="age" placeholder="Age" required>
        <input type="text" id="race" name="race" placeholder="Select Race" required>
        <select id="veteran_status" name="veteran_status" placeholder="Select Veteran Status" required>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </form>

    $("#contact_name").on("change", function() {
        var selected = $(this).val();
        $("#form").load("formdata.php?contact="+selected); //normaly you do that with an id as value

        OR

        $.ajax({
           type:"POST",
           url:"formdata.php",
           data: {user: selected},
           dataType: "json",
           success: function(response){
              if(response.status == "success") {
                 $("#age").val(response.age);
                 $("#race").val(response.race); 
                 $("#veteran_status").val(response.status);
              } else {
                 alert("No data found for this user!");
           }
        });
    });

以及您的formdata.php文件中

//make your db-query
then either make the actual input fields which will be displayed if you use load

OR make something like if you use the ajax version

if($result) {
   echo json_encode(array("status" => "success",age" => $result["age"], "race" => $result["race"], "status" => $result["status"]));
} else {
   echo json_encode(array("status" => "failed"));
}

您还可以删除表单中的动作，方法和enctype，因为这将在ajax函数中设置;）

我建议您使用userid作为选择字段中的值，并且您还需要在表单中填写contact_name或隐藏一个输入字段，以便您可以提交表单并了解谁的数据这是..

Answer 2

只需在您的editForm.php文件中回显$ age变量，然后在AJAX调用成功函数中提醒响应。像这样

editForm.php

include 'includes/db.php';
$name = $_POST['contact_name'];
$sql = "SELECT * FROM contacts;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    $lastValues = array();
    while($row = mysqli_fetch_assoc($result)) {
      echo $age = $row['age'];
    }
  }
?>

Ajax文件

$("#contact_name).on("change", function(e){
   $.ajax({
    type: 'post',
    url: 'editForm.php',
    data: {name: this.value},
    success: function (response) {
      alert(response);
      console.log(response);
    }
  });
};

使用AJAX和PHP更新表单字段

2 个答案: