Home > Developer > JavaScript
For more information about jquery form serialization, see jquery serialization.
This article mainly introduces some precautions for jquery form serialization. We will share the notes for your reference and learning. I will not talk about them here. Let's take a look at the details:
Let's talk about the differences between readonly and disabled in the form:
Readonly is only valid for input and textarea, but disabled is valid for all form elements, including radio and checkbox.
If disabled is used in the form, the user cannot select it. That is to say, this text box cannot get the focus, while readonly can get the focus, but cannot be modified. It is read-only.
Most importantly, when sending a form, the form control property does not have the name attribute. This field is not sent, nor does it form a key-value pair. The Form Control property is disabeld, this field will not be sent, nor will it form a key-Value Pair
Test 1. The name attribute is not set:
<Body> <form id = "form1"> <select> <option value = "0"> huluwa test 0 </option> <option value = "1"> huluwa Test 1 </option> <option value = "2"> huluwa Test 2 </option> </select> <input type = "button" id = "btnSubmit" value = "Submit" name = "btnSubmit"/> </form> <script type = "text/javascript" >$ (document ). ready (function () {$ ("# btnSubmit "). click (function () {console. log ("serialize:"); console. log ($ ("# form1 "). serialize (); console. log ("serializeArray:"); console. log ($ ("# form1 "). serializeArray () ;};}); </script> </body>
The output result is as follows:
serialize: serializeArray:[]length: __proto__: Array(0)
Test 2: Set the name attribute:
<Body> <form id = "form1"> <select name = "selectHuLuWa"> <option value = "0"> huluwa test 0 </option> <option value = "1 "> huluwa Test 1 </option> <option value =" 2 "> huluwa Test 2 </option> </select> <input type =" button "id =" btnSubmit" value = "Submit" name = "btnSubmit"/> </form> <script type = "text/javascript"> $ (document ). ready (function () {$ ("# btnSubmit "). click (function () {console. log ("serialize:"); console. log ($ ("# form1 "). serialize (); console. log ("serializeArray:"); console. log ($ ("# form1 "). serializeArray () ;};}); </script> </body>
The output result is as follows:
serialize: selectHuLuWa=0 serializeArray: [{…}]{name: "selectHuLuWa", value: "0"}length:1__proto__:Array(0)
Test 3. Set the readoly attribute:
<Body> <form id = "form1"> <select name = "selectHuLuWa" readonly = "readonly"> <option value = "0"> huluwa test 0 </option> <option value = "1"> huluwa Test 1 </option> <option value = "2"> huluwa Test 2 </option> </select> <input type = "button" id = "btnSubmit" value = "Submit" name = "btnSubmit"/> </form> <script type = "text/javascript" >$ (document ). ready (function () {$ ("# btnSubmit "). click (function () {console. log ("serialize:"); console. log ($ ("# form1 "). serialize (); console. log ("serializeArray:"); console. log ($ ("# form1 "). serializeArray () ;};}); </script> </body>
The test results are as follows:
Test 4. Set the disabled attribute
<Body> <form id = "form1"> <select name = "selectHuLuWa" disabled = "disabled"> <option value = "0"> huluwa test 0 </option> <option value = "1"> huluwa Test 1 </option> <option value = "2"> huluwa Test 2 </option> </select> <input type = "button" id = "btnSubmit" value = "Submit" name = "btnSubmit"/> </form> <script type = "text/javascript" >$ (document ). ready (function () {$ ("# btnSubmit "). click (function () {console. log ("serialize:"); console. log ($ ("# form1 "). serialize (); console. log ("serializeArray:"); console. log ($ ("# form1 "). serializeArray () ;};}); </script> </body>
The test results are as follows:
As a result, the form control does not have the name attribute, and the disabled attribute cannot be serialized.
** If you need to serialize disabled, the method is:
Remove the disabled Attribute before serialization. After serialization, add it. **
Summary
The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message to us. Thank you for your support.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
