html入力の配列

Question

私は自分のオフィスの名前と住所を入力する必要があるhtmlフォームを持っています。オフィスの数は動的です。

ボタンを追加すると、ユーザーは任意の数のオフィスの詳細を入力できます。

私の質問は、JavaScriptを使用して新しい要素を追加したり削除したりするための入力配列を作成する方法です。現在、jsクローンメソッドを使用していますが、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

これを行う方法の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/