Lewey Jimoya Lewey Jimoya - 25 days ago 9
HTML Question

How to pass <select> html data in bootstrap modal to jquery

I'm trying to figure out how to pass the selected value from this tag that is located in a modal:

<div class='row'>
<div class='col-md-8'>
<form class='form-inline'>
<select class='form-control' name='sel1' id='sel1'>
<option>1.00</option>
<option>1.25</option>
<option>1.50</option>
<option>1.75</option>
<option>2.00</option>
<option>2.25</option>
<option>2.50</option>
<option>2.75</option>
<option>3.00</option>
<option>5.00</option>
<option>INC</option>
<option>DRP</option>
<option>WDRW</option>
</select>

</div>
<div class='col-md-4' align='right'>
<input style='display: block; width: 100%;' type='button' class='btn btn-success' value='Enter Grade' onclick='enterGrade($offeringno)'' />
</div>


Here is my jquery code:

function enterGrade(offering) {
var enteredgrade = $("#myModal3 #sel1").val();
var gradeoffering = offering;
alertify.confirm("Enter grade?", function (e)
{ if (e) {
$.ajax({
url : "action.php",
type : "POST",
data : {
gradeofferingPost : gradeoffering,
enteredgrade1: enteredgrade
},
success : function(data) {
alertify.alert(data);
show_test();
}});
$('#myModal3').modal('toggle');
} else {
txt = "You pressed Cancel!";
} });
}


What is the correct syntax to get the selected option from the
sel1
select (that is inside a modal) to the javascript function?

Answer

You are trying to access value of element that does not have a value. What you are looking for is .text(). If you want to get currently selected text of the option you should replace this:

var enteredgrade = $("#myModal3 #sel1").val();

with this:

var enteredgrade = $('#sel1 :selected').text();

If you are interested in .val() then you must replace

<option>1.00</option>
<option>1.25</option>
...

with this:

<option value="1.00">1.00</option>
<option value="1.25">1.25</option>
...