使用下拉列表更新表值而不使用提交按钮

Posted 2023-02-25

【中文标题】使用下拉列表更新表值而不使用提交按钮

【英文标题】：Updating table values using dropdown without using a submit button

【发布时间】：2018-07-27 13:02:41

【问题描述】：

我正在尝试使用下拉列表而不使用提交按钮来更新数据库。

这是我的下拉菜单：

<td>
  <label for=""></label> 
  <select style="font-family: Questrial;" name="status" required>
	  <option disabled selected hidden>Select Status</option>
	  <option value="In Progress">In Progress</option>
	  <option value="Closed: Cancelled">Closed: Cancelled</option>
	  <option value="Closed: Solved">Closed: Solved</option>
	</select>
</td>

这是脚本：

<script>
  $(document).ready(function() 
    $('option[name="status"]').click(function() 
      var status = $(this).val();
      $.ajax(
        url: "update2.php",
        method: "POST",
        data: 
          status: status
        ,
        success: function(data) 
          $('#result').html(data);
        
      );
    );
  ); 
</script>

这里是 update2.php：

<?php
//Insert Data
	$hostname = "localhost";
	$username = "root";
	$password = "";
	$databasename = "companydb";
	
	try
	
		$conn = new PDO("mysql:host=$hostname;dbname=$databasename",$username, $password);
		$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
		
	if(isset($_POST["status"]))
	
		$query = "INSERT INTO tickets(status) VALUES (:status)";
		$statement = $conn->prepare($query);
		$statement->execute(
	array('status' => $_POST["status"])
	);
	
	$count = $statement->rowCount();
	if($count > 0)
	
		echo "Data Inserted Successfully..!";
	
		else
	
		echo "Data Insertion Failed";
	
	


	catch(PDOException $error)
	
		echo $error->getMessage();
	
?>

基本上，我希望在从下拉列表中进行选择时更新表值。

目前，当我进行选择时，没有任何反应。 （没有页面重新加载，没有错误信息，什么都没有）

我在这里做错了吗？

这也是我的表架构：

table schema

【问题讨论】：

用select[name="status"] option替换option[name="status"]

您可能还应该听change 事件而不是点击事件，以避免运行不必要的代码和发出不必要的请求。

@jeroen 您没有不必要的请求，请收听选项的点击。但无论如何最好（通常完成）选择更改事件。

您能否在您的点击监听函数的最开始时发出警报alert("clickListener works!"); 并查看警报是否显示？

@Cashbee 是的，我收到了警报。

【参考方案1】：

您定位到了错误的元素 $('option[name="status"]') 应该是 $('select[name="status"] option'

我建议你使用id，它们更清晰，更快。

此外，您还会对 change 事件感兴趣

https://api.jquery.com/change/

【讨论】：

使用您的代码，它会监听对选择本身的点击。我可以建议将$('select[name="status"]') 更改为$('select[name="status"] option')。 （但是当使用 change 事件时，听选择，而不是选项。）

感谢您的建议。

@Cashbee 我应该使用$('select[name="status"] option')吗？

@JohnZ 是的尝试一下，但我担心它不会起作用。它与您在另一条评论中所说的$('select[name="status"]').change(..) 基本相同，它不起作用。不过，尝试一下永远不会错。

@Cashbee 是的，它没有用，谢谢你的建议

【参考方案2】：

选择器应为select，事件应为change()。试试这个：

$('select[name="status"]').change(function() 

而不是：

$('option[name="status"]').click(function() 

【讨论】：

嗯，我确实试过这个，但我仍然得到相同的结果，谢谢你指出这一点。

@JohnZ 控制台的网络面板发生了什么？任何痕迹，任何错误？

没什么。下拉列表的值只是改变了，就是这样。

@JohnZ 你能在var status = $(this).val(); 后面加上console.log(status); 或alert(status) 吗？

@JohnZ 我猜你还有另一个 javascript 错误。控制台没有错误 (F12) ？

【参考方案3】：

1) 将$('option[name="status"]').click( 更改为$('select[name="status"]').change( 名称“状态”是选择的属性，而不是选项。

2) 确保您有一个 id 为“result”的元素，否则 ajax 成功处理程序将不会在任何地方插入接收到的数据/字符串。

这些更改应该可以使您的代码正常工作。

我建议为您执行的每个 ajax 调用添加一个错误处理程序。还要尝试防止 ajax 方法调用的 php 文件出现没有返回/回显的情况。

if(isset($_POST["status"]))

    $query = "INSERT INTO tickets(status) VALUES (:status)";
    $statement = $conn->prepare($query);
    $statement->execute(array('status' => $_POST["status"]));

    $count = $statement->rowCount();
    if($count > 0)
    
        echo "Data Inserted Successfully..!";
    
        else
    
        echo "Data Insertion Failed";
    

// ! add else statement
else

    echo "unknown index: 'status'";

还有一篇关于 ajax 错误处理的有趣文章：setting response codes in PHP

【讨论】：

非常感谢！