如何使用AJAX或PHP在數據庫中存儲添加更多文本框的數據

Question

我已經使用Jquery / JavaScript創建了一個動態文本框。 用戶可以單擊添加更多按鈕JavaScript將添加另一個輸入框，用戶可以在其中輸入一些數據。

問題：-JavaScript正常運行，但是我無法理解如何在數據庫中存儲這些數據。 我需要有關php或Ajax的幫助才能將這些用戶數據傳遞到數據庫。 以下是我要傳遞的參數

1. 酒店編號
2. 取消編號
3. （動態用戶數據）++ 1

以下是提及我的代碼。

JavaScript的：-

 <script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length; 
                var newNum  = new Number(num + 1);     
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
                <!--  newElem.children(':first').attr('id', 'from' + newNum).attr('name', 'from' + newNum); -->
                $('#from1').attr('id', 'from' + newNum).attr('name', 'from' + newNum);
                $('#to1').attr('id', 'to' + newNum).attr('name', 'to' + newNum);
                $('#rate1').attr('id', 'rate' + newNum).attr('name', 'rate' + newNum);
                $('#input' + num).after(newElem);
                $('#btnDel').attr('disabled','');
            });
            $('#btnDel').click(function() {
                var num = $('.clonedInput').length; 
                $('#input' + num).remove();    
                $('#btnAdd').attr('disabled','');
                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');
            });
            $('#btnDel').attr('disabled','disabled');
        });
        $(document).ready(function() {
            $('#sub').click(function() {

            var from1=$("#from1").val();
            var to1=$("#to1").val();
            var rate1=$("#rate1").val();
            var from2=$("#from2").val();
            var to2=$("#to2").val();
            var rate2=$("#rate2").val();

             var num = $('.clonedInput').length; //number of times clicked

            $( "p" ).html( "<b>Single:</b> " + from1+ to1+rate1+ from2+ to2+rate2);
            $( "p" ).html("number"+num);

            })
            });
    </script>

HTML代碼：-

<form id="myForm">
    <tr id="input1" style="margin-bottom:4px;" class="clonedInput">
        <td> <input type="text" name="hotel_id" id="1" /></td>
        <td> <input type="text" name="from1" id="from1" /></td>
        <td> <input type="text" name="to1" id="to1" /></td>
        <td> <input type="text" name="rate1" id="rate1" /></td>
        <td><input type="button" id="btnDel" value="remove name" /></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <div>
    <tr><td></td><td></td>
       <td> <input type="button" id="btnAdd" value="add another name" />&nbsp;<input type="button" id="sub" value="submit" /></td>

    </tr>
    </div>
</form>

請在這件事上給予我幫助...

Answer 1

我會做的是

首先將所有自定義輸入命名為相同的名稱，例如“ custom1”，然后讓您的javascript每次將最后一個數字增加一個，例如“ custom2”，“ custom3”，依此類推。

然后，我將在我的php腳本中進行循環，檢查“ custom1”上是否為empty（），並每次增加該數字，如果隨后出現空，則表示已到達末尾，這意味着您可以退出環。 然后，您便擁有了所有值，可以將其插入到任何位置。

我將嘗試在下面向您展示一些示例代碼。

 for ($x=1; $x=0; $x++) {
  if (!empty($_POST["custom".$x]) {
    //The user have this custom field, and type something in it.
  } else {
    //This is the end of the custom fields.
    $x=0;
  }
 }