根据填写的表单字段显示 div

Question

我有这个脚本，我在其中使用滑块来显示表单的一些元素。到目前为止，一切都很好。我这样做的方式是使用一个滑块（不能使用多步表单，因为它使用了一个不允许多步表单的插件，以及一些图形行为）和一个转到下一个滑块的按钮。所以现在我需要该按钮（不是表单的一部分）仅在某个字段被填写时显示。

我尝试了以下方法，但它不起作用，我假设有一些错误，但不知道是什么。我的代码如下：

$('#clientname').change(function() {
    var clientVal = $("input").val() == '';
$(".next").hide();

if ($('#clientname').val() != '').show();

else

$('.next').hide();
});

和html如下：

<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>

对我做错了什么有任何帮助吗？有更好的方法/解决方案吗？ （我不是你想象的程序员）

提前谢谢你！

Answer 1

如果我理解你的正确，我相信这就是你想要达到的目标：

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

每当 ID 为 clientname 的输入值发生变化时，我们都会检查值的长度（输入中输入的字符数）。如果长度为零，我们隐藏按钮，否则我们显示它。

我还将它包装在一个 DOM-ready 回调中，以确保在我们知道元素存在于 DOM 中之前，我们不会尝试添加更改事件侦听器。

编辑：

上面的例子也可以写得更短，像这样：

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

演示：

演示代码的小提琴：http://jsfiddle.net/uQyH9/

Answer 2

我想如果所有必填字段都已填写，您希望出现 下一步 按钮。

所以首先你必须隐藏下一步按钮。

$(document).ready(function() {
    $('.next').hide();
});

之后，您检查必填字段的更改，如果所有必填字段均已填写，则将变量设置为 true。如果该变量为真，则显示您的 下一步 按钮。

$("input.wpcf7-validates-as-required").change(function() {
    checkIfAllFieldsAreFilled();
});

function checkIfAllFieldsAreFilled(){
    var fieldsAreFilled = true;

    $("input.wpcf7-validates-as-required").each(function(){
        fieldsAreFilled &= ($(this).val() != '');
    });

    if(fieldsAreFilled){
        $('.next').show();
    }
}