Question

我正在努力弄清楚如何使用$clone方法。我这样做的方式很简单，但我的导师告诉我要研究$clone方法。但我没有成功实施它，所以我来了一点帮助。

https://jsfiddle.net/Krichukz/6uy0f3xa/5/

按下按钮克隆时的预期结果。克隆前的前两个字段：

myinputs[0][first_name]
myinputs[0][last_name]

按克隆按钮后，四个字段：

myinputs[0][first_name]
myinputs[0][last_name]
myinputs[1][first_name]
myinputs[1][last_name]

＆＃13;

    $(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = '<div><input type="text" name="myinputs[][first_name]" value=""/><a href="javascript:void(0);" "/></a><input type="text" name="myinputs[][last_name]" value=""/><a href="javascript:void(0);" /></a></div> ';
       
        var x = 1; //Initial field counter is 1
        $(addButton).click(function(){ //Once add button is clicked
            if(x < maxField){ //Check maximum number of input fields
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); // Add field
            }
        });
        $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="html_pdf.php">
    <div class="field_wrapper">
        <div>
            <input type="text" name="myinputs[0][first_name]">
            <input type="text" name="myinputs[0][last_name]"><br>

            <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png" alt="+ Add"/></a>
        </div>
    </div>
<input type='submit' value='submit' name="submit" id='submit'>
</form>

＆＃13;

我想它需要在数组中，所以我可以将这些值推送到数据库中。

Answer 1

您不能包含myinputs[][first_name]字段名称，必须是myinputs[1][first_name]或myinputs[first_name][]。如果使用空方括号，则它们应始终位于名称的末尾。

以下是包含更新名称（如myinputs[first_name][]）的更新示例。要查看如何在PHP后端格式化POST，请使用print_r($_POST)

＆＃13;

$(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = '<div><input type="text" name="myinputs[first_name][]" value=""/><a href="javascript:void(0);" "/></a><input type="text" name="myinputs[last_name][]" value=""/><a href="javascript:void(0);" /></a></div> ';
       
        var x = 1; //Initial field counter is 1
        $(addButton).click(function(){ //Once add button is clicked
            if(x < maxField){ //Check maximum number of input fields
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); // Add field
            }
        });
        $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="https://requestbin.fullcontact.com/u1ylwbu1">
    <div class="field_wrapper">
        <div>
            <input type="text" name="myinputs[first_name][]">
            <input type="text" name="myinputs[last_name][]"><br>

            <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png" alt="+ Add"/></a>
        </div>
    </div>
<input type='submit' value='submit' name="submit" id='submit'>
</form>

＆＃13;

PHP克隆方法

1 个答案: