javascript - 将数组文本框添加到 jquery 并传递给 ajax 并添加到数据库

Question

我想要一个数组文本框，它将传递给 jquery 并传递给 ajax 以存储在数据库中。

文本框数组将传递给 jquery 函数，然后它将发送到 ajax 到另一个页面以存储在数据库中

   <div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div class="row">
      <div class="col-sm-8">
        <input type="text" name="mytext[]" id="personnel[]" style="padding:6px; border-radius:4px; border: none; width:400px;" placeholder="Add Name">
      </div>
    </div>

预习

<script type="text/javascript">
$(document).ready(function() {
    var max_fields    = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button    = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]" id="personnel[]"  style="padding:6px; border-radius:4px; border: none; width:400px; margin-top:5px;" placeholder="Add Name"><a href="#" class="remove_field"><button class="btn btn-sm btn-primary">Remove</button</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

function preview(){
  var personnel = $('#personnel').val();

$.ajax({url: "travel_preview.php", data: { personnel:personnel }, type: "POST", success: function(result){
           $('#myPreview').modal("show");
           $('.preview_details').html(result);

           }});

}
</script>

标签： javascriptphpjquery

Answer 1

您可以使用.map检索所有数组输入数据，如下所示。

注意：添加字段并输入您想要的值，然后单击GET DATA按钮在控制台中打印值

$(document).ready(function() {
    var max_fields    = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button    = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]" id="personnel[]"  style="padding:6px; border-radius:4px; border: none; width:400px; margin-top:5px;" placeholder="Add Name"><a href="#" class="remove_field"><button class="btn btn-sm btn-primary">Remove</button</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

function preview(){
  //var personnel = $('#personnel').val();
  var personnel = $("input[name='mytext[]']")
              .map(function(){return $(this).val();}).get();
  
  console.log(personnel);

$.ajax({url: "travel_preview.php", data: { personnel:personnel }, type: "POST", success: function(result){
           $('#myPreview').modal("show");
           $('.preview_details').html(result);

           }});

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
     <button type="button" onclick="preview()"> GET DATA </button>
    <button class="add_field_button">Add More Fields</button>
    <div class="row">
      <div class="col-sm-8">
        <input type="text" name="mytext[]" id="personnel[]" style="padding:6px; border-radius:4px; border: none; width:400px;" placeholder="Add Name">
      </div>
    </div>