indexing form elements with jquery

Question

I've been searching around and all the answers I've seen will use something along the lines of $('form :input')$ to get all of the inputs. But I already have a reference to the form using $("form").submit() and I just need to grab a specific input field from the fieldname. I'm unsure of how to use $(this) with additional selectors to get the forms specific elements

So, how would I go about doing that.

Example of the bit of code I need to workout.

$('form').submit(function(){
    var form = $(this)
    var form_errors = array_of_errors
    for(var fieldname in form_errors){
        var errors = form_errors[fieldname]
        var field = \\how to get this
        \\ Something like $(form, 'input[name='+fieldname+']') maybe?
    }
});

It's $('input[name='+fieldname+']', form) the correct syntax. documentation here — Fez Vrasta
– Fez Vrasta, Commented Feb 15, 2016 at 19:36
Okay, got it working I needed to remove the $ on var form = $(this) on the initial function part below .submit(). So var form = this worked. And I had it backwards. Post as solution? — Pythonista
– Pythonista, Commented Feb 15, 2016 at 19:38
try this $('input[name="'+fieldname+'"]', form) if you have special chars in you name — Sunand
– Sunand, Commented Feb 15, 2016 at 19:42

Fez Vrasta · Accepted Answer · 2016-02-15 19:52:06Z

1

`$(selector, context)`

jQuery selectors can have a second argument, used to define their context.

$(`input[name=${fieldname}]`, form);

will do the trick.

This means that your selector will look only inside the element you have passed as context.

Documentation: http://api.jquery.com/jquery/#jQuery-selector-context

`$(context).find(selector)`

An alternative could be to use find() in conjunction with the context:

$(form).find(`input[name=${fieldname}]`);

edited Feb 15, 2016 at 19:52

answered Feb 15, 2016 at 19:47

Fez Vrasta

15k25 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vol7ron · Accepted Answer · 2016-02-15 20:36:14Z

$('form').submit(function(){
    var $form       = $(this),             // good naming practice to use $ to signify jQuery object
        form_errors = validateForm(this);  // semi-colon

    var fields = Object.keys( form_errors );
    for ( var i=0,n=fields.length; i<n; i++ ){
       var field  = fields[i],
           errors = form_errors[field],
           $field = $form.find('input[name=' + field + ']');

       $field.applyErrorMarkup(errors);    // whatever you plan to do with the field
    }
});



// Pseudocode of one possible way to validate your form
function validateForm(frm){
   var errors = {};

   // BEGIN LOOP: <insert code to iterate over fields and validity checks>
   var field = 'fieldname';            // placeholder

   if( true /* error found */ ){
      var err = errors[field];
      var msg = 'new error message';   // should be the dynamic validity check error message (e.g., 'only numbers permitted')
      errors[field] = err && [msg].concat( err ) || msg;
   }
   // END LOOP

   return errors;
}

Collectives™ on Stack Overflow

indexing form elements with jquery

2 Answers 2

`$(selector, context)`

`$(context).find(selector)`

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

$(selector, context)

$(context).find(selector)

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`$(selector, context)`

`$(context).find(selector)`