JQuery - Get select value

JquerySelect

Jquery Problem Overview


I'm trying to get the selected value from a drop down list via jQuery. I have a bit of javascript that validates a form when I click SEND, to make sure there are no blanks, code is as follows:

function formCheckDancer(formobj){					
			// Enter name of mandatory fields
			var fieldRequired = Array("dancerStageName", "dancerFullName", "dancerPhone", "dancerEmail", "dancerCountry", "dancerAvailableDate");

			// Enter field description to appear in the dialog box
			var fieldDescription = Array("Stage Name", "Full Name", "Phone Number", "Email Address", "Nationality", "Availability");

			// dialog message
			var alertMsg = "Please complete the following fields:\n";			
			var l_Msg = alertMsg.length;
			
			for (var i = 0; i < fieldRequired.length; i++){
				var obj = formobj.elements[fieldRequired[i]];				
				if (obj){
					switch(obj.type){
					case "select-one":						
						if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == "" || obj.options[obj.selectedIndex].text == "..."){
							alertMsg += " - " + fieldDescription[i] + "\n";
						}
						break;
					case "select-multiple":
						if (obj.selectedIndex == -1){
							alertMsg += " - " + fieldDescription[i] + "\n";
						}
						break;
					case "text":
					case "textarea":
						if (obj.value == "" || obj.value == null){
							alertMsg += " - " + fieldDescription[i] + "\n";
						}
						break;
					case "checkbox":
						if (obj.checked == false){					
							alertMsg += " - " + fieldDescription[i] + "\n";
						}
						break;
					default:
					}
					if (obj.type == undefined){
						var blnchecked = false;
						for (var j = 0; j < obj.length; j++){
							if (obj[j].checked){
								blnchecked = true;
							}
						}
						if (!blnchecked){
							alertMsg += " - " + fieldDescription[i] + "\n";
						}
					}
				}
			}
		
			if (alertMsg.length == l_Msg){
				return sendDetailsDancer(); //Send email if all field are populated.
				return true;				
			}else{
				alert(alertMsg);
				return false;
			}
		}

		function sendDetailsDancer(){			    		
			var stagename = $("input[name=dancerStageName]").val();			
    		var fullname = $("input[name=dancerFullName]").val();
    		var phone = $("input[name=dancerPhone]").val();
    		var email = $("input[name=dancerEmail]").val();    		    		    		    		    		    		    		    		
    		var nationality = $("#dancerCountry").val();    		
    		var availability = $("input[name=dancerAvailableDate]").val();    
    		
    		$("#contact_form_result_dancer").html('<center><img src="loading.gif" width="32" height="32" /></center>');
    		$("#contact_form_result_dancer").show();
    		$.post("http://localhost/lapello/wp-content/themes/lapello/sendMailDancer.php", {stagename: stagename, fullname: fullname, phone: phone, email: email, nationality: nationality, availability: availability}, function (data){
    			$("#contact_form_result_dancer").html(data);			
    		});
    		setTimeout("contactReturnDancer()", 4000);
    		return false;
    	}

In this case Nationality is the value I want. As you can see I've tried:

var nationality = $("#dancerCountry").val();

which doesn't seem to work.

If I put the following alert statement: alert(obj.options[obj.selectedIndex].text); after case "select-one" the correct value is output so I know its being passed correctly.

I'm just not sure how to capture it in the sendDetailsDancer function.

Any help appreciated.

Regards, Stephen

Jquery Solutions


Solution 1 - Jquery

var nationality = $("#dancerCountry").val(); should work. Are you sure that the element selector is working properly? Perhaps you should try:

var nationality = $('select[name="dancerCountry"]').val();

Solution 2 - Jquery

val() returns the value of the <select> element, i.e. the value attribute of the selected <option> element.

Since you actually want the inner text of the selected <option> element, you should match that element and use text() instead:

var nationality = $("#dancerCountry option:selected").text();

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionStephenView Question on Stackoverflow
Solution 1 - JqueryBenMView Answer on Stackoverflow
Solution 2 - JqueryFrédéric HamidiView Answer on Stackoverflow