无法通过“添加”按钮将新创建的输入字段中的数据获取到数据库中

时间:2018-09-19 21:48:37

标签: javascript php html

因此,问题在于数据库仅接受输入到第一个输入字段中的数据。  PHP

   <form class = "spendings" method ="POST" action="InsertToDatabase.php">
 <div id="numbering">ITEM 1: </div>
 <div class="entry">
 <label for= "item" class= "items">Item Name: </label>
 <input type="text" name="enterItems" id="enterItems" placeholder = "Please Enter The Item Name"></input>
  <label for ="price" class="price"> Price: </label>
  <input type = "number" name="enterPrice" id="enterPrice"  placeholder="Please Enter The Price" />
 </div>
<div id="add">
</div>
   <input type ="button" id = "more_items" onclick ="addMore()" value = "Add More">
   <button type = "submit" class="submit">Submit</button>

 </form>

insertToDatabase.php

<?php
 $host = "localhost";
 $user= "root";
$password= '';
$conn = mysql_connect($host, $user, '') or die("Could not connect");
$select = mysql_select_db("sharjeel",$conn);
$enterNames = mysql_real_escape_string($_POST['enterItems']);
$enterNumbers = mysql_real_escape_string($_POST['enterPrice']);
if($enterNames != '')
$msql="INSERT INTO `spendings` (itemName, Price) VALUES ('$enterNames', '$enterNumbers')";
$result= mysql_query( $msql, $conn);
mysql_close($conn);

?>

和JS

var item =1;
function addMore(){
item++;

var addDiv= document.getElementById("add");
var divTest = document.createElement("form");

divTest.innerHTML=' <form class = "spendings" method ="POST" action="insertToDatabase.php"><div id="numbering">ITEM '+ item + ':</div><div class="entry"><label for= "item" class= "items">Item Name: </label> <input type="text" class="enterItems" placeholder = "Please Enter The Item Name" /><label for ="price" class="price"> Price: </label><input type = "number" class="enterPrice" placeholder= "Please Enter The Price" /></div></form>';

addDiv.appendChild(divTest);

 }//end addMore

第一个输入字段将数据添加到数据库中;但是,在单击“添加更多”(Add more)按钮并将数据输入到新创建的字段后,该数据不会输入数据库。 谢谢您的回复

3 个答案:

答案 0 :(得分:0)

将名称属性从字符串name="enterItems[]"name="enterPrice[]"更改为数组,并在php上使用循环将数据插入数据库。

您也不需要再次克隆整个表单。只需在表单内克隆内容。

答案 1 :(得分:0)

您的错误在If语句中,您忘记使用'{}' 而且,无论在数据库中仅插入一个值,都只需在数据库表中添加具有唯一标识符或主键的支出ID。 它应该看起来像这样。

enter image description here

这应该是您的insertToDatabase.php

<?php
$conn = mysqli_connect("localhost", "root", "", "Your database");
$enterNames =$_POST['enterItems'];
$enterNumbers = $_POST['enterPrice'];
if($enterNames != ''){
$msql= "INSERT INTO `spendings` (itemName, Price) VALUES ('$enterNames', '$enterNumbers')";
$result= mysqli_query( $conn,$msql);
header('Location: index.php');
}
mysqli_close($conn);    

?>

答案 2 :(得分:0)

我对您的代码进行了一些更改,只是为了使您了解如何实现所需的功能。

HTML

<div class="entry">
<label for= "item" class= "items">Item Name: </label>
<input type="text" name="enterItems[]" id="enterItems" placeholder = "Please Enter The Item Name"></input>
<label for ="price" class="price"> Price: </label>
<input type = "number" name="enterPrice[]" id="enterPrice"  placeholder="Please Enter The Price" />
</div>
<div id="add">
</div>
<input type ="button" id = "more_items" onclick ="addMore()" value = "Add More">
<button type = "submit" class="submit">Submit</button>
</form>

JS

<script type="text/javascript">
var item =1;
function addMore(){
item++;
var addDiv= document.getElementById("add");
var divTest= document.getElementsByClassName('entry')[0],
clone = divTest.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = item;
addDiv.appendChild(clone);
}
</script>

PHP

<?php
if(isset($_POST['enterItems'])){
for ($i=0; $i < sizeof($_POST['enterItems']); $i++) { // this is the loop i was talking about
    // you will need to create and execute your mysql command here in order to insert all the  records into the database.
    echo $_POST['enterItems'][$i]; 
    echo $_POST['enterPrice'][$i];
}
}
?>