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

Adding multiple textboxes using plus button and submit through PHP

本文关键字:提交 PHP 文本 按钮 添加      更新时间:2023-09-26

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

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

示例:

最初,只有一个文本框。当用户单击+按钮并已填充第一个字段时,将出现第二个文本框,同时还会出现一个用于删除文本框的-按钮。当用户单击提交时,文本框中的值将通过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>

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

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/

您可以将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演示