Disabling input fields in a form causing Javascript error in IE 7 (works fine in Firefox)
I have a form in which I am disabling all the input fields that is not hidden on jQuery(document).ready(function())
Here is my code:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <div xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
- xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
- xmlns:c="http://java.sun.com/jsp/jstl/core" lang="en" xml:lang="en" style="padding-bottom: 8px;">
- <script>
- jQuery(document).ready(function()
- {
- jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop('disabled', 'true');
- });
- </script>
- <h:form id="previewMarketingProgramForm">
- <div class="modal-content">
- <br /> <br /> <br />
- <div>
- <h4>Enrollment Form</h4>
- </div>
- <table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
- <tr>
- <td>
- <div id="formBuilderPreviewEnrollmentData">
- <h:outputText value="#{previewMarketingProgramBean.enrollmentFormBean.enrollmentFormContent}" escape="false" />
- </div>
- </td>
- </tr>
- </table>
- <br /> <br /> <br />
- </div>
- </h:form>
- </div>
Here is the Javascript error:
Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
Please tell me what could be causing this error. I am using jQuery-1.7.2-min.js
Here is the HTML generated source for this form for your reference:
- <!DOCTYPE html>
- <html> <head> <title>View Article - Liferay</title>
- <script src="http://xx:8001/vcc-theme/js/jquery-1.7.2.min.js"></script>
- <script src="http://xx:8001/vcc-theme/js/javascript.js"></script>
- <script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.min.js"></script>
- <script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.pager.js"></script>
- <script src="http://xx:8001/vcc-theme/js/jquery.autocomplete.js"></script>
- <script src="http://xx:8001/vcc-theme/js/jquery.simplemodal.1.4.2.min.js"></script>
- <script src="http://xx:8001/vcc-theme/js/jquery.scrollTo.js"></script>
- <script src="http://xx:8001/vcc-theme/js/ui.datepicker.js"></script>
- <script>
- jQuery(document).ready(function()
- {
- jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop("disabled",true)});
- </script>
- <form id="previewMarketingProgramForm" name="previewMarketingProgramForm" method="post"
- action="">
- <div class="modal-content">
- <br /> <br /> <br />
- <div> <h4>Enrollment Form</h4> </div>
- <table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
- <tr>
- <td>
- <div id="formBuilderPreviewEnrollmentData">
- <p> NAME: <input class="required" name="NAME" type="text" /></p> <p>  </p>
- <p> AGE: <input name="AGE" type="text" /></p> <p>  </p>
- <p> ADDRESS:<textarea name="ADDRESS"></textarea></p>
- </div>
- </td>
- </tr>
- </table>
- <br /> <br /> <br />
- </div>
- </form>
- </html>
I am getting this JS error in IE 7 (works fine in Firefox)