Showing div based on filled form field
- by Fabio
I have this script where I use a slider to show some elements of a form. So far so good. The way I'm doing it is by having a slider (can't use a multistep form since it uses a plugin not allowing multistep forms, plus some graphic behaviors) and a button that goes to the next slider. So now I need that button (not part of the form) to show only if a certain field is filled.
I tried teh following, but it's not working, I assume some error but can't figure what. My code is as follows:
$('#clientname').change(function() {
var clientVal = $("input").val() == '';
$(".next").hide();
if ($('#clientname').val() != '').show();
else
$('.next').hide();
});
and the html as follows:
<div class="b40-right">
<h3>The Basics</h3>
<div class="label"> Your Name (required)</div>
<div class="inputes"> <span class="wpcf7-form-control-wrap your-name"><input id="clientname" type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </div>
<div class="label">Your Email (required)</div>
<div class="inputes"> <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" /></span> </div>
<div class="label">Type of Business</div>
<div class="inputes"> <span class="wpcf7-form-control-wrap type-of-business"><textarea name="type-of-business" class="wpcf7-form-control wpcf7-textarea" cols="40" rows="10"></textarea></span> </div>
</div>
<a class="next" href="javascript:stepcarousel.stepBy('mygallery2', 1)"><img id="nextbut1" src="<?php bloginfo('template_directory'); ?>/images/next.png" alt="" /></a>
any help on what am I doing wrong? Is there a better approach/solution? (I'm not a programmer as you may figure)
Thank you in advance!
