I show a list in View. Every item in the list has a DropDownList that specify the status of each record. Now I want to get the selected "value in DropDownList" that is in the DropDownList.
I tried this to set DropDownList :
<div>
#Html.DropDownList("DeclineReasons", ViewBag.DeclineReasons as SelectList, new { #id=item.ProfessorSubmittedRequestFlowId+"Dec"})
</div>
And by click on the button, I tried to find DropDownList in record by:
var SelectedDeclineReason = ProfessorSubmittedRequestFlowId + "Dec"
var e = document.getElementById("SelectedDeclineReason");
var SDeclineReasons = e.options[e.selectedIndex].value;
I tried this way too, but doesn't work neither:
var SelectedDeclineReason = ProfessorSubmittedRequestFlowId + "Dec"
var j=$('*[data-id=SelectedDeclineReason ]');
SelectedDeclineReason shows Id properly, but the element is undefined in both ways.
I Found The Answer,
var SelectedDeclineReason = ProfessorSubmittedRequestFlowId + "Dec"
var e = document.getElementById(SelectedDeclineReason);
var SDeclineReasons = e.options[e.selectedIndex].value;
I accidentally Use string, I Set Value of SelectedDeclineReason ,and Problem Solved.
Related
I have an invoice and I want to add many items. I have a row with a select and two input fields. Select takes data from DB(it takes all items that are on the database) and input fields are for price and quantity.
I have a button Add Item that I want to add another row with specific inputs. My problem is with select because I do not know how to get data from the database to appear in options.
I am displaying the first line with Laravel while at the click of a button I am trying to implement it with JS. I also want to show the price of the selected item depending on the quantity.
<table id="items_table">...</table>
<button id="add_item">Add Item</button>
<script>
let counter = 1;
const items = {!! json_encode($items->toArray()) !!}
$('#add_item').click(function(event){
event.preventDefault();
counter++;
const select = document.createElement('select')
for(let i = 0; i< items.length; i++){
const opt = items[i]
const el = document.createElement('option');
el.textContent = opt.name;
el.value = opt.id;
select.appendChild(el);
}
const newRow = jQuery(
select +
counter + '"/></td><td><input type="text" name="last_name' +
counter + '"/></td></tr>');
$('#items_table').append(newRow);
});
</script>
It looks like you are getting your data types mixed up. You are creating the select element with document.createElement('select') - that returns a HTMLSelectElement and then you are trying to use that as if it was a String. Here is what your issue really is:
const select = document.createElement('select')
console.log(select + "<br>");
// This prints out "[object HTMLSelectElement]<br>"
To solve the issue, you must convert the select to a string of HTML, try something like this
const select = document.createElement('select')
select.innerText = "Test";
const selectAsHTML = select.outerHTML;
console.log(selectAsHTML + "<br>");
While changing the text from select box values are updating to hidden fields but these values are not coming current http paramater .
eg:
$(document).on('change','.cart .quantitycolumn .quantityinput' ,function(){
var qty = $(this).closest('.tablerow').find('.quantityinput option:selected').val();
var uuid = $(this).closest('.tablerow').find('.quantityinput').data('uuid');
var newUUID = $(this).closest('.tablerow').find('.quantityinput').data('newuuid');
$('[name=quantityValue]').val(qty);
$('[name=ParentUUID]').val(uuid);
$('[name=newUUID]').val(newUUID);
});
Please give me hint how do we resolve this issue.
Thanks a lot!:)
I am working on data filter and I have made data filter with 3 select box.But issue is that only one(1st) select box is working .It is not filtering data for 2nd and 3rd.
What is issue ?
JS Fiddle
if you use class='option-set clearfix' for all three select box then you can have it like this:
var choices = $('select[class="option-set clearfix"]');
var choice1 = choices.eq(0).val();
var choice2 = choices.eq(1).val();
var choice3 = choices.eq(2).val();
console.log(choice1);
console.log(choice2);
console.log(choice3);
you must send each select element's filter data separately.
in this case you can set id for second and third select elements to be able to send each select filter data.
take a look at below code :
$('#some').click(function(){
var $select = $('select');
var $select1 = $select.next();
var $select2 = $select1.next();
var group = $select.attr('data-filter-group');
var group1 = $select1.attr('data-filter-group');
var group2 = $select2.attr('data-filter-group');
filters[ group ] = $select.find(':selected').attr('data-filter-value');
filters[ group1 ] = $select1.find(':selected').attr('data-filter-value');
filters[ group2 ] = $select2.find(':selected').attr('data-filter-value');
here is jsfiddle demo
$ctr = 0;
foreach($authspons as $authspons_list){
$ctr++;
echo "<input type='checkbox' id='id_list'".$ctr."'"." name='authspons[]'"." class='list_check' value='".$authspons_list->authspons_position." ".$authspons_list->authspons_lname.",".$authspons_list->authspons_fname." ".$authspons_list->authspons_mname." ".$authspons_list->authspons_cmpny.'; '."'".">" .$authspons_list->authspons_position." ".$authspons_list->authspons_lname.",".$authspons_list->authspons_fname." ".$authspons_list->authspons_mname." ".$authspons_list->authspons_cmpny."</input> <br />";
echo "<input type='text' class='text_list' id='tbox".$ctr."'"."name='authsponsid[]' value='".$authspons_list->authspons_id."; "."'"." >";
}
I have a generated list coming from database, the checkboxes contains the personal details, while the textboxes contains the "ID" of each items in the checkboxes.
This is my jquery code:
$('#list').click(function(){
var final = '';
var final2='';
$('.list_check:checked').each(function(){
var values = $(this).val();
final += values;
var val_id = $('.text_list').val();
final2 +=val_id;
});
$("#coauth").val(final);
$("#coauthid").val(final2);
$("#coauthspons").modal("hide");
});
Getting value from checkboxes is okay. My problem is: the output from the textbox is always the last value of the number of checkboxes that is checked.
Like this:
1st checkbox = 1st textbox(value="1");
2nd checkbox = 2nd textbox(value="2");
when i check the two options, the textbox only results to:
1st checkbox = 1st textbox(value="2");
2nd checkbox = 2nd textbox(value="2");
How do I get the result of each of the expected checkbox and its textbox value?
here var val_id = $('.text_list').val();
you are giving the same value for all the elements irrespective of their index
try like this
var val_id = $(this).next().val(); //this gives value of next i.e .text_list element
$('#list').click(function(){
var final = '';
var final2='';
$('.list_check:checked').each(function(){
var raw_value = $(this).val();
var id_value = raw_value.split("||");
var values = id_value[1];
final += values;
var val_id = id_value[0];
final2 +=val_id;
});
$("#coauth").val(final);
$("#coauthid").val(final2);
//alert(final2);
$("#coauthspons").modal("hide");
});
Thanks #Bhadra for your answer. it gives me an idea but I found a better solution to my own problem. I put all the values in the checkbox then I use split function to separate the "ID" from the original checkbox values(fname,mname,lname).
Is this a ligitimate way of determining the selected value of an section/option box with and id of "shirt_size_1221"?
var user_id = '1221';
x = "#shirt_size_" + user_id ;
alert($(x + " option:selected"));
Your alert statement will always show [object] unless you change it to
alert($(x+' option:selected').val());
And don't worry, this is a good way of getting selected option.
You can get the value of a selected option in a dropdown box by using
var selectList = document.getElementById("shirt_size_1221");
var val = selectList.options[selectList.selectedIndex].text;
No JQuery needed.
The "proper" way is simply:
var user_id = '1221';
x = "#shirt_size_" + user_id ;
alert($(x).val());