javascript - 如何将动态添加的行存储到数据库mysql php中

标签 javascript php jquery html mysql

我已经被这个问题困扰了好几天了。希望大家能够帮助我。

通常,当您通过 HTML 表单要求用户输入时,您可以通过调用 $_POST 函数来访问数据。

这种方法的问题是我没有一组静态的输入字段。当用户单击添加按钮时,会显示另一个输入字段,他们可以根据需要创建尽可能多的输入字段。

我确实知道我应该循环遍历它,但我没有太多这样做的经验。请参阅下面的代码,该代码在 Jquery/Javascript 中添加动态行:

<script type="text/javascript">
$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

if(counter>10){
        alert("Only 10 textboxes allow");
        return false;
}

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Source Name #'+ counter + ' : </label>' +
      '<input type="text" placeholder ="Source Name" name="source_name' +         
counter +
      '" id="textbox' + counter + '" value="" > <label>IP address from #'+ 
counter + ' : </label>' +
      '<input type="text" placeholder="IP Address From" 
name="source_ip_from' + counter +
      '" id="textbox' + counter + '" value="" > <label>IP address till #'+ 
counter + ' : </label>' +
      '<input type="text" placeholder="IP Address Till" 
name="source_ip_till' + counter +
      '" id="textbox' + counter + '" value="" >'
      );


newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });

 $("#removeButton").click(function () {
if(counter==2){
      alert("No more textbox to remove");
      return false;
   }

counter--;

    $("#TextBoxDiv" + counter).remove();

 });

 $("#getButtonValue").click(function () {

var msg = '';
for(i=1; i<counter; i++){
  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
      alert(msg);
 });
});
</script>

下面的代码是在 HTML/PHP 中创建和发布表单的位置

<form method="post" class="form-inline" action="addverkeersstroom.php"> 
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Source Data : </label>
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"     
placeholder="Source" name="source_name">
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"     
placeholder="APP Nummer" name="source_app">
    <?php
  mysql_connect('localhost', '', '');
  mysql_select_db('');

  $sql = "SELECT * FROM zone";
  $result = mysql_query($sql);

    echo "<select name='zone_1' id='zone_1' class='form-control 
ip_or_zone'>";
echo "<option value=''></option>";
while ($row = mysql_fetch_array($result)) {

 echo "<option value='".   $row['idzone'] . "'>" . $row['zone_naam'] . " 
</option>";
  }
echo "</select>";

    ?>
     OR <input type="text" class="form-control ip_or_zone" placeholder="IP 
Address from" name="source_ip_from">
     <input type="text" class="form-control ip_or_zone" placeholder="IP 
Address till" name="source_ip_till">
     <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" 
placeholder="NAT IP" name="source_nat">
     <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" 
placeholder="Netmask" name="source_netmask">
</div>
</div>
<input type='button' value='+' id='addButton'>
<input type='button' value='-' id='removeButton'>

最后但并非最不重要的一点是,下面的代码应将其插入数据库。

<?php
session_start();

if(isset($_POST['submit'])) {   

echo $source_name = $_POST['source_name']; 
echo $source_app = $_POST['source_app'];
echo $source_zone = $_POST['zone_1'];   
echo $source_ip_from = $_POST['source_ip_from'];
echo $source_ip_till = $_POST['source_ip_till'];
echo $source_nat = $_POST['source_nat'];
echo $source_netmask = $_POST['source_netmask'];

echo $destination = $_POST['destination'];
echo $dest_app = $_POST['destination_app'];
echo $dest_zone = $_POST['zone_2']; 
echo $dest_ip_from = $_POST['dest_ip_from'];
echo $dest_ip_till = $_POST['dest_ip_till'];
echo $dest_nat = $_POST['destination_nat'];
echo $dest_netmask = $_POST['destination_netmask'];

  mysql_connect('localhost', '', '');
  mysql_select_db('');

//Maak een nieuwe verkeersstroom aan in de database
mysql_query("INSERT INTO verkeersstroom(changes_idchange, protocol, tcpudp, 
port_nr)
VALUES('".$changeid."', '".$protocol."', '".$tcpudp."', '".$portnr."')");
$verkeerstroomid = mysql_insert_id();

//Maakt de eigenschappen van de verkeersstroom aan
mysql_query("INSERT INTO verkeersstroom_eigenschappen(changes_idchange, 
verkeersstroom_idverkeersstroom, source_name, source_app, source_zone, 
source_ip_from, source_ip_till, source_nat, source_netmask, destination, 
destination_app, destination_zone, destination_ip_from, destination_ip_till, 
destination_nat, destination_netmask)
VALUES('".$changeid."', '".$verkeerstroomid."', '".$source_name."', 
'".$source_app."', '".$source_zone."', '".$source_ip_from."', 
'".$source_ip_till."', '".$source_nat."', '".$source_netmask."', 
'".$destination."', '".$dest_app."', '".$dest_zone."', '".$dest_ip_from."', 
'".$dest_ip_till."', '".$dest_nat."', '".$dest_netmask."')");

header("Location:"."");
}

提交后动态值如下:source_name2、source_ip_from2、source_ip_till2、destination2、dest_ip_from2、dest_ip_till2 并计算按加法 (+) 按钮生成的行数。

就像我之前说的,我需要像这样循环查询; foreach source_name(或source_name2或3,4等),source_ip_from,source_ip_till,目的地,dest_ip_from,dest_ip_till

将其单独插入表中,就像同一行中带有 2 的所有内容以及同一行中带有 3 的所有内容一样,然后像这样计数。

我希望有人能帮助我,这让我很头疼;-p

最佳答案

html 表单允许您为输入字段指定名称: <input type='text' name='name' value='22'>

如果您获得多个输入,但您不知道有多少。您可以通过更改 <input name='name'> 来创建输入字段的数组。至<input name='name[]'>

然后你可以在 php 中编写一个简单的 for 循环来处理数组:

<?php
$count = count($_POST['name']);
$name = $_POST['name'];
for($i = 0; $i < $count; $i++){
    // do your sql stuff with:
    $name[$i]; // this is the value of the inputfield number $i.
}
?>

我还建议研究使用准备好的语句。使用您当前的 php 代码,您很容易受到 SQL 注入(inject)的攻击。<​​/p>

<?php
$sql = "INSERT INTO verkeersstroom(`changes_idchange`, `protocol`, `tcpudp`, `port_nr`) 
VALUES( ?, ?, ?, ?);";
$stmt = mysql_connect('localhost', '', '')->prepare($sql);
$stmt->bind_param("ssss", $changeid, $protocol, $tcpudp, $portnr);
$stmt->execute;
?>

这是一个示例,更多内容请参见:http://php.net/manual/en/mysqli.quickstart.prepared-statements.php

关于javascript - 如何将动态添加的行存储到数据库mysql php中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44112735/

相关文章:

javascript - 在 if()else() 之前等待函数完成

jquery - 环回: POST an array of objects through ajax

javascript - 在 ASP 中隐藏 Html 特定值

php - 在 PHP 正则表达式中转义反斜杠 [\] 的正确方法?

php - 无法验证 Bootstrap 上的下拉菜单

php - StudentRegister.php 脚本在本地服务器中有效,但在托管服务器中无效

c# - 有条件地调用 JavaScript 函数

javascript - 如何根据两个数据属性值查找元素?

javascript - 在输入中存储 AngularJS 表达式结果

javascript - 如何选择所有可见的html