input field is read only after removing disabled attribute with jquery

Question

A strange one here guys.

I have a form with a number of fields and one submit button. All of the fields are set to disabled at first except the email field.

I have a method which runs and checks the email field for changes. If it changes then all the other fields are enabled. This works perfectly in firefox, chrome and internet explorer 7/8/9 but in 10 it will not work as shown.

In IE10 all the fields which should be disabled are, but the email field which is not greyed out behaves as if its read only and will not allow entry or focus.

I was initially using the .prop() method to change the disabled state but some of the older IE versions has issues with it so I have instead used the attr() and removeAttribute() methods. Any ideas are appreciated.

Solutions added below - Thanks everyone!!

<form id="query_form" class="form-inline" enctype="multipart/form-data" action="" method="post">

<input type="text" class="input-large" placeholder="email" id="email" name="email" value="" />

<input type="text" class="input-small" placeholder="start date" id="sd" name="sd" value="" disabled="disabled"/>

<input type="text" id="ed" class="input-small" placeholder="end date" name="ed" value="" disabled="disabled"/>

<button type="submit" class="btn" id="run_query" name="run_query" disabled="disabled">Run Query</button>

</form>

function check_required_fields(){
        var email = $.trim($("#email").val());
        if(email.length > 0){
            $("#query_form").find(":input").not("#email").each(function() {
             $(this).removeAttr('disabled');    
        });
        }else{
            $("#query_form").find(":input").not("#email").each(function() {
             $(this).attr('disabled', true);
              });
        }
}
$(document).ready(function(){
var timer;
$("#email").on("change keyup paste", function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        check_required_fields()
    }, 0);
}).triggerHandler('change');
    });

Finally one more tidbit of information I'm using Jquery 1.8.3 and am using bootstrap. The console in firebug shows no errors of any kind nor does developer tools in IE10.

Final piece of the puzzle.

In another script I am using the same code with one edit, it operates on two fields. Thus it looks like following:

<form id="query_form" enctype="multipart/form-data" action="" method="post">

<input type="text" class="input-large" placeholder="email" id="email" name="email" value="" />

<select id="qt" name="qt">
<option selected="selected" value="">select query type...</option>
<option value="taxon_group">species group</option>
<option value="site_name">site name</option>
<option value="taxon_name">species name</option>    
</select>

<input type="text" id="ed" class="input-large" placeholder="end date" name="ed" value="" disabled="disabled"/>

<button type="submit" class="btn" id="run_query" name="run_query" disabled="disabled">Run Query</button>

</form>
function check_required_fields(){
        var email = $.trim($("#email").val());
        var query_type = $("#qt").val();
        if(email.length > 0 && query_type.length > 0){
            $("#query_form").find(":input").not("#email, #qt").each(function() {
             $(this).removeAttr('disabled');    
        });
        }else{
            $("#query_form").find(":input").not("#email, #qt").each(function() {
             $(this).attr('disabled', 'disabled');
              });
        }
}
    $(document).ready(function(){
    var timer;
    $("#email, #qt").on("change keyup paste", function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            check_required_fields()
        }, 0);
    }).triggerHandler('change');
    });

Things work well except that the email field looses focus after each key press in IE10. Any ideas why? It does not happen in the other script with the same function applied to just the email field.

When you're calling check_required_fields(); at the end, is it not messing up with the email input? I say that because when you're looping through the form elements, there's nothing excluding the email input from being manipulated. — emerson.marini
– emerson.marini, Commented Jul 26, 2013 at 14:27
well before the function completes just inside its closing bracket the email field is set to enabled. That should sort that part. The reason that the function is called once also on page load is because some of the fields are sticky using php so this will check to see if the email is already set using from the post array and will thus enable the other fields. — jiraiya
– jiraiya, Commented Jul 26, 2013 at 14:33
The jsfiddle is not working because you have not included the form tag with the #id which jquery is using to search for the inputs I think. — jiraiya
– jiraiya, Commented Jul 26, 2013 at 14:39

A. Wolff · Accepted Answer · 2013-07-26 14:51:15Z

2

Remove the oninput event, looks like interfering with attribute placeholder in IE10. BTW, as you were already binding onkeyup and onchange bound onpaste instead which should give finally quite the same behaviour as oninput used with keyup/change.

You have to delayed a little events in order to make onpaste working and btw to avoid useless multi calls.

DEMO

$(document).ready(function () {
    var timer;
    $("#email").on("change keyup paste", function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            check_required_fields()
        }, 0);
    }).triggerHandler('change');
});

edited Jul 26, 2013 at 14:51

answered Jul 26, 2013 at 14:35

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jiraiya Over a year ago

Absolute legend thanks a million for this. Would you believe me if I told you that I had actually suspected timing yesterday but then dismissed it when it worked in all the other IE versions. I ran into something in Chrome like this before when developing using adobe flex. Thanks a million for the help, it is much appreciated.

jiraiya Over a year ago

One more thing, I wonder if you would take a look at the final part of the puzzle that I posted if you can get the chance. Thanks.

A. Wolff Over a year ago

I'm unable to reproduce behaviour you are describing in IE10: jsfiddle.net/KXa6w

jiraiya Over a year ago

just added the slightly updated function to the question now sorry I had forgot to put it in. its practically the same just checking the two fields now.

A. Wolff Over a year ago

Problem is you disabled all inputs if (email.length > 0 && query_type.length > 0) return false and the reenabled email and qt. IE make input loose focus if you disabled it. So what do you want to do exactly?

|

reggaemahn · Accepted Answer · 2013-07-26 15:22:30Z

2

There is an easy way to achieve this if you are open to suggestions.

$(function(){
$("#email").keyup(function(){
    if($(this).val().length <= 0){
        $(this).siblings().each(function(){
            $(this).attr("disabled", true);
        });
    }
    else{
        $(this).siblings().each(function(){
            $(this).attr("disabled", false);
        });
    }
  });
});

Here is a fiddle: http://jsfiddle.net/6GnUS/10/

edited Jul 26, 2013 at 15:22

answered Jul 26, 2013 at 14:33

reggaemahn

6,7286 gold badges39 silver badges64 bronze badges

1 Comment

jiraiya Over a year ago

Good suggestion which I will keep in mind for future scripts also. Thanks.

Four_lo · Accepted Answer · 2013-07-26 14:32:32Z

0

You need to call .change after

   $(this).prop('disabled', false).change();

answered Jul 26, 2013 at 14:32

Four_lo

1,15010 silver badges29 bronze badges

3 Comments

emerson.marini Over a year ago

Error: Too much recursion.

Four_lo Over a year ago

yea you are creating an infinite loop by doing this, you need to exit the loop in some manner.

Four_lo Over a year ago

I would add a variable that you alter at the end of your function and put a test at the beginning of the function to test it's value. If you like this option and want an example let me know

Vision · Accepted Answer · 2013-07-26 14:53:03Z

0

I think you need to change

$(this).attr('disabled', true);

to

$(this).attr('disabled');

answered Jul 26, 2013 at 14:53

Vision

1101 silver badge7 bronze badges

Collectives™ on Stack Overflow

input field is read only after removing disabled attribute with jquery

4 Answers 4

7 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related