Adding multiple textboxes using plus button and submit through PHP

Question

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

After user fills up all the fields and clicks the submit button, I need to fetch all value using 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.

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>

Possible duplicate of [Adding input elements dynamically to form](http://stackoverflow.com/questions/14853779/adding-input-elements-dynamically-to-form) — mitkosoft, May 14 '16 at 13:28

score 1 · Answer 1 · answered May 14 '16 at 14:18

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/

Jenson M John · Answer 2 · 2016-05-14T14:15:29.330

You can combine jQuery PLUS AJAX to achieve the same.

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

Adding multiple textboxes using plus button and submit through PHP

2 Answers2