从同一页面上具有相同类的espcific表单获取提交

Question

我试图从特定于jquery的表单中获取提交，并警告包含值id的字段类型hiden的值； 我尝试了这个。 但他获得的id值却始终相同。 这是代码jQuery

var form = $(".form");

form.submit(function() {
    alert(form.find('#id').val());
    return false;
});

这是代码html

<div>
    <form  action="" method="post" class="form">
        <input type="hidden" id="id" name="id" value="1" />
        <button class="submit"  type="submit" name="enviar" id="enviar">Enviar</button>
    </form>
<div/>
<div>
    <form  action="" method="post" class="form">
        <input type="hidden" id="id" name="id" value="2" />
        <button class="submit"  type="submit" name="enviar" id="enviar">Enviar</button>
    </form>
<div/>
<div>
    <form  action="" method="post" class="form">
        <input type="hidden" id="id" name="id" value="3" />
        <button class="submit"  type="submit" name="enviar" id="enviar">Enviar</button>
    </form>
<div/>

我错了

Answer 1

id="id"

无论位于何处，ID都应该是唯一的。 例如，尝试将其更改为id="id1"和id="id2" 。

Answer 2

您走在正确的轨道上。 但是您需要使用$(this)而不是form

它之前警告第一个值的原因是因为当您执行$('.form').val()时，即使有多个元素，它也会默认获得第一个值。 但是，当您使用$(this) ，它将获得已提交的特定.form 。

最后，避免对多个元素使用相同的ID。 您可以使用类之类的替代方法。 请参阅为什么具有多个具有相同id属性的HTML元素是一件坏事？

 var form = $(".form"); form.submit(function() { console.log($(this).find('.my-class').val()); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div> <form action="" method="post" class="form"> <input type="hidden" class="my-class" name="id" value="1" /> <button class="submit" type="submit" name="enviar" id="enviar">Enviar</button> </form> <div/> <div> <form action="" method="post" class="form"> <input type="hidden" class="my-class" name="id" value="2" /> <button class="submit" type="submit" name="enviar" id="enviar">Enviar</button> </form> <div/> <div> <form action="" method="post" class="form"> <input type="hidden" class="my-class" name="id" value="3" /> <button class="submit" type="submit" name="enviar" id="enviar">Enviar</button> </form> <div/> 

Answer 3

第一件事-不要创建具有相同ID值的多个DOM元素。 ID值必须唯一。

Answer 4

更改

form.find('#id').val()

到$(this).find('input').val()或$(this).find('#id').val()

当然，对每个元素使用唯一的ID