进度栏表单填写jQuery [英] Progress bar form fill out with jquery
问题描述
我正在尝试创建一个进度栏,该进度栏会随着表单的填写而增加.例如,如果我有5个输入.每个输入都需要填写以达到100%.我的目标是在表单达到100%时激活一个按钮.
I am trying to create a progress bar that increases as a form is being filled out. For example if I had 5 inputs. Each input would need to be filled out to get to 100% My goal is to activate a button once the form reaches 100%.
我的思想过程是做一堆,如果空白为零,则为10,否则为任意数.
My thought process was to do a bunch of if blank make it a value of 0 but if not then it gets a value of 10, or some arbitrary number.
然后,我将这些值加起来以完成进度栏.
Then I would just add up those values to complete the progress bar.
我不确定如何设置这些值,以便可以将它们加起来,否则这甚至是正确的方法.我不确定该去哪里.这是代码:
I am not sure how to set up the values so that I can add them up or this is even the right way to go. I am not sure where to go with it. Here is the code:
<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; };
});
任何帮助将不胜感激
推荐答案
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:
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;
});
});
这篇关于进度栏表单填写jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!