最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Hide submit button if selected option value is null - Stack Overflow

programmeradmin4浏览0评论

I have the following form:

var x = document.getElementById("submit-button");

if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}
<script src=".1.1/jquery.min.js"></script>
<form>
<select>
  <option disabled selected>Select colour</option>
  <option value="Orange">Orange</option>
  <option value="Apple">Apple</option>
  <option value="Lemon">Lemon</option>
</select>
  <button id="submit-button" type="submit">Click</button>
</form>

I have the following form:

var x = document.getElementById("submit-button");

if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
  <option disabled selected>Select colour</option>
  <option value="Orange">Orange</option>
  <option value="Apple">Apple</option>
  <option value="Lemon">Lemon</option>
</select>
  <button id="submit-button" type="submit">Click</button>
</form>

If the selected index of the dropdown is the disabled placeholder option with no value, i want to hide the submit button. As soon as a colour is selected i want to show the button again.

Any help will be appreciated.

Share Improve this question asked Jun 19, 2015 at 16:28 nitroxisnitroxis 371 silver badge8 bronze badges 1
  • possible duplicate of Hide submit button until form is valid – Rick Smith Commented Jun 19, 2015 at 16:35
Add a ment  | 

5 Answers 5

Reset to default 5

You are in the right way. But missing some points with events:

1 - The whole code must be executed when DOM is ready (document loaded)

2 - You must observe the select change event to check for changes

3 - You can use jQuery .hide() and .show() do control the element's visibility

// Executed when DOM is loaded
$(document).ready(function() {
   // Executed when select is changed
    $("select").on('change',function() {
        var x = this.selectedIndex;

        if (x == "") {
           $("#submit-button").hide();
        } else {
           $("#submit-button").show();
        }
    });

    // It must not be visible at first time
    $("#submit-button").css("display","none");
}); 

Look this working fiddle

The shortest way would be

$(function(){
  $("select").on("change", function(){
    $("#submit-button").toggle(!!this.value);
  }).change();
});
<script src="//code.jquery./jquery-2.1.1.min.js"></script>
<form>
<select>
  <option selected value="">Select colour</option>
  <option value="Orange">Orange</option>
  <option value="Apple">Apple</option>
  <option value="Lemon">Lemon</option>
</select>
  <button id="submit-button" type="submit">Click</button>
</form>

You need to create an event handler for when the dropdown changes. In the example below I've hidden the submit button by default, and when the dropdown changes I toggle the visibility of the button based on if there is a selected value in the dropdown.

I allowed your "Select colour" option to be available just to better demonstrate how the event handler works.

$("#submit-button").hide();

$("select").on("change", function() {
  if (this.value)
    $("#submit-button").show();
  else
    $("#submit-button").hide();
});
    
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
  <option selected value="">Select colour</option>
  <option value="Orange">Orange</option>
  <option value="Apple">Apple</option>
  <option value="Lemon">Lemon</option>
</select>
  <button id="submit-button" type="submit">Click</button>
</form>

You should add a listener to your select like this:

$('form select').on('change', function(){
    if($(this).val() == null){
        $("#submit-button").hide();
    }else{
        $("#submit-button").show();
    }
}).change();

It will check every time that changes the option, hiding the button when the option has no value and showing it when it does. Also, it will trigger that at first to hide for the initial case.

Hi there Kindly try the following solution and tell me if you wanted something like this :

$(document).ready(function(){
  if($('select').val() == null){
  $('#submit-button').css('display','none');
}

$('select').on('change', function() {
$('#submit-button').css('display','block');
});
发布评论

评论列表(0)

  1. 暂无评论