在jQuery的一頁獲取元素多個表單的val

Question

例如，我在一個頁面上有3個表單。如果我點擊，我想從文檔中準備好的特定表單中獲取輸入測試2的值。

我該如何做到這一點？

<form action="" method="post" class="comment-form"> 
    <input name="test1" class="test1" type="text" value=""> 
    <input name="test2" class="test2" type="text" value=""> 
    <input name="test3" class="test3" type="text" value=""> 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
</form> 

<form action="" method="post" class="comment-form"> 
    <input name="test1" class="test1" type="text" value=""> 
    <input name="test2" class="test2" type="text" value=""> 
    <input name="test3" class="test3" type="text" value=""> 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
</form> 

<form action="" method="post" class="comment-form"> 
    <input name="test1" class="test1" type="text" value=""> 
    <input name="test2" class="test2" type="text" value=""> 
    <input name="test3" class="test3" type="text" value=""> 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
</form> 

$('.submitform').on('click', function(e){ 
    e.preventDefault(); 
    ???---??? 
}); 

Answer 1

首先，要實現這一點，你應該將事件掛鉤到submit事件form的，而不是按一下按鈕。

從那裏您可以使用this關鍵字來引用提交的表單，然後find()以獲得所需的輸入。試試這個：

$('.comment-form').on('submit', function(e) { 
 
    e.preventDefault(); 
 
    var test2 = $(this).find('input[name="test2"]').val(); 
 
    console.log(test2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="post" class="comment-form"> 
 
    <input name="test1" class="test1" type="text" value=""> 
 
    <input name="test2" class="test1" type="text" value="1"> 
 
    <input name="test3" class="test1" type="text" value=""> 
 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
 
</form> 
 

 
<form action="" method="post" class="comment-form"> 
 
    <input name="test1" class="test1" type="text" value=""> 
 
    <input name="test2" class="test1" type="text" value="2"> 
 
    <input name="test3" class="test1" type="text" value=""> 
 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
 
</form> 
 

 
<form action="" method="post" class="comment-form"> 
 
    <input name="test1" class="test1" type="text" value=""> 
 
    <input name="test2" class="test1" type="text" value="3"> 
 
    <input name="test3" class="test1" type="text" value=""> 
 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
 
</form>

Answer 2

您應該使用form和submit事件，以獲取有關字段的值：

$('form').on('submit', function(e) { 
 
    e.preventDefault(); 
 

 
    console.log('Value of test2: ' + $(this).find('input[name=test2]').val()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="post" class="comment-form"> 
 
    <input name="test1" class="test1" type="text" value=""> 
 
    <input name="test2" class="test1" type="text" value=""> 
 
    <input name="test3" class="test1" type="text" value=""> 
 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
 
</form> 
 

 
<form action="" method="post" class="comment-form"> 
 
    <input name="test1" class="test1" type="text" value=""> 
 
    <input name="test2" class="test1" type="text" value=""> 
 
    <input name="test3" class="test1" type="text" value=""> 
 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
 
</form> 
 

 
<form action="" method="post" class="comment-form"> 
 
    <input name="test1" class="test1" type="text" value=""> 
 
    <input name="test2" class="test1" type="text" value=""> 
 
    <input name="test3" class="test1" type="text" value=""> 
 
    <input name="submit" class="submitform" type="submit" id="submit" value="Submit"> 
 
</form>

Answer 3

你可以試試..

$('.submitform').on('click', function(e){ 
var values = $(this).siblings('input[name="test2"]').val(); 
console.log('values:'+ values); 
e.preventDefault(); 
});