How to disable a specific button if there is an error message?

Question

enter image description here

I have here a create account form, beside my User ID field the one with the Sorry, User ID already exists! is an error message generated by AJAX that notifies the user if the user id he entered obviously exists. Username field here also has the same function with User ID. my problem is how can I disable my Create Button if the error message displayed is Sorry, User ID/ Username already Exist? . by the way the message changes into User ID/ Username available otherwise.

Here is my Jquery code

   $(document).ready(function()
   {
     $('#create_btn').hover(function()
     {
       var id = $('#labeler').val();
       var user = $('#labeler2').val();

    if((id.indexOf('available') >= 0) && user.indexOf('available') >= 0)
    {
        $('#create_btn').removeProp('disabled');
    }
    else
    {
        $('#create_btn').prop('disabled', true);
    }
});
});

Just disable the button where you _decide_ to show `Sorry, User ID already exists!` — mshsayem, Apr 24 '13 at 01:41
@mshsayem wat jquery function would I use if when I would disable the button? eg. btn_create.hover()? — Þaw, Apr 24 '13 at 01:53
I dont see any ajax call here. which function is showing the message: 'Sorry, User ID already exists' ? — mshsayem, Apr 24 '13 at 02:22
@mshsayem my AJAX is ok, i dont have a problem with it, my concern here is just how to disable the create button based on the text displayed from my notification boxes, that is why I didnt include my AJAX code, the code I posted was just about disabling my create button based on what the notification textboxes contains — Þaw, Apr 24 '13 at 02:25
I am not telling that your ajax is not ok. But that function should take care of this kind of task; Just after knowing that user already exists. Then you don't need to check whether 'sorry' is written or not. btw, you can try using `$('#labeler').text()` instead of `$('#labeler').val()`. I suspect `#labeler` is a `span` — mshsayem, Apr 24 '13 at 02:38
`$(document).ready(function() { $('#create_btn').hover(function() { var id = $('#labeler').val(); var user = $('#labeler2').val(); if((id.indexOf('available') >= 0) && user.indexOf('available') >= 0) { $('#create_btn').removeProp('disabled'); } else { $('#create_btn').prop('disabled', true); } }); });` here is my new code, I almost got it , but the problem is when you hover a disabled button It wont get the .hover() of Jquery — Þaw, Apr 24 '13 at 02:48
Can you show the ajax calling function which is populating 'sorry' ? — mshsayem, Apr 24 '13 at 02:55
@mshsayem thank you very much for your help, Ive used the .prop() method you suggested. I've posted my answer below, thank you. — Þaw, Apr 24 '13 at 03:04

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

As you are using jQuery, you can do this:

$("#buttonId").prop("disabled",true)

More discussion here

I suspect the labeler/labeler2 are span/div. In that case you should use text(), not val(). Change those lines into:

var id = $('#labeler').text();//user id notification AJAX
var user = $('#labeler2').text();//username notification AJAX

edited May 23 '17 at 11:50

Community

1
1

answered Apr 24 '13 at 02:00

mshsayem

17,557
11
61
69

score 0 · Accepted Answer · answered Apr 24 '13 at 03:02

I ended up doing this because the code I used above was able to disable the create button but wasn't able to enable it again because .hover() cant read a disabled button. Thank you for all of your help!

$(document).ready(function()
{
    $(':text').blur(function()
    {
        var id = $('#labeler').val();
        var user = $('#labeler2').val();

        if((id.indexOf('available') >= 0) && user.indexOf('available') >= 0)
            $('#create_btn').removeProp('disabled');
        else
            $('#create_btn').prop('disabled', true);
    });
});

How to disable a specific button if there is an error message?

2 Answers2