Search jQuery

jQuery Forum

Disable/Enable button in form

in Getting Started • 2 years ago

Well i create one function

$(document).ready(function(){
    $("input[type=submit]").attr("disabled", "disabled");

    if ( $('#nome').is(":empty") ) {
        alert ("verdadeiro");
    }
    else {
        alert ("entrou no if");
        $("input[type=submit]").removeAttr("disabled");
    }

});

Basically when you open the page, the button is disabled, but ok. . . my problem is this.

This function runs once, then the button is never enabled and I wanted to get her to keep checking the inputs every time I typed something, so that when she had something written on all inputs, the button will be enabled

Replies(7)

rickvhoeij

Re: Disable/Enable button in form

2 years ago

Hey,

To achieve that you need to put a change event on your inputs. I think the '#nome' is a input with the name of somebody. I would do something like this on you form:

//On document load
$(function(){
//Set button disabled
$("input[type=submit]").attr("disabled", "disabled");
//Append a change event listener to you inputs
$('input').change(function(){
//Validate your form here, example:
var validated = true;
if($('#nome').val().length === 0) validated = false;
//If form is validated enable form
if(validated) $("input[type=submit]").removeAttr("disabled");
});
//Trigger change function once to check if the form is validated on page load
$('input:first').trigger('change');
})

That should do the trick. Hope this helps.

Greetz,

Rick

jQuery profile

lolz1m

Re: Disable/Enable button in form

2 years ago

Thanks man, worked perfectly.

But I have one more doubt.
Works with one field but not working with others, takes a look

http://www.djazillitoral.com.br/novo/contato.php

The button is disabled until you enter the first field a value. . . I put more exceptions, but only takes the first field.

lolz1m

Re: Disable/Enable button in form

2 years ago

I got it, thank you so much dude.

Here is the code for those who need

$(document).ready(function(){
// Set button disabled
// Pega o botão de submit e deixa ele desabilitado
$("input[type=submit]").attr("disabled", "disabled");
// Append a change event listener to you inputs
// Executa esta função caso tenha alguma mudança em algum input ou textarea
$('input, textarea').change(function(){
// Validate your form here, example:
// Validação do formulário
// Create a validation var
// Cria uma variavel de auxilio na validação
var validacao;
// Armazena os valores dos campos
var nome = $('#nome').val();
var email = $('#email').val();
var menssagem = $('#menssagem').val();
// Se os campos estiverem vazios a validacao continua sendo falsa
// e o botão não é habilitado
if ( nome == ' ' && email == ' ' && menssagem == ' ' ) {
validacao = false;
}
// Se todos os campos tiverem algo neles
else if ( nome != '' && email != '' && menssagem != '' ) {
// validacao recebe verdadeiro e entra no if seguinte para habilitar o botao
validacao = true;
}
// If form is validated enable form
// Se for verdadeiro, o botão é habilitado
if(validacao == true) {
$("input[type=submit]").removeAttr("disabled");
}
});
//Trigger change function once to check if the form is validated on page load
$('input:first').trigger('change');
});

ayupmeduc..

Re: Disable/Enable button in form

2 years ago

This didn't quite work for me in jquery 1.6.1, to disable I had to use a different selector (although the selector used in your example did work for the removeAttr method).

$(":submit").attr('disabled', 'disabled');

douglas.e..

Re: Disable/Enable button in form

6 months ago

I created a widget that can completely disable or present a read-only view of the content on your page. It disables all buttons, anchors, removes all click events, etc., and can re-enable them all back again. It even supports all jQuery UI widgets as well. I created it for an application I wrote at work. You're free to use it.

Check it out at ( http://www.dougestep.com/dme/jquery-disabler-widget ).

LeonRevill

Re: Disable/Enable button in form

3 months ago

I wrote a tutorial with an example of a solution to this, it might be of some use to a few people: jquery disable button.

Take care,

Leon.

mrmrdv

Re: Disable/Enable button in form

3 months ago

Thank you Leon for the tutorial on your site. I've been waiting months for someone to post an explanation in a way that I can understand. I needed two fields to be filled before the submit could be enabled.

Here's what I came up with:
    $(function () {
        $('#prequest').keyup(function () {
            if ($(this).val() == '') {
                $('.toggle').prop('disabled', true);
            } else if ($('#pname').val() == '') {
                $('.toggle').prop('disabled', true);
            } else {
                $('.toggle').prop('disabled', false);
            }
        });
    });

This works for me but if there is a shorter or better way to accomplish the same thing, I'm all ears.

Top Reply

Response title

Attachments

jQuery Forum

Disable/Enable button in form

Replies(7)

Re: Disable/Enable button in form

Re: Disable/Enable button in form

Re: Disable/Enable button in form

Re: Disable/Enable button in form

Re: Disable/Enable button in form

Re: Disable/Enable button in form

Re: Disable/Enable button in form

Statistics

Tags

Actions

Related Posts