jQuery form submit: add element, then $.post problems - javascript

On form submit I want to serialize the form's elements, then stick another field on, then submit with $.post. Can't quite get it. The form's submit action looks like:
data = $(this).serializeArray();
data.push({filter: $.toJSON(filter)});
$.post("/datawarehouse/new.php", data);
return false;
But it's just the form's fields and then undefined/undefined. For the record $.toJSON(filter) works as I've seen the output. Also tried:
data.filter = $.toJSON(filter);
And
data['filter'] = $.toJSON(filter);
Any ideas?

I think you might have better luck putting a hidden field in your form and on form submit, set the value of the hidden field. Let the jquery serializer handle the serialization.

Related

ink.sapo.pt how to use this form validation (onSuccess callback)

I've been trying for like 2 hours to get this form validator to work, but I can't..
http://ink.sapo.pt/javascript/Ink.UI.FormValidator.2/#Ink_UI_FormValidator_2-FormValidator_FormElement-FormElement
I mean, form gets validated when I press the submit button, and form posts data only after all fields are correctly.
But what I need is to actually set up the onSuccess callback, so that instead of using method="post", i can a function easily.
You'll need to use the neverSubmit option to do this.
This is a rather obscure option, but it's there in the FormValidator class (you may be looking at the FormElement class, which refers to each input element in a form and takes options such as that input element's label and validation rules.)
I've made a short example based on the official sample.
http://jsbin.com/toruyo/edit?html,console,output

Submit GET form in the url instead in the paramaters

I have a get method form which goes to
mysite.com/?p=search&q=QUERY
but I want to let the form send me to
mysite.com/search/QUERY.
I have rewritten URL turned on in .htaccess.
Any help? How do I do this?
Just remove the names of all these elements inside the form and take the values with js or jquery and set them to action attribute like
$('#formid).attr('action','/url/search/'+query);
You would do this in onsubmit event and return true so that form gets submitted.

Parsley.js skip validation on submit?

When I try to submit a form, either via an input[type=submit] or by calling form.submit(), Parsley validates the form and cancels the submission if invalid. Is there any way I can skip that validation since I'm manually calling validate on sections of my form?
Specifically what I'm trying to achieve is submitting partial versions of the form, so I validate a group and only that portion is sent to the server (even if the rest of the form is still not valid).
I you want to cancel Parsley default validation on submit event, you'll have to remove the submit.Parsley binded event on your form.
Doing a $('#yourform').off('submit.Parsley'); should solve your issue.
Best
Edit: For Parsley2, since events names have changed, it should be $('#yourform').off('form:validate');
if you want to skip single element just use :
data-parsley-excluded
Form fields that won't be validated by Parsley. For example, if you
want to add disabled and hidden fields to the existing list, use:
data-parsley-excluded="input[type=button], input[type=submit],
input[type=reset], input[type=hidden], [disabled], :hidden"
but if you want to validate a specific groupd then use:
data-parsley-group
Assign a group to a field for specific group validation. eg:
data-parsley-group="signup". This way, you could only validate a
portion of a form and not all the fields.
source :
http://parsleyjs.org/doc/index.html#psly-usage-form
When running the submit in JS you can do:
$('#yourform').parsley().destroy();
So with jQuery in code, it could look like this:
var $myForm = $('#yourform');
$("#submit-button").on('click',function(e){
e.preventDefault();
$myForm.parsley().destroy();
$myForm.submit();
});
As I answered here, adding formnovalidate to the button seems to work
https://stackoverflow.com/a/74746624/1148163

Always getting values from first form. What's wrong?

I have a webpage where there are several forms. It looks like .
When "Create" is clicked an ajax script checks the fields for illegal values in the first form, where the Create button belongs to. That's fine.
But when the "Save" button is clicked, it still checks fields from the first form, and not the form where the Save button belongs to.
My Ajax looks like this
$(document).ready(function(){
// $('form').submit(function() {
$('form').live('submit', function(){
var title = $('#title').val();
...
Is it here the problem could be? I have tried with the commented code, but that doesn't work either.
Any ideas where the problem could be?
$('#title').val(); means "Get the value of the one and only input that has the id title".
If you have violated the spec and have multiple elements with the same id, then browsers will generally recover from the error by returning the first such element.
You should probably change the id to something like: idOfForm_title (so that your <label> elements still work)
And then use: this.elements.title.value where title is the value of the name attribute (and this automatically resolves to the form on which the submit event fires).
I think you should give your forms a class, like class="create" for the first / create form and then class="edit" for the second / edit form.
Then you can amend your jQuery to look like
$(document).ready(function() {
// only work with the 'create' form
$('form.create').live('submit', function(e) {
e.preventDefault(); // stop the form's default action
// the rest of your code
});
// only work with the 'edit' form(s)
$('form.edit').live('submit', function(e) {
e.preventDefault(e); // stop the form's default action
// the rest of your code
});
});

How do I get the data submitted from a form with JQuery?

How can I get the data that is submitted from a form with jQuery?
I know I can bind the submit function to the form
$('form').bind('submit',function(){});
and I know I can serialize the data in the form:
$('form').serialize();
But how do I get the data that was actually submitted from the form? Like if there are two submit buttons, I want to know which one was pressed. If I handle the submission with PHP I can do that, but ideally I want to get a copy of the submitted data, then return true so that the form goes on to be processed by PHP normally.
Thanks!
The pressed submit button should be available in the serialized field list - and the other submit buttons shouldn't be in there.
However, apparently jQuery does not add submit buttons in there (testcase). See http://forum.jquery.com/topic/submit-event-serialize-and-submit-buttons-get-the-button-name for a workaround.

Categories