Question

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!

Answer 1

If I understand you correct, I believe this is what you are trying to achieve:

$(function () {    
    $('#clientname').change(function() {
       if ($(this).val().length === 0)
          $('.next').hide();
       else
          $('.next').show();
    });
});

Whenever the value of the input with ID clientname changes, we check the length of the value (the number of characters entered in the input). If the length is zero, we hide the button, otherwise we show it.

I also wrapped it in a DOM-ready callback to make sure that we don’t try to add the change-event listener until we know that the element is present in the DOM.

Edit:

The above example could also be written even shorter, like this:

$(function () {    
    $('#clientname').change(function() {
        $('.next').toggle($(this).val().length !== 0);
    });
});​

Demo:

A fiddle to demonstrate the code: http://jsfiddle.net/uQyH9/