將1添加到提交的行值

Question

我想知道如何在提交表單的任何時候向嵌套div中的值添加1。

<form id="form1" name="form1" method="post" action="" class="submit"> 
    <table width="30%" border="0" cellspacing="4" cellpadding="4"> 
    <tr> 
     <td width="58%"><div class="fav_count">1</div></td> 
     <td width="42%"><input type="submit" name="button" id="button" value="Submit" /></td> 
    </tr> 
    </table> 
</form> 
<form id="form2" name="form1" method="post" action="" class="submit"> 
    <table width="30%" border="0" cellspacing="4" cellpadding="4"> 
    <tr> 
     <td width="58%"><div class="fav_count">2</div></td> 
     <td width="42%"><input type="submit" name="button2" id="button2" value="Submit" /></td> 
    </tr> 
    </table> 
</form> 
<form id="form3" name="form1" method="post" action="" class="submit"> 
    <table width="30%" border="0" cellspacing="4" cellpadding="4"> 
    <tr> 
     <td width="58%"><div class="fav_count">3</div></td> 
     <td width="42%"><input type="submit" name="button3" id="button3" value="Submit" /></td> 
    </tr> 
    </table> 
</form> 
<form id="form4" name="form1" method="post" action="" class="submit"> 
    <table width="30%" border="0" cellspacing="4" cellpadding="4"> 
    <tr> 
     <td width="58%"><div class="fav_count">4</div></td> 
     <td width="42%"><input type="submit" name="button4" id="button4" value="Submit" /></td> 
    </tr> 
    </table> 
</form> 

這裏有一個小提琴

https://jsfiddle.net/fgu42nxr/

與jQuery的任何幫助將不勝感激。謝謝

Answer 1

正如上面的評論中所提到的，當您提交表單時不能這樣做，因爲它會導致頁面重新加載。但是，您可以取消默認表單提交行爲並用ajax或其他東西重新實現。如果是這樣，你可以像這樣做：

$("#form1").on('submit', function(e){ 
    e.preventDefault(); 
    // do some stuff here... 
    $(this).find(".fav_count").each(function() { 
     $(this).text(+($(this).text()) + 1) 
    }) 
}) 

Answer 2

您可以通過添加一個類來你的提交按鈕，並編寫相同的點擊事件來更新fav_count的價值做到這一點。

更改您的提交按鈕以關注。

<input type="submit" class="cSubmitBtn" name="button4" id="button4" value="Submit" /> 

現在爲上述按鈕編寫一個點擊事件，以獲取當前fav值並更新它。

在下面的代碼中，我們使用jQuery的parent（）函數獲取當前fav值，然後將當前值增加1。

最後，我們使用jQuery的.text（value）函數將文本值設置爲相同的span元素。

$('.cSubmitBtn').click(function(e) { 
     e.preventDefault(); 
    var favDiv=$(this).parents('tr').find('.fav_count'); 
    var currentValue=parseInt(favDiv.text()); 
    currentValue++; 
    favDiv.text(currentValue); 
}); 

https://jsfiddle.net/fgu42nxr/3/

請注意上面的代碼將防止您的提交按鈕提交上單擊窗體。如果你仍然想提交表單，你可以在相同的jQuery代碼中完成。

Answer 3

在這裏，你有一個解決方案=>plunkr

$(document).ready(function() { 
$("form").submit(function(event) { 
    event.preventDefault(); 
    $div = $(this).find(".fav_count"); 
    var count = parseInt($div.html()); 
    count++; 
    $div.html(count.toString()); 
}); 
});