如何使用javascript在表单上添加更多文件

时间:2016-01-30 09:46:24

标签: javascript php html mysqli

我在他们的3个字段中创建了表单,有客户姓名,联系方式和电子邮件 假设如果点击提交按钮添加更多行,那么我们将如何做

<html> 
    <head> 
        </title></title> 
    </head> 
    <body> 
        <form action="insert_customer.php" method="post"> 
            <table id="addrow"> 
                <tr> 
                    <td>Customer Name:</td> 
                    <td>
                        <input type="text" name="cust_name">
                    </td> 
                    <td>Contact:</td> 
                    <td>
                        <input type="text" name="contact"> 
                    <td>Email</td> 
                    <td>
                        <input type="email" name="email">
                    </td> 
                </tr> 
            </table> 

            <script> 
            function addrow(){ } 
            </script> 
            <p> 
            <input type="submit" name="submit" value="submit"> 
            <input type="button"name="Addmore" value="Addmore"/> </p> 
        </form> 
    </body> 
</html>

2 个答案:

答案 0 :(得分:1)

Append您的addrow jquery.append()<html> <head> </title></title> </head> <body> <form action="insert_customer.php" method="post"> <table id="addrow"> <tr> <td>Customer Name:</td> <td> <input type="text" name="cust_name"> </td> <td>Contact:</td> <td> <input type="text" name="contact"> <td>Email</td> <td> <input type="email" name="email"> </td> </tr> </table> <p> <input type="submit" name="submit" value="submit"> <input type="button" id="add" name="Addmore" value="Addmore"/> </p> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $( "#add" ).click(function() { $("#addrow").append('<tr> <td>Customer Name:</td> <td><input type="text" name="cust_name"></td> <td>Contact:</td> <td><input type="text" name="contact"><td>Email</td> <td><input type="email" name="email"></td></tr> '); }); </script> </body> </html>

Customer Name

因为,您ContactEmailname多个值。因此,您必须使用array作为<html> <head> </title></title> </head> <body> <form action="insert_customer.php" method="post"> <table id="addrow"> <tr> <td>Customer Name:</td> <td> <input type="text" name="cust_name[]"> </td> <td>Contact:</td> <td> <input type="text" name="contact[]"> <td>Email</td> <td> <input type="email" name="email[]"> </td> </tr> </table> <p> <input type="submit" name="submit" value="submit"> <input type="button" id="add" name="Addmore" value="Addmore"/> </p> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $( "#add" ).click(function() { $("#addrow").append('<tr> <td>Customer Name:</td> <td><input type="text" name="cust_name[]"></td> <td>Contact:</td> <td><input type="text" name="contact[]"><td>Email</td> <td><input type="email" name="email[]"></td></tr> '); }); </script> </body> </html> 类型。如下所示。

<?php

// Write Your Databse Connection.

$custName = $_POST['cust_name'];
$custContact = $_POST['contact'];
$custEmail = $_POST['email'];

$totalCustomerName = sizeof($custName);

for($i=0;$i<$totalCustomerName;$i++) {

    $customerName = $custName[$i];
    $customerContact = $custContact[$i];
    $customerEmail = $custEmail[$i];

    $sql ="insert into customer_info(cust_name,contact,email)values('$customerName',$customerContact,'$customerEmail')"; 

    // Run your query here.

}

?>

根据用户的要求。

<强> insert_customer.php

function littleToBigEndian($little) {
  return implode(' ',array_reverse(explode(' ', $little)));
}

echo littleToBigEndian('E1 31 3C 01 00 00 9B');
// Output: 9B 00 00 01 3C 31 E1

答案 1 :(得分:0)

首先,您应该将onclick事件添加到addmore按钮,以便在用户点击时触发功能addrow()'

<input type="button" name="Addmore" value="Addmore" onclick='addrow()'/>

然后,您可以使用.innerHTML +=

将另一列附加到现有HTML元素

function addrow(){
    document.querySelector('#addrow tr').innerHTML += '<td>Address</td><td><input type="address" name="address"></td>';
} 
<form action="insert_customer.php" method="post"> 
  <table id="addrow"> 
    <tr> 
      <td>Customer Name:</td> 
      <td>
        <input type="text" name="cust_name">
      </td> 
      <td>Contact:</td> 
      <td>
        <input type="text" name="contact"> 
      <td>Email</td> 
      <td>
        <input type="email" name="email">
      </td> 
    </tr> 
  </table> 

  <p> 
    <input type="submit" name="submit" value="submit"> 
    <input type="button" name="Addmore" value="Addmore" onclick='addrow()'/> </p>