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

时间:2018-02-16 15:21:32

标签: php html mysql database phpmyadmin

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

这是我的下拉列表:



<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>
&#13;
&#13;
&#13;

这是脚本:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

这里有update2.php:

&#13;
&#13;
<?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();
	}
?>
&#13;
&#13;
&#13;

基本上我想要发生的是在从下拉列表中进行选择时更新表值。

目前,我做出选择时没有任何反应。 (没有页面重新加载,没有错误消息,只是没有)

我在这里做错了吗?

此处还有我的表架构:

table schema

3 个答案:

答案 0 :(得分:2)

你正在瞄准错误的元素 $('option[name="status"]')应为$('select[name="status"] option'

我建议你使用id,更清晰,更快。

此外,您还将对变更事件感兴趣

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

答案 1 :(得分:1)

选择器应为select,事件应为change()。试试这个:

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

而不是:

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

答案 2 :(得分:0)

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

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