Menu
I have a pretty complex form that provides real-time validation and feedback to the user using it as they type in data. Parts of the form may be disabled due to form "business logic" of the inputs, but the server side needs to know the value of these disabled inputs to do some of its checking in the Ajax requests.
I was using jQuery to serialize the entire form, $(form).serialize(), and sending all of this data to the server during my Ajax requests, but this serialized data will be missing any inputs that are disabled. So what is the best way to include all of the form data (even disabled inputs) with each Ajax request?
My current thought is to attach a function to ajaxStart (callback) that would create a client side hash-map of all form inputs' disabled attribute, enable all the inputs, serialize, and then set each form's disabled attribute back to its original value. But this seems overly complex, and I wanted something simpler that wouldn't be as brittle.
351
jQuery ajax() Method. The jQuery ajax() method provides core functionality of Ajax in jQuery. It sends asynchronous HTTP requests to the server.
The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
contentType: It's default value is: “application/x-www-form-urlencoded” and it is used when data send to the server.
XMLHTTPRequest object is an API which is used for fetching data from the server. XMLHTTPRequest is basically used in Ajax programming. It retrieve any type of data such as json, xml, text etc. It request for data in background and update the page without reloading page on client side.
Try doing something like this to serialize the form:
$(function() {
$('input[type=button]').click( function() {
var form = $('form').serialize();
$('input[disabled]').each( function() {
form = form + '&' + $(this).attr('name') + '=' + $(this).val();
});
});
});
Test HTML
<form action="/action">
<input type='text' disabled='disabled' value='hey' id='hey' name='hey' />
<input type='text' value='ho' id='ho' name='ho' />
<input type='text' value="hi" id='hi' name='hi' />
<input type='button' value="Serialize" />
</form>
Output
ho=ho&hi=hi&hey=hey
Parts of the form may be disabled due to form "business logic" of the inputs
You can use "readonly" attribute to disable those input fields. Do like this:
<input type="text" readOnly="readOnly" />
The readonly attribute specifies that an input field should be read-only. A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.
from: HTML input readonly Attribute
A read-only field also can be submitted to server as query string.
31
If your server accepts JSON, you can create a JSON object with jQuery (use jQuery select statements to include the necessary input tags), then send it to the server as an object - more information here: http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/.
Basically, do something like this:
var formInputs = { };
$('input[type=text]').each(function() {
formInputs[this.id] = this.value;
});
Well another option is to simply add a hidden field with the value you wan't posted to the server.
Remember to use a different (dummy) id for the tag that you disable to avoid any conflict.
34
To send the disabled value to the backend using .serilize() through a form submit using jQuery to Ajax, it is:
<HTML>
<HEAD>
<script>
$(document).ready(function(){
$("#submid").click(function() { // loginForm is submitted
$('#ayyappa').removeAttr('disabled');
$.ajax({
url: "urls",
data:{
"sel_opt": $("#ayyappa").attr("value"),
}
}); // Ajax
$("#Number").attr("disabled", "disabled");
}); // Click
});
</script>
</HEAD>
<BODY>
<input type='text' id="ayyappa" name='ayyappa' value="ayyappa" disabled>
</BODY>
</HTML>
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
