I'm trying to make the form submit button be disabled when the user clicks out of the input field

Question

<html>   
 <form class="form-disable">
            <br>
            <input type="text" id="message2">
            <br>
            <button id="myButton" type="submit" onclick="text()"disabled>Generate Text</button>
    </form>
</html>
    
<script>
    // $("html").click(function(event){
    //     $("#myButton").attr("disabled", "disabled");
    //     event.preventDefault();
    // })
    
    function text(){
        let $box = $('#message2').val();
        alert($box);
    }
    
    $("#message2").click(function(){
        $("#myButton").removeAttr("disabled");
        // event.preventDefault();
    })
</script>

I've tried using the commented out function with an alert and it seems to make an alert appear anytime I click anywhere on the screen. So, I'm afraid that my problem is that the commented out function is also adding the disabled attribute when I click on the text input field. When the function is commented out the submit button is disabled until I click on the input field, but I can't figure out how to make the button disabled once the user clicks out of the input box/field.

What's the actual goal here? Why would you want to disable the submit button when someone clicks outside the input? — j08691, Apr 29 '21 at 20:07
I'm just trying to improve my skills. I think this looks professional I also considered making it so that when the input field is empty the button would also be disabled. But I went with clicking somewhere else on the screen first. Let me know if that made sense to you. Thanks for taking the time to help me :) — Wayne, Apr 29 '21 at 20:11
Why not make the input required? The form will not submit with empty required fields... — devlin carnate, Apr 29 '21 at 20:13
I wanted to make it look professional I suppose I could do both. Thanks for the idea! — Wayne, Apr 29 '21 at 20:15

score 5 · Accepted Answer · answered Apr 29 '21 at 20:09

5

Why not just detect the blur event, which occurs when the element in question loses focus (ie, someone clicks outside of it). Also use .prop rather than .attr

$("#message2").blur(function(){
    if ($(this).val() =='') {
        $("#myButton").prop( "disabled", true );
    } else {
        $("#myButton").prop( "disabled", false );
    }
})

answered Apr 29 '21 at 20:09

Kinglish

23,358
3
22
43

2

You could shorten this to a one-liner `$("#myButton").prop( "disabled", ($(this).val() == '' ) ? true:false);` – j08691 Apr 29 '21 at 20:12
Thank you so much for taking the time to help me. I was unaware of these functions. Why should I use prop rather than attr if you don't mind me asking? – Wayne Apr 29 '21 at 20:13
1

@Wayne - I guess it works with both .attr and .prop now that I look into it. jQuery's website recommends .prop for disabling elements. Here's a wonderfully detailed discussion on it: https://stackoverflow.com/a/5876747/1772933 – Kinglish Apr 29 '21 at 20:16

score 0 · Answer 2 · answered Apr 29 '21 at 20:19

0

did you try to use the onblur() event?

<input type="text" id="message2" onblur="userClickedOut(this.value)">

function userClickedOut(value) {
  ...
}

HTH, Pieter

answered Apr 29 '21 at 20:19

Pieter Siegers

41
1
4

I'm trying to make the form submit button be disabled when the user clicks out of the input field

2 Answers2