使用加号按钮添加多个文本框并通过PHP提交

I need to add multiple textboxes using a plus button and remove them using a minus button using Javascript.

我需要使用加号按钮添加多个文本框,并使用Javascript删除它们。

After user fills up all the fields and clicks the submit button, I need to fetch all value using PHP.

用户填写所有字段并单击提交按钮后,我需要使用PHP获取所有值。

Example:

Initially, there will only be 1 textbox. When user clicks on + button and already filled up the first field, the a second textbox will appear and also a - button used to remove the textbox. When a user clicks submit, the value in the textboxes will be submitted through PHP.

最初,只有1个文本框。当用户点击+按钮并且已经填满第一个字段时,将出现第二个文本框,并且还会显示一个 - 用于删除文本框的按钮。当用户单击“提交”时,文本框中的值将通过PHP提交。

My code:

<?php
    if(isset($_POST["userbtnsubmit"])){
    }
?>

<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
    <input type="text" name="country" id="con" class="form-control oditek-form" placeholder="Add Country">
    <input type="button" class="btn btn-success" name="plus" id="plus" value="+">
    <input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
    <button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</form>

2 个解决方案

#1

You can combine jQuery PLUS AJAX to achieve the same.

您可以结合使用jQuery PLUS AJAX来实现相同的功能。

Example :

  <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function(){

        $( "#plus" ).on("click", function() {

            $( "#frmfeed" ).append( '<input type="text" name="country[]" class="form-control oditek-form" placeholder="Add Country"/>');

        });

        $("#minus").on("click", function(){

           if($("input[name='country[]']").length > 1)
           {
              $("input[name='country[]']:eq("+(length-1)+")").remove();
           }

        });

        $("#btnsubmit").on("click", function(){

            var countries = []; 
            $("input[name='country[]']").each(function(){

                countries.push($(this).prop("value"));

            });

            console.log(countries);

            //AJAX Post Data To Your Server

            var postDataObj = {
                            url: "YOUR_SERVER_FILE",
                            type: "post",
                            data: countries,
                            success: function(data){
                               //Response Data From Server
                            }
            }
            console.log(postDataObj);       

            $.ajax(postDataObj);



        });

    });
    </script>
    </head>
    <body>


     <form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
       <input type="text" name="country[]" id="con" class="form-control oditek-form" placeholder="Add Country"><br/><br/>
    </form>

    <input type="button" class="btn btn-success" name="plus" id="plus" value="+"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
    <button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>




    </body>
    </html>

JSFiddle Demo

#2

Note: As stated in the question, the user must type text in an input before another can be be shown.

注意:如问题中所述,用户必须在输入中键入文本才能显示另一个。

addRemoveAnother('#plus', '#minus', '#con', '#counter', 3);

function addRemoveAnother(plusBtn, minusBtn, target, counter, limit) {
    var i, ii = $(counter).val();
    for(i = 0; i <= limit; i++) {
        if (i != ii) {
            $(target+i).hide();
        }
    }
    $(plusBtn).click(function() {
        ii = $(counter).val();
        if ($(target+ii).val() != '') {
            ii++;
            if (ii <= limit) {
                $(target+ii).show();
                $(counter).val(ii);
            }    
        }
    });
    $(minusBtn).click(function() {
        ii = $(counter).val();
        if (ii > 1) {
            $(target+ii).val('');
            $(target+ii).hide();
            ii--;
            $(counter).val(ii);
        }
    });
}

https://jsfiddle.net/curtisweeks/k4kanw6L/

#1