¿Cómo selecciono el formulario principal en función del botón de envío en el que se hace clic?

Tengo una página web con 3 formularios. No anidados, solo uno después del otro (son casi idénticos, solo una variable oculta que es diferente). Un usuario solo completará un formulario, y me gustaría validar / etc todos los formularios con un solo script JS.

Entonces, ¿cómo, cuando un usuario hace clic en el botón de envío del formulario n. ° 1, hago que mi script js solo se ocupe de los campos en el formulario 1? Supongo que tiene algo que ver con $ (this) .parents, pero no estoy seguro de qué hacer con él.

Mi script de validación (que utilicé en otro lugar, con solo una forma) se ve así:

$(document).ready(function(){
    $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;

        var nameVal = $("#name").val();
        if(nameVal == '') {
            $("#name").after('Please enter your name.');
            hasError = true;
        }


        if(hasError == false) {blah blah do all the processing stuff}

Entonces, ¿debo reemplazar cosas como $ ("# name"). Val () con $ (this) .parents ('form'). Name.val ()? ¿O hay una mejor manera de hacerlo?

¡Gracias!

Puede seleccionar el formulario de esta manera:

$("#submit").click(function(){
    var form = $(this).parents('form:first');
    ...
});

Sin embargo, generalmente es mejor adjuntar el evento al evento de envío del formulario en sí, ya que se activará incluso al enviar presionando la tecla Intro desde uno de los campos:

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

Para seleccionar campos dentro del formulario, use el contexto del formulario. Por ejemplo:

$("input[name='somename']",form).val();

Encontré esta respuesta al buscar cómo encontrar la forma de un elemento de entrada. Quería agregar una nota porque ahora hay una mejor manera que usar:

var form = $(this).parents('form:first');

No estoy seguro de cuándo se agregó a jQuery, pero el método más cercano () hace exactamente lo que se necesita de manera más limpia que usar los padres (). Con lo más cercano, el código se puede cambiar a esto:

var form = $(this).closest('form');

Atraviesa y encuentra el primer elemento que coincide con lo que está buscando y se detiene allí, por lo que no es necesario especificar: primero.

Para obtener el formulario que contiene el envío, ¿por qué no solo

this.form

El camino más fácil y rápido hacia el resultado.

utilicé el siguiente método y funcionó bien para mí

$('#mybutton').click(function(){
        clearForm($('#mybutton').closest("form"));
    });

$('#mybutton').closest("form") hizo el truco para mí

Eileen: No, no lo es var nameVal = form.inputname.val();. Debería ser cualquiera ...

en jQuery:

// you can use IDs (easier)

var nameVal =  $(form).find('#id').val();

// or use the [name=Fieldname] to search for the field

var nameVal =  $(form).find('[name=Fieldname]').val();

O en JavaScript:

var nameVal = this.form.FieldName.value;

O una combinación:

var nameVal = $(this.form.FieldName).val();

Con jQuery, incluso podría recorrer todas las entradas en el formulario:

$(form).find('input, select, textarea').each(function(){

  var name = this.name;
  // OR
  var name = $(this).attr('name');

  var value = this.value;
  // OR
  var value = $(this).val();
  ....
  });