We Keep Coding

How can I dynamically select input field in dynamically generated forms with Javascript/jQuery?

When my document is ready I have 1 or more identically forms with select and two inputs that I want to show (1 of them based on select dynamically).
For 1 form its pretty simple, but my problem is that forms are generated dynamically like when I have on ready 1 form select tag is looking like this
<button type="button" class="add-document-item btn btn-success btn-sm pull-right">
<i class="glyphicon glyphicon-plus"></i>
</button>
<select id="type" class="form-control">
<option value="1">File 1</option>
<option value="2">File 2</option>
</select>
<div class="col-md-12 system" id="system">
My YII2 active form field...
</div>
<div class="col-md-12 computer" id="computer">
My YII2 active form field...
</div>
If after opening document and there is more than 1 form OR there is one and I adding more by myself dynamically, SELECT id's generating like "type0", "type1", "type2" and same is with form fields id's.
So far I can only switch inputs dynamically only when 1 form is rendered
$(document).ready(function () {
$('#computer').hide();
$(document).on('change', '#type', function () {
var val = $('#type').val();
if (val == 2) {
$('#system').show();
$('#computer').hide();
} else {
$('#computer').show();
$('#system').hide();
}
});
});
My need is to change selected input for every generated form individual. I am stuck for this already for some time. Can anybody can help me?

This javascript I created should do the trick. You'll need to apply this to your own code.
Declare an array with all form elements
Select all elements you are going to loop through
Use forEach and overload it with the array you created
Create an if statement with the right filter set
myArray = document.querySelectorAll('form')
document.querySelectorAll('form').forEach(function(value, index,
myArray){
if (myArray[index].getAttribute('id')=='system'){
console.log('system') //doSomething()
}
})
You can refactor this by replacing the 2th instance of document.querySelectorAll('form') with myArray, but for clarity I'll leave it as is.

ng-option not selecting model value on first call

I have multiple drop downs with different data arrays. On Edit click, I want to set the selected value. I have set ng-model to be the object but its not working.
<div class="form-group">
<label class="control-label">Category{{product.categoryDto}}</label>
<select ng-model="product.categoryDto" class="form-control" ng-options="a.categoryName for a in categories"></select>
</div>
Following is the edit code.
<button type="button" ng-click="editProduct(row)" class="btn btn-sm btn-primary">
<i class="glyphicon glyphicon-pencil"></i>
</button>
$scope.editProduct = function(row){
console.log($scope.product.categoryDto);
$scope.product = row;
$scope.showAddProductForm = true;
$scope.product.categoryDto = row.categoryDto;
};
In label categoryDto is showing correct values but not selecting the option. Any idea?

Get selected value of dynamically created multiple dropdown using jquery

I want to ask 2 questions.
I have created dynamic dropdown (class and section) using jquery and
assign the id's like [myclass0, myclass1] [mysection0, mysection1]
etc. Now I want to retrieve the values of both and store in a
variable or array then I will use these variable for sending it to
database. I have done the following code but it's not working and
even it's not showing the ID of dynamic created dropdown.
How to select the values of classes and sections and how to loop them so that valid data will be sent to database?
here is my code
<div class="row">
<div class="col-sm-12" id="dynamic_select">
</div>
</div>
<input type="button" name="" value="Add Class" class="btn btn-primary" id="addclass" style="margin-top: 50px;" onclick="addMore();">
here is my JS:
function addMore(){
var inps = $('#dynamic_select > div:last').data('count')+1 || 0;
$('#dynamic_select').append('<div data-count="'+inps+'"><div class = "col-sm-5"><label>Select Class</label> <select id="childclass'+inps+' " class="form-control"> <option value="9">IX</option><option value="10">X</option><option value="11">FSC I</option><option value="12">FSC II</option></select> </div> <div class = "col-sm-5"><label>Select Section</label> <select id="childsection'+inps+' " class="form-control"> <option value="A">A</option><option value="B">B</option><option value="C">C</option></select></div> <a class=remove>X</a>');
}

Try this (example for #dynamic_select):
$('#dynamic_select select').val();
or
$('#dynamic_select).on('change', function() {
$('#dynamic_select select').val();
});

How get get dynamically generated value

The following contain dynamic values
<c:forEach items="${allUserList}" var="eachUser">
<span class="name"> ${eachUser.getUserName()} <span>
<select class="role">
<c:forEach items="${roleList}" var="eachRole">
<option value="${eachRole.getRoleName()}">${eachRole.getRoleName()}</option>
</c:forEach>
</select>
<input type="button" class="add" value="add" />
</c:forEach>
When i click on add button i should see corresponding name, selected role in a alert box (e.g {jack, admin})
How to do this??

Using the class attribute of the button as a selector, you can use the .prev function to find the <select> element preceding the button:
$(".add").on("click", function() {
alert($(this).prev(".role").val()); // Role
alert($(this).prevAll(".name").text()); // Name
});
You don't need event delegation in this instance, as JSP will generate this code before it reaches the client.

How can I store multiple values upon the click of one button?

I'm trying to get a button to store the button value (id answer0, 'value2') as well as a drop down box selection (id answer1, 'value'. As the code is nothing is saving, though I have managed to save the button 'value2' in a previous attempt. Have been googling for 3 days to no avail. Any suggestions would be appreciated!
$('.btn-answer').off('click').on('click', function(evt) {
var answer0 = $(evt.target).attr("value2");
//var answer1 = $("#answer1").val();
var answer1 =$('#answer1 option:selected').text();
var all_answers = {};
all_answers['answer0'] = answer0;
all_answers['answer1'] = answer1;
if (typeof all_answers != 'undefined') {
console.log(answer0);
console.log(answer1);
pybossa.saveTask(task.id, all_answers).done(function() {
deferred.resolve();
<div>
<select name="answer1" class = "btn-success btn-mini">
<option value="none">Choose a Class</option>
<option>Woodland and Scrub</option>
<option value="A1">Woodland</option>
......
<option value="J5">Other Habitat</option>
</select>
</div>
<h1 id="question2"></h1> <!-- The question will be loaded here -->
<h2><i class="icon-asterisk"></i> </h2>
<div id="answer0"> <!-- Start DIV for the submission buttons -->
<!-- If the user clicks this button, the saved answer will be value2="Certai-->
<button class="btn btn-success btn-answer" value2 ="a"><i class="icon icon-white icon-thumbs-up"></i> Certain</button>
<!-- If the user clicks this button, the saved answer will be value2="Fairly Certain"-->
<button class="btn btn-answer btn-warning" value2="b"><i class=""></i> Fairly Certain</button>
<!-- If the user clicks this button, the saved answer will be value2="Fairly Certain"-->
<button class="btn btn-answer btn-danger" value2="c"><i class="icon icon-white icon-thumbs-down"></i> Unsure</button>
</div>
<P></P>
<!-- End of DIV for the submission buttons -->

Change this line:
var selected_answer1 = $("#answer1").val();
I guess $("#answer1") is input, and with $("#answer1").val("value") you are trying to set its value. But you want to get its value.
To get value from drop down:
$('#id_of_drop_down').val(); will return the value, not the text.
If you want text of selected option, use this:
$('#id_of_drop_down option:selected').text();.