I'm currently using form.serialize() in an ajax request to submit a contact form, but my problem is that form.serialize() grabs ALL form elements including "buttons".
example form:
name (input type = text)
email (input type = text)
body (text area)
submit (input type = button)
clear (input type = reset)
I'd only like to serialize form elements which are NOT of type BUTTON, RESET or PASSWORD.
is there a easy solution to this?
Hi,
It's a bit of a wild guess, and probably not the only solution, but one way I'm thinking about is :
$('YOUR_FORM_ID').getElements()Enumerable.rejectForm.serializeElementsIn code, something like this might do :
Form.serializeElements(
// We need the list of all elements
// that are not rejected by the inner function
$('YOUR_FORM_ID').getElements().reject(function (formElement) {
// this function must return :
// - true for an element that you want to keep
// - false for an element you don't want to keep (you have to return false for your buttons, for instance)
if (formElement.type == 'radio' || formElement.type == 'checkbox') {
return false;
} else {
return true;
}
})
);
And the output (which you'll want to capture into a variable, of course), is somthing like this :
"lol=15&dt=0"
And/or you can use the second, optional, parameter of Form.serializeElements if you want to get a Hash / an Object, instead of a query string.
Note : For this example, I didn't filter out the elements you specified : the form I used to test didn't have exactly what you were asking for, so I filtered out some other stuff...
So, you will have to adapt the condition in the function.
Hope this help ; have fun !
I would expect that if you omit the name parameter on the button inputs, the buttons won't be serialized. My expectation is based on the fact that serialize is supposed to mimic the way a form is serialized on submit and inputs without names are not sent as form parameters. I coded up a simple test, which seems to show this. Click the Examine button and you get "text=bob". Toggle a check box and you get "cb2=on&text=bob". The submit button value is never included.
<script type="text/javascript">
$(document).observe('dom:loaded', function() {
$('btn').observe('click', function() {
alert($('form').serialize());
return false;
});
});
</script>
</head>
<body>
<form id='form'>
Checkbox 1 <input type="checkbox" id="cb1" name="cb1" />
Checkbox 2 <input type="checkbox" id="cb2" name="cb2" /><br />
<input type='text' name='text' value='bob' />
<input type="submit" id="btn" value="Examine" />
</form>