Question

您好我根据输入的数量使用javascript动态创建了一些文本框。我想将该文本框值保存到mysql数据库。我是javascript的新手。提前谢谢。

这是我的代码：

    <script>

   function add_col()
   {
   var num_box = document.getElementById("num_text").value;
   if(num_box)
   {
   for(var i=0; i<num_box; i++)
   {


   var tableName1 = document.getElementById("uTable");

   var newTR1 = document.getElementById("tr1");

   var newName1 = document.createElement("TD");

   newName1.innerHTML = "<input type='text'  name='site' id='site' value='cell value'>";

   var newTR2 = document.getElementById("tr2");

   var newPhone1 = document.createElement("TD");

   newPhone1.innerHTML = "<input type='text'  name='cell' id='cell' value='site value'>";


   newTR1.appendChild(newName1);

   newTR2.appendChild(newPhone1);

   tableName1.appendChild(newTR1);
   tableName1.appendChild(newTR2);


    document.form1.reset()



    }

   }

   }
   </script>


    <form name="form1" id="form1" method="post">

        <p>
          <input type="text" name="num_text" id="num_text"/>
          <input type="button" name="Submit" value="INPUT" onclick="add_col();" />
        </p>
        <p>&nbsp;</p>
        <table  id="uTable"width="183" border="0">
          <tr id="tr1">
            <td>Name</td>

          </tr>
          <tr id="tr2">
            <td>Phone</td>

          </tr>

      </table>
        <input type="submit" name="Submit2" value="Insert"  />
    </form>

Answer 1

您可以为输入字段使用数组。这样你可以使用name ='cell []'和name ='site []'之类的东西然后将数组传递给服务器。您也可以查看jquery来帮助您使用javascript。只是让它更干净，更容易使用javascript。

我也可能放弃使用桌子。查看定义列表。此链接将有助于： http://www.maxdesign.com.au/articles/definition/添加或删除元素会更容易。

Answer 2

您需要做的是在输入名称上使用[] - 以便将整个数组传递到服务器端：

newName1.innerHTML = "<input type='text'  name='site[]' id='site' value='cell value'>";
newPhone1.innerHTML = "<input type='text'  name='cell[]' id='cell' value='site value'>";

您还需要在html中指定提交目标：

<form name="form1" id="form1" method="post" target="myscript.php">

然后在服务器端程序中，您可以访问提交值的数组。您没有指定您正在使用的服务器端技术;假设，它是PHP，你提交表单，你会做这样的事情：

$sites = $_POST['site'];
$cells = $_POST['cell'];
if(count($sites) != count($cells))
{
    // error - number of values don't match
}
elseif(count($sites) == 0)
{
    // no data to insert
}
else
{
    $cnt = count($sites);
    for($i=0; $i<$cnt; $i++)
    {
        //insert into the table pairs ($sites[$i] - $cells[$i])
    }
}

Answer 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

<script type="text/javascript">
function addElement() {
    var ni = document.getElementById('myDiv');
   // var numi = document.getElementById('theValue');
   // var num = document.getElementById('theValue').value;
   var a = '';
 for(var i = 1; i <= 3; i++)
 {
    a += '<input type="text"  name="TextBox'+i+'" value="TextBox'+i+'" >';    

    }
    ni.innerHTML = a;
    ni.appendChild(ni);
}
</script>

<title>Untitled Page</title>
</head>
<body>
  <form id="form1" runat="server">

      <div id="myDiv">
      </div>
      <input type="button" id="btnOfficial" value="Add Another TextBox" onclick="addElement();" />
      <input type="hidden" value="1" id="theValue" />

  </form>
</body>
</html>

使用javascript动态创建文本框并将该文本框值插入mysql

3 个答案: