If input type text is empty, disabled the button type send with jQuery?

Question

I need a simple code to disable the button to send the form to the following conditions:

If the selected <input type="radio"> with ID "#radio_one" and then check only one <input type="text"> with ID "#text_one".

OR

If the selected <input type="radio"> with ID "# radio_two" and then check two <input type="text"> with ID "#text_one" and also with ID "#text_two".

And, if provided with one or two <input type="text"> will be empty, add for a button <input type="send"> attribute disabled="disabled" if, however, will once again fill this attribute is removed from the button.

Sorry for my English, I used Google Translator: (

I dont have another code, I hope you understand me, so I created some simple jQuery code which can then possibly edit.

Thanks

Edit: This does not work:

    $("#send_button").attr("disabled", "disabled");   

    if ($('#absence_one').checked && $('#cal_from').val().length > 0) {
        $("#send_button").removeAttr("disabled");
    }

    if ($('#absence_more').checked && $('#cal_to').val().length > 0) {
        $("#send_button").removeAttr("disabled");
    }

Henesnarfel · Accepted Answer · 2012-02-17 01:58:28Z

Check out my example here ~~jsfiddle~~.

I put a click listener on the radio to make it check to either disable or undisable the button

I put a keyup listener on the text input to make it check to either disable or undisable the button

EDIT

I made a slight change to the example here's the new one jsfiddle.

Also be sure you are double checking a submit on the server side. If someone disables javascript the button will be available for clicking.

$("#send_button").attr("disabled", "disabled");   

$("input[type='radio']").change(function()
{
    checkButton();
});

$("input[type='text']").keyup(function()
{
    checkButton();
});

function checkButton()
{
    if (($('#absence_one').is(":checked") && $('#cal_from').val().length > 0) || ($('#absence_more').is(":checked") && $('#cal_to').val().length > 0)) {
        $("#send_button").removeAttr("disabled");
    }
    else
    {
        $("#send_button").attr("disabled", "disabled");
    }
}

Charlie G · Accepted Answer · 2012-02-17 00:40:18Z

1

If I understand, you want to disable the submit button if either pair of radio button/textbox are unfulfilled. If so:

$("input[type=submit]").attr("disabled", "disabled");   

if ($('#radio_one').checked && $('#text_one').val().length > 0) {
    $("input[type=submit]").removeAttr("disabled");
}

if ($('#radio_two').checked && $('#text_two').val().length > 0) {
    $("input[type=submit]").removeAttr("disabled");
}

answered Feb 17, 2012 at 0:40

Charlie G

82410 silver badges22 bronze badges

2 Comments

Edoras Over a year ago

Yes you understand it well, but the code does not work. IDs are correct, but the button is still disabled after entering text.

$("#send_button").attr("disabled", "disabled");     		if ($('#absence_one').checked && $('#cal_from').val().length > 0) {     		$("#send_button").removeAttr("disabled"); 		}  		if ($('#absence_more').checked && $('#cal_to').val().length > 0) {     		$("#send_button").removeAttr("disabled"); 		}

Charlie G Over a year ago

try using .attr("disabled", "true") instead

Collectives™ on Stack Overflow

If input type text is empty, disabled the button type send with jQuery?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related