3

フォームが入力されるにつれて増加する進行状況バーを作成しようとしています。たとえば、5 つの入力があるとします。100% に到達するには、各入力を入力する必要があります。私の目標は、フォームが 100% に達したらボタンをアクティブにすることです。

私の思考プロセスは、空白の場合は値を0にしますが、そうでない場合は値10または任意の数値を取得することでした。

次に、これらの値を合計して進行状況バーを完成させます。

値を追加できるように値を設定する方法がわかりません。または、これが正しい方法でもあります。どこに行けばいいのかわからない。コードは次のとおりです。

<form>
One<input id="1" type="name" name="name"><br />
Two<input id="2" type="name" name="name"><br />
Three<input id="3" type="name" name="else"><br />
Four<input id="4" type="name" name="name"><br />
Five<input id="5" type="name" name="name"><br />

</form>


<div id="progressbar"></div>

$(function() {
$( "#progressbar" ).progressbar({
  value: 37
});

});

$(function(){
 if ( $('#1').val() == '' ){value == 0};
 } else {
     value == 10;  };
if ( $('#2').val() == '' ){value == 0};
 } else {
     value == 10;  };
if ( $('#3').val() == '' ){value == 0};
 } else {
     value == 10;  };
if ( $('#4').val() == '' ){value == 0};
 } else {
     value == 10;  };
if ( $('#5').val() == '' ){value == 0};
 } else {
     value == 10;  };
});

どんな助けでも大歓迎です

4

2 に答える 2

2

HTML:

<form>
One<input id="1" type="name" name="name" class='moo'><br />
Two<input id="2" type="name" name="name" class='moo'><br />
Three<input id="3" type="name" name="else" class='moo'><br />
Four<input id="4" type="name" name="name" class='moo'><br />
Five<input id="5" type="name" name="name" class='moo'><br />
</form>
<div id="progressbar"></div>

Javascript:

$(function() {
$( "#progressbar" ).progressbar({
  value: 0
});

$(".moo").change(function() {
    var pbVal = 0;
    if ($("#1").val().length > 0) pbVal += 20;
    if ($("#2").val().length > 0) pbVal += 20;
    if ($("#3").val().length > 0) pbVal += 20;
    if ($("#4").val().length > 0) pbVal += 20;
    if ($("#5").val().length > 0) pbVal += 20;
    $( "#progressbar" ).progressbar( "option", "value", pbVal );
    return false;
});

});

于 2013-04-02T20:35:11.820 に答える