Question

我需要使用plus按钮添加多个文本框，然后使用Javascript将minus按钮删除。

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

示例：

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

我的代码：

<?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>

Answer 1

您可以合并jQuery PLUS AJAX以实现相同目标。

示例：

  <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

Answer 2

注意：如问题中所述，用户必须在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); } }); }中输入文字才能显示另一个文字。

EED = current simulation time - creation  time of packet

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

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

2 个答案: