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的回调函数中，以确保在我们知道该元素存在于DOM中之前我们不会尝试添加更改事件侦听器。

修改

上面的例子也可以写得更短，如下：

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

<强>演示：

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

Answer 2

如果填写了所有必填字段，我想您希望显示 Next 按钮。

首先，您必须隐藏 Next 按钮。

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

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

$("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();
    }
}

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

2 个答案: