Would LOVE some help on this as I've searched on StackOverFlow and found a way to disable the button from clicking IF no info is entered into the form, (using the $.trim(.....) code below! Yay! Problem is - once I add that in, the rest of the code in the "else" part doesn't work. Scratching my head as to WHY?!!
If I comment out this section to disable the click then the user can click the button irrespective if any info is entered (but rest of code works fine) -
if ($.trim($('.inputs').val()).length == 0){
$('.inputs').prop('disabled', true);
} else { ....... }
My HTML -
<div class="entry">
<h2>Enter the Contest:</h2>
<form>
<p class="inputs"><label>Name : </label><input type="text" placeholder=" required" id="name-input" required></p>
<p class="inputs"><label>Hole #: </label><input type="number" placeholder=" required" id="hole-input" required></p>
<p class="inputs"><label>Par #: </label><input type="number" placeholder=" required" id="par-input" required></p>
<p class="inputs"><label>Strokes #: </label><input type="number" placeholder=" required" id="strokes-input" required></p>
<button id="submit" class="btn1">Submit</button>
</form>
</div>
My jQuery -
$(document).ready(function(){
$(".btn1").click(function(){
if ($.trim($('.inputs').val()).length == 0){
$('.inputs').prop('disabled', true);
} else {
$(".entry h2").replaceWith("<h2>Submitted!</h2>");
$("form").hide().replaceWith("<p>" + golfScore() + "! <br>Thank you for entering the contest and good luck!</p>");
$(".entry p").addClass("inputs message");
$(".entry").append("<button>Replay?</button>");
$(".entry button").addClass("btn2");
$(".btn2").on('click', refreshPage);
} // closes else
});
}); // closes Doc Ready
try this -- example :
$("input").on("change keyup",function(){
//remove the disabled then do the rest --
$('.btn1').removeAttr('disabled');
// start checking if the input boxes have values
if ($.trim($('#name-input').val()).length == 0){
// you can also set focus to the field that is empty
$('.btn1').prop('disabled', true);
return false;
}if ($.trim($('#hole-input').val()).length == 0){
$('.btn1').prop('disabled', true);
return false;
}if ($.trim($('#par-input').val()).length == 0){
$('.btn1').prop('disabled', true);
return false;
}if ($.trim($('#strokes-input').val()).length == 0){
$('.btn1').prop('disabled', true);
return false;
} else {
// if all has been passed should execute code
$(".entry h2").replaceWith("<h2>Submitted!</h2>");
$("form").hide().replaceWith("<p>" + golfScore() + "! <br>Thank you for entering the contest and good luck!</p>");
$(".entry p").addClass("inputs message");
$(".entry").append("<button>Replay?</button>");
$(".entry button").addClass("btn2");
$(".btn2").on('click', refreshPage);
} // closes else
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.