CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Ionut B.
Ionut B.

Reputation: 401

Show submit button on multiple forms only if option selected

I need to show the submit button on many forms on the same page only if one option from a select is selected.

I have:

<form id="1">
    <input type="text">
    <select>
        <option value="">Select one value</option>
        <option value="1">value 1</option>
        <option value="2">value 2</option>
    </select>
    <input type="submit">
</form>

and

<form id="2">
  <input type="text">
  <select>
    <option value="">Select one value</option>
    <option value="1">value 1</option>
    <option value="2">value 2</option>
  </select>
  <input type="submit">
</form>

so, I need to show the submit button only if an option of the select is selected Thanks!!!

Upvotes: 0

Views: 1233

Answers (2)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

This a working example with you html http://jsfiddle.net/g188o5eg/

    $('select').on('change', function(){
        if($(this).val() != ''){
             $(this).parent().find('input[type="submit"]').show();   
        } else {
            $(this).parent().find('input[type="submit"]').hide(); 
        }
    });

It will work with all forms on your site :)

Upvotes: 1

derdida
derdida

Reputation: 14904

Try something like this (would work with multiple select boxes (uses the nearest submit):

<form>
  <input type="text">
  <select class="select">
    <option value="">Select one value</option>
    <option value="1">value 1</option>
    <option value="2">value 2</option>
  </select>
 <input type="submit" class="submitbutton">


<script type="text/javascript">

$('.submitbutton').hide();

$('.select').click(function() {
   $(this).closest('.submitbutton').show();
});

</script>

Upvotes: 0

Related Questions