如何获取select元素内的span元素的ID？

Question

My html form has the content below:

<form name="profile">
 ...
 <select id="province" name="province">
  <span id="provinceWarning" class="alert"></span>
  <option value="">Select Province</option>
  <option value="AB">Alberta</option>
   ...

In my javascript, I'm trying to grab the form's ID to show a message telling the user to choose something in the dropdownlist if they haven't chosen anything and pressed the submit button. The problem is that the javascript block returns undefined.

//validate the profile form
function validate(e){

    e.preventDefault();

    var valid=true;


   if(document.profile.province.value == ""){
       document.getElementById('provinceWarning').innerHTML="*Please choose a province*";
       valid=false;
    }

    if(valid){
        alert("Thank You!");
    }

    return valid;

};

Answer 1

You can't have a span tag inside a select tag. Browser while rendering this HTML would have stripped it off.

See the demo below (check in your browser's dev tools that browser is stripping off span tag while rendering)

 <select id="province" name="province"> <span id="provinceWarning" class="alert"></span> <option value="">Select Province</option> <option value="AB">Alberta</option> </select> 

You need to put the span tag outside the select tag.

Answer 2

Try this, it comes down and reset once u select and submit.

 function submit(){ if(!document.getElementById("province").value){ document.getElementById("provinceWarning").innerHTML="*Please choose a Province*"; valid=false; }else{ document.getElementById("provinceWarning").innerHTML="" valid=true; window.alert("thank you") } } 

 <form name="profile"> <select id="province" name="province"> <option value="">Select Province</option> <option value="AB">Alberta</option> </select> <span id="provinceWarning" class="alert"></span> </form> <button id="btnSubmit" onclick="submit();">Submit</button> 

Answer 3

Problems:

1- You can not define span in select option then move it out of your select

2- To check select value you should getElementById("province") and then check the value

3- Testable code can be as below(You can change it as you want):

 function func() { var ddl = document.getElementById("province"); var selectedValue = ddl.options[ddl.selectedIndex].value; if (selectedValue == ""){ document.getElementById("provinceWarning").innerHTML="*Please choose a Province*"; valid=false; }else{ alert("Thank You!"); } } 

 <form name="profile"> <div> <span id="provinceWarning" class="alert"></span> </div> <div> <select id="province" name="province"> <option value="">Select Province</option> <option value="AB">Alberta</option> </select> </div> </form> <button id="btnSubmit" onclick="func();">Click Me</button>