CODEWITHSUNDEEP
javascriptjquery
Asynchronous
Asynchronous

Reputation: 3977

Why does JQuery NOT selector failed on Type Submit but works on Type Button

I have this code, which I have changed and tweak too many times to count but it does not work if the form button is a type="submit" and I can live with that but is there a reason, can someone please tell me why? If I change the type to type="button" then it works.

$(document).ready(function () {
    $('#btnSubmit').attr('disabled', true);
    $('#myForm :input:not(#btnSubmit)').blur(function () {
        if ($('#myField').val() == '') {
            $('#btnSubmit').attr('disabled', true);
        } else {
            $('#btnSubmit').attr('disabled', false);
        }
    });
});

I have about 25 JQuery books and they tell you how to use the Not operator but now where does it say the form button must have a type button and not a submit type for this to work.

Just trying to learn.

Note: The code above has been change so many times as I try to figure out why.

<form name="myForm" id="myForm" method="post" action="">
  <label for="myField">Name</label>
  <input type="text" name="myField" id="myField">
  <input type="button" name="btnSubmit" id="btnSubmit" value="Submit">
</form>

UPDATE:

*The issue I am having is when I click the button the button becomes disabled again: Can someone explain to me why this happens? After I enter some values and leave the field, the button is enabled, however, as soon as I click it gets disabled.

However, if I change the input type to button, the button is not disabled on click. I am not sure why this happens. This is why I originally thought this was an error or some kind of a support issue.

Just curious and for knowledge the benefit of knowledge.*

Upvotes: 0

Views: 169

Answers (3)

Mike C.
Mike C.

Reputation: 3114

I suspect that your not statement might be just fine. Are you sure that it's failing, have you debugged it? It's possible that your problem is really here: 

$('#btnSubmit').attr('disabled', true);

Have a look at the jQuery documentation regarded .attr() and .prop(). You should be using .prop() here because .attr() will often give you unexpected results if you don't understand how it works.

So change your code to use prop and if that doesn't fix your problem, debug your not selector.

$('#btnSubmit').prop('disabled', true);

EDIT:

Based on your comment, i reviewed your question again. Is this what is happening:

  1. Enter a value
  2. Button enables
  3. Press Button
  4. Page posts and after postback, button is disabled
  5. You want the button to be enabled after postback

If so, the problem is you disable your button on page load, but only enable it on a blur event. After a postback, the blur doesn't just happen automatically, but really the easiest solution is for you to manually trigger a blur after you disable the button (really you don't need to disable it if you trigger a blur):

$(document).ready(function () {
    $('#btnSubmit').prop('disabled', true);

    $('#myForm :input:not(#btnSubmit)').blur(function () {
        if ($('#myField').val() == '') {
            $('#btnSubmit').prop('disabled', true);
        } else {
            $('#btnSubmit').prop('disabled', false);
        }
    });

   $('#myField').blur();
});

Upvotes: 2

reggaemahn
reggaemahn

Reputation: 6648

If you only have one input field then why are you trying to use a not selector. You could grab it by it's id. 

$("#myField").blur(function(){    
    // Do stuff here.. 
});

And if you want to get all elements except the submit button, you could try:

$("#myForm").children("input[type=text]").each(function(){
    // Do stuff here..
});

Upvotes: 0

Ast Derek
Ast Derek

Reputation: 2729

Your code does work, here: http://jsfiddle.net/AstDerek/s5cyk/

What do you expect to happen with the code you are using?

Original answer:

I don't really understand what your code does, but it seems you are trying to target a button with an :input selector, so your code doesn't work as you expect. Maybe this selector can do the job:

$('#myForm :input:not(#btnSubmit), #myForm button:not(#btnSubmit)')

Upvotes: 0

Related Questions