I am trying to succeed with populating dynamically generated form fields from a database via xmlhttp. First row is "static" and when I type in the SKU-field the name[] field gets the data correct from the database. When I click the "#addrow" button a new row is added and here I want to be able to type in the SKU-field and have the name[] field get data from the database. Right now what happens is that the row above gets updated when I type in the SKU-field.
I have added data-attributes for the SKU-field and name-field and also a counter so I somehow could select the field data-names and from this be able to parse the value to the right name-field in the right row?
I have tried to add a variable and see if I can get this to parse the database value to the right name-field, but it does not work:
var field = "name" + $(this).attr("data-dynid");
field.value = myObj[0];
I just need to figure out how to have the code recognize which SKU-field I am typing in (with the data-attribute counter) and from the counter select the name-field with the same counter value.
*** UPDATE ****
So I found a way to locate a form field from data-attribute and assign a value to it. Now I need to figure out how to have the code recognize the SKU field I am typing in, in order to retreive the SKU data-attribute number and use this dynamically to locate the form field to parse the data to.
var elements = document.querySelectorAll('[data-dynname="name-1"]');
elements[0].value = myObj[0];
HTML
<form method="post" action="">
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="row">
<div class="form-group col-md-2">
<label class="form-control-label" for="sku">Varenummer</label>
<input type="text" class="form-control searchInput" name="sku[]" placeholder="Varenummer" autocomplete="off" onkeyup="GetDetail(this.value)" value="">
</div>
<div class="form-group col-md-4">
<label class="form-control-label" for="name">Navn</label>
<input type="text" class="form-control name" name="name[]" placeholder="Navn" autocomplete="off">
</div>
<div class="form-group col-md-2">
<label class="form-control-label" for="content">Tekst</label>
<input type="text" class="form-control" name="text[]" placeholder="Tekst" autocomplete="off">
</div>
<div class="form-group col-md-1">
<label class="form-control-label" for="normalprice">Normalpris</label>
<input type="text" class="form-control" name="beforeprice[]" placeholder="Normalpris" autocomplete="off">
</div>
<div class="form-group col-md-1">
<label class="form-control-label" for="offerprice">Tilbudspris</label>
<input type="text" class="form-control" name="offerprice[]" placeholder="Tilbudspris" autocomplete="off">
</div>
<div class="form-group col-md-1">
<label class="form-control-label" for="size">Størrelse</label>
<select class="form-control" name="size[]" placeholder="Størrelse" autocomplete="off">
<option value="A4" selected="">A4</option>
<option value="A5">A5</option>
<option value="A10">A10</option>
</select>
</div>
<div class="form-group col-md-1">
<label class="form-control-label" for="removeRow"> </label>
<button id="removeRow" type="button" class="form-control btn btn-danger">Fjern</button>
</div>
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add Row</button>
</div>
</div>
</form>
Javascript
<script type="text/javascript">
// add row
var counter = 1;
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow">';
html += '<div class="row">';
html += '<div class="form-group col-md-2">';
html += '<input type="text" class="form-control searchInput" data-dynid ="' + counter + '" name="sku[]" placeholder="Varenummer" autocomplete="off" onkeyup="GetDetail(this.value)">';
html += '</div>';
html += '<div class="form-group col-md-4">';
html += '<input type="text" class="form-control name" data-dynname ="name-' + counter + '" name="name[]" placeholder="Navn" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-2">';
html += '<input type="text" class="form-control" name="text[]" placeholder="Tekst" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-1">';
html += '<input type="text" class="form-control" name="beforeprice[]" placeholder="Normalpris" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-1">';
html += '<input type="text" class="form-control" name="offerprice[]" placeholder="Tilbudspris" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-1">';
html += '<input type="text" class="form-control" name="size[]" placeholder="Størrelse" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-1">';
html += '<button type="button" class="form-control btn btn-danger removeRow">Fjern</button>';
html += '</div>';
html += '</div>';
html += '</div>';
$('#newRow').append(html);
counter++;
console.log(counter);
});
// remove row
$(document).on('click', '.removeRow', function () {
$(this).closest('#inputFormRow').remove();
});
</script>
<script>
// onkeyup event will occur when the user
// release the key and calls the function
// assigned to this event
function GetDetail(str) {
if (str.length == 0) {
document.getElementsByName("first_name")[0].value = "";
return;
}
else {
// Creates a new XMLHttpRequest object
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
// Defines a function to be called when
// the readyState property changes
if (this.readyState == 4 &&
this.status == 200) {
// Typical action to be performed
// when the document is ready
var myObj = JSON.parse(this.responseText);
// Returns the response data as a
// string and store this array in
// a variable assign the value
// received to first name input field
//var el = document.getElementsByName('name[]')[0];
//var el = document.getElementsByClassName("name");
//var r2 = console.log(el).closest("name[]");
document.getElementsByName("name[]")[0].value = myObj[0];
//r2.value = myObj[0];
}
};
// xhttp.open("GET", "filename", true);
xmlhttp.open("GET", "pages/actions/load-products.php?user_id=" + str, true);
// Sends the request to the server
xmlhttp.send();
}
}
</script>