CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer-10
jiraiya
jiraiya

Reputation: 997

input field is read only after removing disabled attribute with jquery

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.

Upvotes: 0

Views: 3159

Answers (4)

reggaemahn
reggaemahn

Reputation: 6648

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/

Upvotes: 2

Vision
Vision

Reputation: 110

I think you need to change

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

to

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

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

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');
});

Upvotes: 2

Four_lo
Four_lo

Reputation: 1150

You need to call .change after

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

Upvotes: 0

Related Questions