jQuery: how to detect form by name

Go To StackoverFlow.com

1

I have problem to add jQuery to some existing code, please help.

We have the same form (same form name, same fields, same submit button, no id or class defined for the form) appeared couple of times on a page, now I need to validation the form with jQuery, without passing in the form object, can jQuery tell which form was submitted?

Thanks everyone for your response, problem solved :-)

2012-04-04 17:10
by June
If you have the ability to modify the page to add some jquery-based functionality, why not also add something in the forms themselves to distinguish them from each other - Chris Farmer 2012-04-04 17:12
You say that the forms are the "same" but seem to care which form is submitted. Is that because there are different validation rules that depend on the specific form that is being validated? I guess I'm wondering why you even care which form is being submitted if they're identical in all meaningful respects - Chris Farmer 2012-04-04 17:16
the form page is shared with others, so I can only add the jQuery in the script fil - June 2012-04-04 17:17
forms are exactly the same, but I noticed my form validation only work with the very first form. if I submit the second, it showed no input value. so I tried put value in both form then submit the second form, but noticed that jQuery only submitted the first instead of the second - June 2012-04-04 17:20
So you already have some jquery-based form validation hooked up? It would benefit you to show that code, I think. Then you could get some more specific help - Chris Farmer 2012-04-04 17:23
thank you Chris. Here's the situation: we have some existing forms, now need to install a plugin, I cannot touch the existing form, and I cannot touch the plugin, the only thing I can play with is the javascript. Now the javascript is detecting the form fields by field id, how can it tell which form's field it's called? var fieldValue = $('#' + ids).val() - June 2012-04-04 17:29


1

From your question's comments, it looks like you might need to specify the form's context along with your selector:

$('form').submit(function() {
    var form = $(this);
    var myInputValue = $("input[name='myinput']", form).val();
    // myInputValue is now the value of the myinput control that is 
    // within the submitted form
});

Note that the jquery function takes an optional second argument that is the context of the selection. This should help you find input elements only within your submitted form.

Check the docs here:

http://api.jquery.com/jQuery/#expressioncontext

@NiftyDude's answer gets at the same issue, though he doesn't use jquery specifically to get the children of the currently submitting form.

2012-04-04 17:36
by Chris Farmer
great, that solved my problem - June 2012-04-04 18:08
Thanks alot Chris - June 2012-04-04 18:09


0

It does not matter whether you have #id or .class attached to the <form> tag in order to select it.

Try this:

$('form').submit(function () {
   //put your ajax submission code here...
});
2012-04-04 17:13
by codef0rmer


0

$("form[name='IDENTIFIER']") This is useful if you have multiple forms on a single page to target a specific form

2012-04-04 17:13
by Mike


0

$('form').submit(function(e) {
   // $(this) refers to the current form being submitted

   // if you need to, for example iterate over all the inputs
   var inputs = $(this)[0].getElementsByTagName('input'); // array of inputs

   for(var i = 0; i < inputs.length; i++) { inputs[i].value; }

   // this is important to avoid recursive submit
   $(this)[0].submit();

   return false;
});
2012-04-04 17:13
by Andreas Wong


0

$('form').submit(function(){
    var form = $(this);
    var inputs = $('input', this);
    var isValid = true;

    //do validation on the inputs of the form submitted.

    if (isValid) {
        //do something
    }

     return false;
});

Alternatively, you could catch the submit input action (that is what I like to do):

$('input[type="submit"]').click(function(event){
    event.preventDefault();
    var form = $(this).nearest('form');
    var inputs = $('input', form).not(this);
    var isValid = true;

    //validate inputs
    if (isValid) form.submit();
});

Note that the isValid = true may not be needed depending on your code. It can be set to false if any of your elements fails validation and the form submit will not proceed. If you are using a validation library that does this for you and submits the form if valid, it will not be needed.

Some validators set an invalid class on each item that fails and you can just check for the presence of inputs in the form that have that class to determine if the form should be submitted.

2012-04-04 17:14
by Bradley Mountford
why do I need the isValid - June 2012-04-04 17:24
@June you may not...depending on what you are using to do the validation. Updated answer to reflect this - Bradley Mountford 2012-04-04 17:29
the isValid is just a flag that you will set when you determine that the input fields are in a valid state, hence the //do validation on the inputs... comment - Chris Farmer 2012-04-04 17:29
@June You may have been refering to the isValid in the submit function call...that was actually an erroneous parameter left over from a faulty direction I was taking my submit function...:) It has been removed - Bradley Mountford 2012-04-04 17:39
Ads