CODEWITHSUNDEEP
javascripthtml
answerSeeker
answerSeeker

Reputation: 2772

How can I get id of span element inside select element?

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;

};

Upvotes: 0

Views: 1839

Answers (3)

user9141233
user9141233

Reputation:

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>

Upvotes: 2

Aria
Aria

Reputation: 3844

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>

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68393

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.

Upvotes: 4

Related Questions