简体   繁体   中英

jQuery - Combing If/ Else + .Click() and .prop('disabled', true);

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM