динамическая форма добавить / удалить поле - PullRequest
Новая
       43

динамическая форма добавить / удалить поле

0 голосов
/ 16 ноября 2018

Я пытаюсь создать форму, которая может динамически добавлять / удалять входные данные. Я могу создать новую строку, нажав кнопку, но когда я передаю значение на другую страницу, мой ввод, кажется, не собирается.

Это код 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(e){
            //var               
            var x = 1;

            //add
            $("#add").click(function(e){
                x++;
                var mark = '<tr><td width="200" height="30" align="center">'+x+'</td><td width="200" height="30" align="center"><input type="text" name="item_name[]" /></td><td width="200" height="30" align="center"><input type="text" name="item_fact[]" /></td><td width="200" height="30" align="center"><input type="text" name="item_desc[]" /></td><td width="200" height="30" align="center"><input type="text" name="item_amount[]"/></td><td width="200" height="30" align="center"><input type="text" name="item_price[]" /></td><td width="200" height="30" align="center"><a herf="#" id="remove" class="button">X</a></td></tr>';
                $("#dynamic_field").append(mark);
            });
            //remove
            $("#dynamic_field").on('click','#remove', function(e){
                $(this).closest('tr').remove();
                x--;
            });
        });
    </script>

Это HTML-код 

<tr id="container">
    <td width="200" height="30" align="center">1</td>
    <td width="200" height="30" align="center"><input type="text" name="item_name[]"/></td>
    <td width="200" height="30" align="center"><input type="text" name="item_fact[]"/></td>
    <td width="200" height="30" align="center"><input type="text" name="item_desc[]"/></td>
    <td width="200" height="30" align="center"><input type="text" name="item_amount[]"/></td>
    <td width="200" height="30" align="center"><input type="text" name="item_price[]"/></td>
    <td width="200" height="30" align="center"><a herf="#" id="add" class="button">Add more</a></td>
</tr>

Когда значение print_r передается, вводится только ввод HTML. 

item_name => Array ( [0] =>test 1)

1 Ответ

0 голосов
/ 16 ноября 2018 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(e){

            var x = 1; //for row count

            //add more button click 
            $("#add").click(function(e){
                 x++;

// строка html, которая добавляется при добавлении еще нажмите
var mark = '' + x + 'X'; 

             $("#mt tr:last").after(mark); //add the row after the last existing tr 

            });
            //code for X click
            $("#mt").on('click','#remove', function(e){
               //remove the current row
                $(this).closest('tr').remove();
                x--;
            });




        });
    </script>


 <table id="mt">
 <tr id="container">

                <td width="200" height="30" align="center">1</td>
                <td width="200" height="30" align="center"><input type="text" name="item_name[]"/></td>
                <td width="200" height="30" align="center"><input type="text" name="item_fact[]"/></td>
                <td width="200" height="30" align="center"><input type="text" name="item_desc[]"/></td>
                <td width="200" height="30" align="center"><input type="text" name="item_amount[]"/></td>
                <td width="200" height="30" align="center"><input type="text" name="item_price[]"/></td>
                <td width="200" height="30" align="center"><a href="javascript:void(0)" id="add" class="button">Add more</a></td>

    </tr>

</table>
...