0

スライダーを使用してフォームのいくつかの要素を表示するこのスクリプトがあります。ここまでは順調ですね。私がやっている方法は、スライダー（複数ステップのフォームを許可しないプラグインといくつかのグラフィック動作を使用するため、複数ステップのフォームを使用できません）と次のスライダーに移動するボタンを使用することです。そのため、特定のフィールドが入力された場合にのみ表示するボタン (フォームの一部ではない) が必要です。

次のことを試しましたが、うまくいきません。何らかのエラーがあると思いますが、何が原因かわかりません。私のコードは次のとおりです。

$('#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>

私が間違っていることについて何か助けはありますか？より良いアプローチ/ソリューションはありますか? （ご想像のとおり、私はプログラマーではありません）

前もって感謝します！

4

2 に答える 2

1

すべての必須フィールドが入力されたら、[次へ] ボタンを表示する必要があると思います。

そのため、まず[次へ] ボタンを非表示にする必要があります。

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

その後、必須フィールドの変更を確認し、すべての必須フィールドが入力されている場合は変数を true に設定します。その変数が 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();
    }
}
于 2012-11-16T23:27:03.663 に答える
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/

于 2012-11-16T23:09:08.167 に答える