Как я могу получить результат формы перед подачей? у меня есть
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="form">
<form name="form">
<input type="text" />
<br />
<input type="text" />
</form>
</div>
<p class="congrats"></p>
<input style="width:100px" value="check" id="a" type="button" />
<script>
//Get amount of empty inputs
$("#a").onload('click', function () {
var bad = 0;
$('.form :text').each(function () {
if ($.trim($(this).val()) == "")
bad++;
});
if (bad > 0)
$('.congrats').css("display", "block").text(bad + ' missing');
else
$('.congrats').hide();
//Get total inputs
console.log("Total inputs " + form.getElementsByTagName('input').length);
//Divide by complete inputs out of 100%
console.log("The percentage is " + 100 / form.getElementsByTagName('input').length + "%");
//Minus total inputs
console.log(form.getElementsByTagName('input').length - bad);
});
</script>
</body>
</html>
Но как я могу получить результат до фактического щелчка, а не pageload? В процессе?
Принимая код, который вы указали в обновленном jsbin, вам просто нужно явно вызвать countMissing()
:
countMissing();
//Get amount of empty inputs
function countMissing() {
var bad = 0;
$('.form :text').each(function () {
if ($.trim($(this).val()) == "") bad++;
});
if (bad > 0) $('.congrats').css("display", "block").text(bad + ' missing');
else $('.congrats').hide();
//Get total inputs
console.log("Total inputs "+form.getElementsByTagName('input').length);
//Divide by complete inputs out of 100%
console.log("The percentage is " + 100/form.getElementsByTagName('input').length+"%");
//Minus total inputs
console.log(form.getElementsByTagName('input').length - bad);
}
Вы используете .onload
вместо .on()
: http://jsfiddle.net/2Bt88/1/
Вам также необходимо предотвратить поведение кнопки по умолчанию, а затем продолжить:
$("#a").on("click", function(e) {
// Prevent default behaviour
e.preventDefault();
// Do stuff
// Submit the form
e.submit();
});
Добавьте это в свой код
if (form.getElementsByTagName('input').length - bad === 0)
return false;