Como seleciono o formulário pai com base em qual botão de envio é clicado?

Eu tenho uma página da web com 3 formulários. Não aninhado, apenas um após o outro (eles são quase idênticos, apenas uma variável oculta que é diferente). Um usuário preencherá apenas um formulário e eu gostaria de validar / etc todos os formulários com apenas um script JS.

Então, como, quando um usuário clica no botão de envio do formulário nº 1, faço meu script js lidar apenas com os campos do formulário1? Acho que tem algo a ver com $ (this) .parents, mas não tenho certeza do que fazer com ele.

Meu script de validação (que eu usei em outro lugar, com apenas um único formulário) é mais ou menos assim:

$(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}

Então, preciso substituir itens como $ ("# name"). Val () por $ (this) .parents ('form'). Name.val ()? Ou existe uma maneira melhor de fazer isso?

Obrigado!

Você pode selecionar o formulário assim:

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

No entanto, geralmente é melhor anexar o evento ao evento de envio do próprio formulário, pois ele será acionado mesmo ao enviar pressionando a tecla Enter em um dos campos:

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

Para selecionar campos dentro do formulário, use o contexto do formulário. Por exemplo:

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

Encontrei esta resposta ao pesquisar como encontrar a forma de um elemento de entrada. Eu queria adicionar uma nota, porque agora existe uma maneira melhor do que usar:

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

Não tenho certeza de quando foi adicionado ao jQuery, mas o método mais próximo () faz exatamente o que é necessário de maneira mais limpa do que usar parent (). Com o mais próximo, o código pode ser alterado para isso:

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

Ele percorre e encontra o primeiro elemento que corresponde ao que você está procurando e para por aí, portanto não há necessidade de especificar: primeiro.

Para obter o formulário que o envio está dentro, por que não apenas

this.form

Caminho mais fácil e rápido para o resultado.

Eu usei o seguinte método e funcionou bem para mim

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

$('#mybutton').closest("form") fez o truque para mim.

Eileen: Não, não é var nameVal = form.inputname.val();. Deve ser ...

em 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();

Ou em JavaScript:

var nameVal = this.form.FieldName.value;

Ou uma combinação:

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

Com o jQuery, você pode fazer um loop através de todas as entradas no formulário:

$(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();
  ....
  });