2011-08-18 47 views
0

嗨,我已经创建了一些文本框动态使用javascript根据输入的数量。 我想将该文本框的值保存到mysql数据库。我对javascript很新颖。提前致谢。使用JavaScript动态创建文本框,并将该文本框的值插入到MySQL

这里是我的代码:

<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> 

回答

0

你可以用你的输入字段的数组。这样你就可以拥有像name ='cell []'和name ='site []'的东西,然后将数组传递给服务器。你也可能想看看jQuery来帮助你与JavaScript。只是使它更清洁和易于使用JavaScript。

我也许会放弃使用表格。检查定义列表。此链接将有所帮助: http://www.maxdesign.com.au/articles/definition/添加或删除元素会更容易。

0

你需要做的是在输入名称使用[] - 使整个数组被传递到您的服务器端:

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]) 
    } 
} 
0
<!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>