Menu
If I'm clearing a form with 5 or more fields in IE11 using $('form input').val("") IE11 will crash. HTML:
<form>
<label>1</label><input type="text"/>
<label>2</label><input type="text"/>
<label>3</label><input type="text"/>
<label>4</label><input type="text"/>
<label>5</label><input type="text"/>
</form>
JS:
$(document).ready(function(){
$('#clearFormNormal').click(function(){
$("form input").val("");
});
});
When I'm doing this recursive and with a setTimeout it works.
JS:
function clearFields (counter) {
var i = counter || 0, deferred = new $.Deferred();
if ($("form input").eq(i).length === 1){
setTimeout(function(){
$("form input").eq(i).val("");
i = i + 1;
clearFields(i).always(function(){
deferred.resolve();
});
},0);
} else {
deferred.resolve();
}
return deferred.promise();
}
$(document).ready(function(){
$('#clearFormSetTimeout').click(function(){
clearFields();
});
});
See the http://jsfiddle.net/fransoverbeek/Cy5D5/7/ as well
Is this an IE11 bug?
813
I believe that this is an IE bug and I have created the following connect bug report: https://connect.microsoft.com/IE/feedback/details/811930/ie11-crash-when-clearing-multiple-input-fields-with-jquery
I have added a slightly modified version of your recursive function there as a work around. The function is slightly more generic and looks like this:
function clearFields (counter, selector) {
var i = counter || 0, deferred = new $.Deferred();
if (selector.eq(i).length === 1){
setTimeout(function(){
selector.eq(i).val("");
i = i + 1;
clearFields(i, selector).always(function(){
deferred.resolve();
});
},0);
} else {
deferred.resolve();
}
return deferred.promise();
}
$(document).ready(function(){
$('#clearFormNormal').click(function(){
$("form input").val("");
});
$('#clearFormSetTimeout').click(function(){
clearFields(0, $("form input"));
});
});
Please up-vote the connect issue.
How the clearFields function works:
First, note that I did not write the original function this was based off of, so the why of it working is only conjecture on my part.
The clearFields function is a recursive function. Each time it runs, it takes two parameters: counter (which is the index in the set of fields to be cleared) and selector (the jquery object that contains the set of fields to be cleared)
The function creates looks at the element specified by counter in the set of DOM elements specified by selector. If such an element exists, then it creates an asynchronous setTimeout which will clear that element. This async function then increments counter (which is called i here) and recursively calls clearFields. I believe that the recursiveness is key because I tried using just a setTimeout in a loop and it didn't work.
The recursion stops when counter goes past the index of the last element in the collection which is when selector.eq(counter).length !== 1
I think this function could further be improved by swapping the order of counter and selector parameters so that counter would be optional for the first call.
I have never needed to use the jQuery deferred code before, so I don't know what role that plays in this function.
61
I believe it is a bug of IE and it is not related to jQuery, as you can simply show it by the following html page like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<title>test</title>
</head>
<body>
<form id="form_1">
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="text" value="" size="10"/><br/>
<input type="button" value="reset" onclick="document.getElementById('form_1').reset();">
</form>.
</body>
</html>
One can find that IE 11 will crash after you reset the form.
43
try
$(':input',"#" + form.id)
.not(':button, :submit, :reset, :hidden')
.val('');
or
$("#" + form.id)[0].reset();
check this Clearing file input box in Internet Explorer
31
The fix for this bug was included in the IE updates for February 2014 released today on Windows Update.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
