2

I am generating an Html select in a form that is in a bootstrap 3 modal popup. I am trying to get the selected value and pass it through JQuery to dump to a database.

I have other input fields and a text area field using tinyMCE that I get the value from without any issues at all using $('#id').val();.

My select is super simple and displays in the view source as:

<select id='practitionerID' name='practitionerID' class='form-control'> <option value="1">Doctor 1</option> <option value="2">Doctor 2</option> </select>

I am have tried many different ways to get the data to display and cannot for the life of me get the option value.

I have tried the following:

$('#practitionerID').prop('selectedIndex'); // give's me -1 no matter the option selected $('#practitionerID').val(); // returns null $('#practitionerID').text(); // returns null, dont want the text anyways $("#practitionerID option:selected").val(); // returns undefined $("#practitionerID option:selected" ).text(); //returns undefined, still not what i want.

EDIT: So it tried this and it actually gives me a value now but only ever gives me the first option in the dropdown even though i have chosen something else. $('#practitionerID :selected').val();

The only thing i can think of that is tripping this up is the fact that I am loading it in a modal? Maybe it cannot read into it for some reason to see the property?

When I load an existing record and get the data.event.practitionerID it works gives me the value fine. However, I cannot seem to set the value when i get it though. So it appears to be an issue with the ID of this select but I just cant see where or how.

Any help would be greatly appreciated!

Improve this question
4
  • Possible duplicate of Get selected value in dropdown list using JavaScript? Commented Nov 14, 2017 at 2:28
  • 1
    Sounds like you are checking before element exists. val() never returns null or undefined when selector is a form control and it exists when called. Returns string (or array if select multiple) Commented Nov 14, 2017 at 2:29
  • @ncardeli its not really the selected value yet. I am trying to set it based on the value when i select it from the drop down. It is not the same issue as that person as they are looking for the actual "selected" parameter where I wont have that just yet. Commented Nov 14, 2017 at 18:59
  • @charlietfl I think you might be on to something there and will check my code when i get home. Commented Nov 14, 2017 at 19:00

3 Answers 3

Reset to default
2

Hope this helps....

$( "#select" ).submit(function( event ) { var select=$('#practitionerID').val(); alert( select ); event.preventDefault(); });
<html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Button to trigger modal --> <a href="#myModal" class="btn btn-primary" data-toggle="modal">Launch demo modal</a> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <form id="select"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> <h4 class="modal-title">Select!</h4> </div> <div class="modal-body"> <select id='practitionerID' name='practitionerID' class='form-control'> <option value="1">Doctor 1</option> <option value="2">Doctor 2</option> </select> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div><!-- /.modal-content --> </form> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

so this works stand alone but in my code it does not work. charlietf might be right where it's not loaded yet but not sure how. So the field in the modal is generated by a php script and it is on the screen before I click the "add" button which is just a submit. I am going to play around with a few more things and will update soon.
for some reason the actual value is always the first one in the drop down. Event though the above code works, in my list it does not seem to care about which one is selected it always gives the value of the first item. Anyone have any thoughts on this?
2

I am a complete idiot.

The solution that worked for me was

$('#practitionerID').val();

The issue is I had a quick add feature on the same page and guess what I used, a drop down with the same ID. It was taking the value from the first drop down every time.

I hope this mistake can help someone else.

Improve this answer

Comments

0

I have tried to get selected value by ID. but no luck.

Then I tried to get selected value by select field Name. And I got the desired result.

$("select[name=practitionerID]").val();
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.