Fatal编程技术网
  • javascript/
  • Javascript 如何从带有多行的HTML表单中动态地将多行插入数据库？

Javascript 如何从带有多行的HTML表单中动态地将多行插入数据库？

javascript sql

Javascript 如何从带有多行的HTML表单中动态地将多行插入数据库？,javascript,sql,Javascript,Sql,这就是我的情况。我有一个表单，它允许用户向表单中添加任意数量的行，并使用javascript向新创建的行中输入更多数据。我已经在下面的代码中设置了这个，我正在使用index.html、js/scripts.js和一个php/upload.php文件，所有这些文件都是外部链接的，包括一个外部CSS： INDEX.HTML <html> <header> <link rel="stylesheet" href="style.css" type="text/css">

这就是我的情况。我有一个表单，它允许用户向表单中添加任意数量的行，并使用javascript向新创建的行中输入更多数据。我已经在下面的代码中设置了这个，我正在使用index.html、js/scripts.js和一个php/upload.php文件，所有这些文件都是外部链接的，包括一个外部CSS：

INDEX.HTML

<html>
<header>
<link rel="stylesheet" href="style.css" type="text/css">
 <script type="text/javascript" language="javascript" src="/jquery/js/jquery-1.9.1.js">   
</script>
<script src="http://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?
key=Gmjtd%7Cluua2q6bn9%2C8g%3Do5-lzbsh"></script>
<script type="text/javascript" src="js/scripts.js"></script>
 <title>Central Office Company Survey</title>
</header>
<body onload="get_company_name();">
<h1>Central Office Company Survey</h1>
<div id='map' style='width:0px; height:0px; position:absolute'></div>

<input type="hidden" id="co_city">
<input type="hidden" id="co_state">
<input type="hidden" id="co_zipcode">

<table>
<th>Company</th>
<th>CO Name</th>
<th>Get Current Location</th>
<th>Lat</th>
<th>Long</th>
<th>Address</th>
<tr>
    <td><select id="company_name"></select></td>
    <td><input id="co_name" type="text"></td>
    <td><input type="submit" value="Get GPS" onclick="gpslookup()"></td>
    <td><input id="co_lat" type="text"></td>
    <td><input id="co_long" type="text"></td>
    <td><input id="co_address" type="text"></td>
</tr>
</table>
<table id="tabledata">
<th>Select</th>
<th>Border Location Name</th>
<th>Cable Location</th>
<th>Direction of Vault Wall</th>
<th>Cable Type</th>
<th>Cable Size (pairs)</th>
<th>Cable Gauge</th>
<th>Vertical(s) appeared on Verticals</th>
<th>Approximate Number of Jumpers</th>
<th>Are Protectors Still In?</th>
<th>Metered Distance</th>
<th class="comments">Central Office Comments</th>
<!--Begin Rows-->
<tr>
    <td><input type="checkbox"></td>
    <td><input id="border_location" type="text" name="txt[]"></td>
    <td><input id="cable_location" type="text" name="txt[]"></td>
    <td><input id="vault_direction" type="text" name="txt[]"></td>
    <td><input id="cable_type" type="text" name="txt[]"></td>
    <td><input id="cable_size" type="text" name="txt[]"></td>
    <td><input id="cable_gauge" type="text" name="txt[]"></td>
    <td><input id="vertical" type="text" name="txt[]"></td>
    <td><input id="jumpers" type="text" name="txt[]"></td>
    <td><input id="protectors" type="text" name="txt[]"></td>
    <td><input id="metered_dist" type="text" name="txt[]"></td>
    <td><input id="comments" type="text" name="txt[]"></td>
</tr>
</table>
<input id="addrow_btn" type="submit" value="Add New Row" onclick="addRow(); return false;" />
<input id="delrow_btn" type="submit" value="Delete Row" onclick="deleteRow(); return false;" />
<input id="submit" type="submit" value="Submit" onclick="uploaddata(); return false;"  />
</body>
</html>
到目前为止，我的目标是，在已经准备好所有其他内容的情况下，能够根据表单中创建的行数循环遍历表单中的所有数据，并将所有这些新行值提交到SQL数据库中的单独行中。请告知

关注这个问题的HTML部分，这里有一种动态增长表单的方法：

首先是HTML：

<table id="tabledata">
    <thead>
        <th>Select</th>
        <th>Border Location Name</th>
        <th>Cable Location</th>
        <th>Direction of Vault Wall</th>
        <th>Cable Type</th>
        <th>Cable Size (pairs)</th>
        <th>Cable Gauge</th>
        <th>Vertical(s) appeared on Verticals</th>
        <th>Approximate Number of Jumpers</th>
        <th>Are Protectors Still In?</th>
        <th>Metered Distance</th>
        <th class="comments">Central Office Comments</th>
    </thead>
    <tbody id="input"></tbody>
    <tbody id="template">
        <tr>
            <td><input name="selected" type="checkbox" /></td>
            <td><input name="border_location" type="text" /></td>
            <td><input name="cable_location" type="text" /></td>
            <td><input name="vault_direction" type="text" /></td>
            <td><input name="cable_type" type="text" /></td>
            <td><input name="cable_size" type="text" /></td>
            <td><input name="cable_gauge" type="text" /></td>
            <td><input name="vertical" type="text" /></td>
            <td><input name="jumpers" type="text" /></td>
            <td><input name="protectors" type="text" /></td>
            <td><input name="metered_dist" type="text" /></td>
            <td><input name="comments" type="text" /></td>
        </tr>
    </tbody>
</table>
<button id="ActionAddRow">Add Row</button>
<button id="ActionSubmit">Submit</button>
然后这个CSS：

tbody#template {
    display: none;
}
产生这个

下面是正在发生的事情的细目。首先，table元素可以定义多个实体，因此我添加了一个空输入行的HTML，并用CSS将其隐藏在一个ID为template的tbody中。然后，使用JavaScript定义一个简单的函数，将该行的内容附加到带有输入ID的tbody，并将该函数绑定到按钮的click事件。然后，因为输入tbody开始时是空的，所以我调用该函数一次。然后，为了提交表单，我选择输入tbody的所有行，并迭代在其中找到的输入。接下来，我将它们组合到一个大型JavaScript对象数组中，每个元素代表一行，最后我发布了一篇文章，展示了数据从客户端到服务器的往返过程，我使用JSON2.js来序列化数据。您的PHP页面将从这里开始在服务器上检查它们，并使用准备好的语句将有效行插入数据库

您的PHP将采用如下方式发布的值：

$value = json_decode($_POST['json']);

{Success: true}
并将提交的数据视为关联数组。这种方法使用AJAX表单Post，因此PHP页面的响应应该是一个有效的JSON，其结构如下：

$value = json_decode($_POST['json']);

{Success: true}
看看你的HTML，我不会用ID来区分输入，这就是name属性的含义。你必须按照@JasonSperske告诉你的去做：使用name属性，否则你什么都得不到。这里有一种方法来组织这个问题：而且-你看起来对SQL注入非常开放。这个问题有很多移动的部分，也许你应该把它分解成一组更具体的问题。我编辑了我最初的帖子，因此，您可以更好地了解我的工作内容。。非常感谢你的时间和帮助。不管你在上面做了什么，由于某种原因，我都无法使用我所拥有的，我甚至尝试用内部脚本和css创建一个html文件。我是一名初级开发人员，在过去的几个月里刚刚了解了所有这些，对SQL和jquery以及javascript来说都是新手。我想我的下一个问题是，这件事解决后，是如何在php中创建准备好的语句，以迭代所有行并将值提交到新的单独行SQL中。我更新了我的答案，以显示如何将输入的数据组合到单个HTTP POST中，然后如何从php读回php变量。仍然不起作用…=/根据您所做的，我有最基本的设置，当我尝试实现它时，它将不起作用。这些行根本不会添加。我在头文件中运行js/scripts.js，而JSFIDLE在加载事件中运行它。。为什么当我在头文件中链接到我的js文件时它不起作用？@Jason Sperske嘿Jason，你就是那个人。我在stackoverflow.com上看到了很多关于这个主题的解决方案，花了很长时间才最终到达这里，好吧，也许我做了错误的查询，但是主题是在文章中。超级冷却模板行：-。代码是如此的干净，并且在我现在还没准备好的时候非常有意义。对于像我这样的新手来说，值得指定$.post'/echo/json/'是用于模拟的JSFIDLE特性 
{Success: true}