Question

我有一个html表单，用户需要输入他们办公室的名称和地址。办公室的数量是动态的。

我想添加添加更多按钮，以便用户可以输入任意数量的办事处的详细信息。

我的问题是，我如何创建一个输入数组，其中可以使用JavaScript添加和删除新元素。目前，我正在使用js clone方法，但我想要一个数组，以便可以使用Laravel轻松验证输入数据并将其存储到数据库。

我目前在做什么.. 这是我的HTML表单，用户必须输入他们的诊所或办公室的地址。每当添加新诊所时，我都会使用隐藏的输入字段并增加该字段的值，以便我可以使用循环来存储数据。

<div class="inputs">
    <label><strong>Address</strong></label>
    <input type="text" class="hidden" value="1" id="clinicCount" />
    <div id="addresscontainer">
        <div id="address">
            <div class="row" style="margin-top:15px">
                <div class="col-md-6">
                    <label><strong>Clinic 1</strong></label>
                </div>
                <div class="col-md-6">
                    <button id="deleteclinic" type="button" class="close deleteclinic" 
                    onclick="removeClinic(this)">&times;</button>
                </div>
            </div>
            <textarea name="address1" placeholder="Enter Clinic Address" class="form-control"></textarea>
            <label class="text-muted" style="margin-top:10px">Coordinates (Click on map to get coordinates)</label>
            <div class="row">
                <div class="col-md-6">
                    <input class="form-control" id="latitude" type="text" name="latitude1" placeholder="Latitude" />
                </div>
                <div class="col-md-6">
                    <input class="form-control" id="longitude" type="text" name="longitude1" placeholder="Longitude" />
                </div>
            </div>
        </div>
    </div>
</div>
<div class="text-right">
    <button class="btn btn-success" id="addclinic">Add More</button>
</div>

我的js代码..

function numberClinic(){
    //alert('test');
    var i=0; 
    $('#addresscontainer > #address').each(function () { 
        i++;
        $(this).find("strong").html("Clinic " + i);
        $(this).find("textarea").attr('name','name'+i);
        $(this).find("#latitude").attr('name','latitude'+i);
        $(this).find("#longitude").attr('name','longitude'+i);
    });
}
$("#addclinic").click(function(e){
    e.preventDefault();
    $("#addresscontainer").append($("#address").clone());
    numberClinic();
    $("#addresscontainer").find("div#address:last").find("input[name=latitude]").val('');
    $("#addresscontainer").find("div#address:last").find("input[name=longitude]").val('');

    $("#clinicCount").val(parseInt($("#clinicCount").val())+1);
});

function removeClinic(address){
    if($("#clinicCount").val()>1){
        $(address).parent('div').parent('div').parent('div').remove();
        $("#clinicCount").val(parseInt($("#clinicCount").val())-1);
    }
    numberClinic();
}

这样，我认为我可以将数据存储到数据库但无法验证数据。我正在使用laravel框架。

Answer 1

您可以这样做的一种方法是使用父项中输入的位置作为数组中的索引，然后在每次更改每个输入时将值保存在数组中。然后你可以添加和删除输入。

示例代码：

var offices = document.getElementById('offices');
var output = document.getElementById('output');
var data = [];
var i = 0;

document.getElementById('add').addEventListener('click', function() {
  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('placeholder', 'Office');
  var button = document.createElement('button');
  var index = i++;
  input.addEventListener('keyup', function() {
    for (var i = 0; i < offices.children.length; i++) {
      var child = offices.children[i];
      if (child === input) {
        break;
      }
    }
    // i is now the index in the array
    data[i] = input.value;
    renderText();
  });
  offices.appendChild(input);
});

document.getElementById('remove').addEventListener('click', function() {
  var children = offices.children;
  if (children.length === data.length) {
    data = data.splice(0, data.length - 1);
  }
  offices.removeChild(children[children.length - 1]);
  renderText();
});

function renderText() {
  output.innerHTML = data.join(', ');
}

JSFiddle：https://jsfiddle.net/94sns39b/2/

一组html输入

1 个答案: