使用Javascript输入数据不存储在数据库中?

时间:2015-08-07 04:02:41

标签: javascript php html mysql ajax

我的PHP页面中有一个表格在PHP的HTML块中。以下是该表的代码。

<form enctype="application/x-www-form-urlencoded">
<table width="200" border="1">
  <tr>
    <td>Product</td>
    <td>Promotional Price</td>
    <td>Regular Price</td>
    <td>Stacking</td>
  </tr>
  <tr>
    <td><input type="text" id="product"></td>
    <td><input type="text" id="pp1"></td>
    <td><input type="text" id="rp1"></td>
    <td><input type="text" id="stacking"></td>
  </tr>
</table>
<div id ="div1">
<input type="button"  value="Submit"  onClick="PostData();"/><br/>
</div>
</form> 

同样的Javascript将其发送到另一个PHP如下。

<script type="text/javascript">
function PostData() {




    // 1. Create XHR instance - Start
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }
    // 1. Create XHR instance - End

    // 2. Define what to do when XHR feed you the response from the server - Start
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200 && xhr.status < 300) {
                document.getElementById('div1').innerHTML = xhr.responseText;
            }
        }
    }
    // 2. Define what to do when XHR feed you the response from the server - Start
    var product = document.getElementById("product").value;
    var pp1 = document.getElementById("pp1").value;
    var rp1 = document.getElementById("rp1").value;
    var stacking = document.getElementById("stacking").value;

    // var image = document.getElementById("image").value;
    // 3. Specify your action, location and Send to the server - Start
xhr.open('POST', 'report.php');
    //xhr.open('POST', 'config.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("product=" + product + "pp1=" + pp1 + "rp1=" + rp1 + "stacking=" + stacking);
}

</script>

和将值存储到数据库的PHP如下所示。

    <?php  
    //Updated after the answer from AnikIslam
    $servername = "localhost";
$username = "root";
$password = "";
$dbname = "testing";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO tbl_report (product,pp1, rp1,stacking) VALUES ('$product', '$pp1', '$rp1','$stacking')";

if ($conn->query($sql) === TRUE) {
    echo "Successful";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
    ?>

如截图所示,我有2个块来输入数据。现在,数据仅从第一个块输入数据库。我希望数据从第二个块存储到数据库中的第二行。如何实现。

enter image description here

1 个答案:

答案 0 :(得分:2)

试试这个

 xhr.send("product=" + product + "&pp1=" + pp1 + "&rp1=" + rp1 + "&stacking=" + stacking);

对于Php Part

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testing";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO tbl_report (product,pp1, rp1,stacking) VALUES ('$product', '$pp1', '$rp1','$stacking')";

if ($conn->query($sql) === TRUE) {
    echo "Successful";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

修改

每个表单应具有唯一ID

在提交按钮

中传递块名称

喜欢这个

第一块

onClick="PostData('Block1');"

第二块

onClick="PostData('Block2');"

JS

function PostData(block){



  if(block==="Block1"){
     // fetech data from block1
  }
  else if(block==="Block2"){
     // fetech data from block2
  }

}