Hinzufügen von 1 zum Zeilenwert onsubmit

Question

Ich möchte wissen, wie zu einem Wert in einem verschachtelten Div jederzeit 1 hinzufügen, wenn das Formular übermittelt wird.

<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> 

hier ist eine Geige

https://jsfiddle.net/fgu42nxr/

Jede mögliche Hilfe bei jquery geschätzt wird. Danke

Answer 1

Wie in den Kommentaren oben erwähnt, können Sie es nicht tun, wenn Sie das Formular absenden, weil es zum Seitenladevorgang führt. Sie können jedoch das Standardverhalten für das Senden von Formularen abbrechen und es mit Ajax oder etwas neu implementieren. Wenn ja, können Sie es wie folgt tun:

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

Answer 2

Sie können dies tun, indem Sie eine Klasse Ihren einreichen Hinzufügen von Schaltflächen und ein Click-Ereignis des gleichen Schreiben des Wertes von fav_count zu aktualisieren.

Ändern Sie Ihre Senden-Schaltfläche, um zu folgen.

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

Schreiben Sie jetzt ein Klickereignis für die obige Schaltfläche, um den aktuellen Wert von fav zu erhalten und zu aktualisieren.

Im folgenden Code erhalten wir aktuelle fav-Wert mit Parent() -Funktion der jQuery dann erhöhen Sie den aktuellen Wert um eins.

Und zuletzt setzen wir den Wert als Text auf das selbe Span-Element mit der Funktion .text (value) von jQuery.

$('.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/

Bitte beachten Sie obigen Code wird Ihre Submit-Button verhindern das Formular auf Klick zu unterbreiten. Wenn Sie das Formular noch senden möchten, können Sie dies im selben jQuery-Code tun.

Answer 3

Hier haben Sie eine Lösung =>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()); 
}); 
});