<div class= "button">
<button id="More" type="submit">Add Parameter</button>
<button id="Last" type="submit">Remove Parameter</button>
<button class="Manual" id="Manual" type="submit">Manually Enter </button>
</div>
</br>
<!--WHERE USER WILL INPUT WHICH VARIABLES TO READ,-->
<form action="/output3" method="post" id="parameter" >
<div2 id="Entire">
<div class="fieldBlock1" id="Original">
<fieldset style="width:215px;">
<legend>Parameter</legend>
<label >Parameter Name: </label>
<select id="name" name="name" required>
</select> </br> </br>
<label >Address: </label>
<select class= "address" type=text id="address" name="address" style="width:14em;" required>
</select> </br> </br>
<label >Data Size: </label> </br>
<select type=text id=sizeSelect name="size"style="width: 14em;" required>
</select> </br> </br>
<label >Write Data: </label> </br>
<input class="data" type=text id= "data" name="data" style="width: 14em;"> </input> </br></br>
</fieldset>
</div>
</div2>
Script-
//PUTTING A CAP ON PARAMETERS TO 10, CAN CHANGE CAP
$('#More').on('click', function(){
if (count==11) {
}
else {
//WILL APPEND THIS IF ADD PARAMETERS IS CLICKED
$("#Entire").append("<div class='fieldBlock' id='div'><fieldset><legend>Parameter</legend><label >Parameter Name: </label><select class= 'name' id='name' name='name' required></select></br></br><label >Address: </label><select class= 'address' type=text id='address' name='address' required></select></br></br><label >Data Size: </label> </br><select class= 'size' type=text id='sizeSelect' name='size' required></select> </br> </br><label >Write Data: </label> </br><input type=text id='data' name='data' class='data' style='width: 14em;'></br></br></fieldset></div>");
count++;
}
});
if (file && file.length) {
//FILE IS SPLIT BY COMMAS
results = file.split(",");
//WILL RESET OPTIONS IF NEW FILE IS UPLOADED
$('select').children().remove();
//ITERATE THROUGH THE FILE TO PUT PROPER PARTS IN SELECT OPTIONS
//IF FILE IS FORMATTED DIFFERENTLY THEN THIS PART WILL HAVE TO CHANGE
for (var i = 1; i < results.length; i=i+8) {
if(typeof results[i+6] !== 'undefined') {
$("select[name='name']").each(function() {
$(this).append("<option val='"+ results[i+6] +"' address='"+ results[i] +"' sizeSelect='"+ results[i+1] +"'>" + results[i+6] + "</option>");
});
}
if(typeof results[i] !== 'undefined') {
$("select[name='address']").each(function() {
$(this).append("<option val=''"+ results[i] +"''>" + results[i] + "</option>");
});
}
if(typeof results[i+1] !== 'undefined') {
$("select[name='size']").each(function() {
$(this).append("<option val=''"+ results[i+1] +"''>" + results[i+1] + "</option>");
});
}
}
}
}
//TODO----- WHEN THE NAME OF PARAMETER IS CHANGED, THE ADDRESS AND SIZE SELECT IS ALSO CHANGED. DOES NOT WORK WITH APPENDED PARAMTERS..
$(function () {
$("select[name='name']").change(function() {
var optionSelected = $(this).find('option:selected');
console.log($(this).val());
$("#address").val(optionSelected.attr('address'));
$("#size").val(optionSelected.attr('sizeSelect'));
});
});
I have a file that the user uploads into select options, which works perfectly. I wanted the user to select the name of the parameter and the address and data size would automatically change. This works for the first field sets, but does not work for the field sets that I appended when the more button is pressed. I do not understand why it does not work for the appended part. For example, when I press the add parameter button, and I change the parameter name of the first parameter, it changes the address and size properly. However, when i try to change the appended field set, the address and size do not change.
