负荷 MySQL 数据到 texboxes 按钮单击

标签: MySQL PHP JavaScript
发布时间: 2017/4/9 23:10:45
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个需要一个 MySQL 数据库中的数据加载到文本框的网页。所以,文本框已经存在且值需要用那些从数据库更新。我有一个 JavaScript 函数按钮单击,看来一个 PHP 脚本来连接数据库,但它不会工作。它只是复制文本框,但在数据库中存储的值。 不知道我做错了什么吗?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <style type="text/css">
        ...
   </style>
   <script>
   //LOAD DATA      
        function btn_load_Click(){
                document.getElementById('item1').value ="<?php echo $row['item1'];?>" ;
                document.getElementById('item2').value ="<?php echo $row['item2'];?>" ;
                document.getElementById('item3').value ="<?php echo $row['item3'];?>" ;
                document.getElementById('item4').value ="<?php echo $row['item4'];?>" ;
        }
    </script>
</head>
<body>

<?php
$servername = "something.com.mysql";
$username = "myName";
$password = "xxxx";
$dbname = "myDB"

$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn){
die("Connection failed:".mysqli_connect_error());
}
else {
$sql = "SELECT item1, item2, item3, item4 FROM myTable";
$result = mysqli_query($conn, $sql);
$row = mysql_fetch_array($result);

}
mysqli_close($conn);
?>
<form id="form1" style="width:500px;" method="post">
    <div><button type="button" id="btn_load" onClick="btn_load_Click();" ></button></div>
<div id="MyItems">
    <div><input id="item1" type="text" value=""/></div>
    <div><input id="item2" type="text" value=""/></div>
    <div><input id="item3" type="text" value=""/></div>
    <div><input id="item4" type="text" value=""/></div>
</div>
</form>
</body>
</html>

解决方法 1:

第一件事第一次。

  • 不要混合 mysql_* API 与 mysqli_* 。这将给错误和问题。
  • 如果您可以使用预准备的语句,作为更好 mysql_* 已经不推荐使用。
  • PHP 和 Javascript 是与另一个不同的。只是不能将 PHP 的值分配给 Javascript 变量。

我会教你一步一步如何实现你的目标使用jQuery

首先,你必须下载 jQuery在这里

我们可以做的伎俩是隐藏我们有读取从您使用隐藏的输入的查询的行。你还把混 mysqli_* API 与 mysql_* ,所以,这是错误的。我也介绍给你预准备语句

$mysqli = new mysqli($servername, $username, $password, $dbname);

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

/* START PREPARING YOUR QUERY */
if($stmt = $con->prepare("SELECT item1, item2, item3, item4 FROM myTable")){
  $stmt->execute(); /* EXECUTE THE QUERY */
  $stmt->bind_result($item1, $item2, $item3, $item4); /* STORE THE RESULT TO THESE VARIABLES */
  $stmt->fetch(); /* FETCH THE RESULTS */
  $stmt->close(); /* CLOSE THE PREPARED STATEMENT */
}

然后我们可以读取将数据存储到这些隐藏的输入。

<input type="hidden" id="hid-item1" value="<?php echo $item1; ?>">
<input type="hidden" id="hid-item2" value="<?php echo $item1; ?>">
<input type="hidden" id="hid-item3" value="<?php echo $item1; ?>">
<input type="hidden" id="hid-item4" value="<?php echo $item1; ?>">    

在那之后,我们现在可以创建一个脚本,它将从我们隐藏的投入获取值并把它放在你的文本框中,当单击该按钮。

<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE NECESSARY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script type="text/javascript">

  $(document).ready(function(){ /* PREPARE YOUR SCRIPT */
    $("#btn_load").click(function(){ /* WHEN THE BUTTON IS CLICKED */

      /* GET THE VALUES OF THE HIDDEN INPUTS */
      var hiditem1 = $("#hid-item1").val();
      var hiditem2 = $("#hid-item2").val();
      var hiditem3 = $("#hid-item3").val();
      var hiditem4 = $("#hid-item4").val();

      /* THEN PUT THEM INTO THE DESIGNATED TEXTBOXES */
      $("#item1").val(hiditem1);
      $("#item2").val(hiditem2);
      $("#item3").val(hiditem3);
      $("#item4").val(hiditem4);

    });
  });

</script>

你还可以看看这个jsfiddle为例。

官方微信
官方QQ群
31647020