maures maures - 1 month ago 8
jQuery Question

Show button when a specific input is compiled

I want to hide a button (inside a div tag with id="next") until some specific input are compiled.

It is possible with jquery?

Here's my code:

<input id="name" type="text" name="name" />
<input type="text" name="phone" placeholder="Phone" />
<div id="next1">
<input type="button" name="next" class="next action-button" value="Next" />
</div>


I've tried this jquery code, but when i've compiled name input, next button doesn't show!

if(!$('input[name=name]').val()){
$('#next1').hide();
}
else {
$('#next1').show();
}


What can i do?

thanks

Answer

To achieve this you need to check the value as the user types. To do that you can run your code within a keyup event handler. It can also be simplified to just using the toggle() method. Try this:

$('#name').keyup(function() {
  $('#next1').toggle(this.value != '');
});
#next1 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" type="text" name="name" />
<input type="text" name="phone" placeholder="Phone" />
<div id="next1">
  <input type="button" name="next" class="next action-button" value="Next" />
</div>