JS - An viele HTML-Formulare die gleiche Funktion anhängen

Question

Ich versuche eine E-Commerce-ähnliche Webseite zu erstellen (für die Praxis), bei der ein Klick auf eine der Schaltflächen den Einkaufswagenwert um die angegebene Anzahl (Menge) aktualisiert das Eingabeelement Bisher konnte ich den Einkaufswagen nur vom ersten Formular aus aktualisieren, denn wenn ich versuche, die Funktion auf jedem Formular mit einer Schleife zuzuweisen, wird der Warenkorb eine Millisekunde lang aktualisiert und dann auf Null zurückgesetzt. Ich nehme es wegen des Umfangs an. Ich weiß, es ist ein einfacher Weg, dies zu tun, ohne manuell die Funktion für jeden document.forms[n]

JS

window.onload = function() 
{ 
    var getForm = document.forms[0]; 
    var numItems = 0; 
    getForm.onsubmit = function(event) 
    { 
     event.preventDefault(); 
     var getInput = getForm.elements["num-item"].value; 
     if(parseInt(getInput)) 
     { 
     numItems = numItems + parseInt(getInput); 
     var getCart = document.getElementById("item-count"); 
     getCart.innerHTML = numItems; 
     getForm.reset();    
     } 
     else 
     { 
     alert("Please enter a valid number"); 
     } 
    } 

HTML Wagen zuweisen:

<div class="basket"> 
    <p><i class="fa fa-shopping-basket"></i></p> 
    <p id="item-count">0</p> 
</div> 

HTML Form: Der Kürze halber poste ich nur 1 Formbeispiel, aber in Wirklichkeit Ich habe 6 andere Formen, die genau gleich sind.

<div class="buy-config"> 
    <form class="buy-form" name="buy-form"> 
     <label>Quantity:</label> 
      <input type="text" class="num-item" /> 
      <button class="buy-btn">Add to Cart</button> 
    </form> 
</div> 

Answer 1

Schleife durch alle Formulare durch den Wähler Abfrage (mit welcher Methode auch immer Sie bevorzugen, je nach Leistungsanforderungen und Markup-Flexibilität - Ich habe getElementsByClassName verwendet und eine for-Schleife ausgeführt.

Innerhalb der Schleife binden Sie eine Funktion an das Ereignis "submit" mit addEventListener. Sie können die Funktion inline definieren (wie ich es getan habe) oder die Funktion an anderer Stelle definieren, sie einer Variablen zuweisen und auf die Variable verweisen, wenn sie an das Ereignis gebunden ist.

Innerhalb der Ereignis-Listener-Funktion verweisen Sie auf das Formular, das als this übermittelt wurde.

Neben den oben beschriebenen Veränderungen, habe ich ein paar kleinere Änderungen am Code vorgenommen:

1. Ihre frühere Version wurde der Inhalt des Wagens jedes Mal überschrieben werden. Dies könnte absichtlich geschehen, je nachdem, ob Sie für jedes Element oder für jedes Element einen "Korb" haben (dies war in der Frage nicht klar). Also, anstatt numItems auf Null zu initialisieren, habe ich es auf die aktuelle Anzahl der Artikel im Warenkorb initialisiert.
2. Verwenden Sie input type="number" HTML-Formularelemente. Sie werden von fast jedem Browser unterstützt und akzeptieren nur Ziffern - sie haben auch Hoch/Runter-Pfeile und können mit dem Scrollrad eingestellt werden. Bei Browsern, die sie nicht unterstützen, greifen sie auf eine grundlegende Texteingabe zurück.

var forms = document.getElementsByClassName("buy-form"); 
 
for (var i = 0; i < forms.length; i++) { 
 
    forms[i].addEventListener("submit", function(event) { 
 
    event.preventDefault(); 
 
    var numItems = parseInt(document.getElementById("item-count").innerHTML); 
 
    var getInput = this.getElementsByClassName("num-item")[0].value; 
 
    if (parseInt(getInput)) { 
 
     numItems = numItems + parseInt(getInput); 
 
     var getCart = document.getElementById("item-count"); 
 
     getCart.innerHTML = numItems; 
 
     this.reset(); 
 
    } else { 
 
     alert("Please enter a valid number"); 
 
    } 
 
    }); 
 
}

<div class="basket"> 
 
    <p><i class="fa fa-shopping-basket"></i></p> 
 
    <p id="item-count">0</p> 
 
</div> 
 
<div class="buy-config"> 
 
    <form class="buy-form" name="buy-form"> 
 
    <label>Quantity:</label> 
 
    <input type="number" class="num-item" /> 
 
    <button class="buy-btn">Add to Cart</button> 
 
    </form> 
 
</div> 
 
<div class="buy-config"> 
 
    <form class="buy-form" name="buy-form"> 
 
    <label>Quantity:</label> 
 
    <input type="number" class="num-item" /> 
 
    <button class="buy-btn">Add to Cart</button> 
 
    </form> 
 
</div> 
 
<div class="buy-config"> 
 
    <form class="buy-form" name="buy-form"> 
 
    <label>Quantity:</label> 
 
    <input type="number" class="num-item" /> 
 
    <button class="buy-btn">Add to Cart</button> 
 
    </form> 
 
</div>

Answer 2

Sie können den jQuery Selektor verwenden.

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.buy-btn').click(function(){ 
      $(this).parent('form').submit(); 
     }); 
    }); 
</script> 

<form class="buy-form"> 
    <label>Quantity:</label> 
    <input type="text" class="num-item" /> 
    <button class="buy-btn">Add to Cart</button> 
</form> 

Der obige Code für jede HTML-Elemente eine Funktion Setup, das buy-btn die CSS-Klasse hat. Sie können alles mit parent, children, prev, next oder find Funktion von jQuery auswählen.

Natürlich ist dies nur eine grundlegende exemple ich hier zeigen, und wieder einige einfaches Beispiel könnte sein:

$('.buy-btn').click(function(){ 
    $(this).parent('form').submit(); 
    //var itemCount = $('#item-count').html(); 
    //itemCount++; 
    //$('#item-count').html(itemCount); 
    var numItem = $(this).prev('.num-item').val(); 
    $('#item-count').html(numItem); 
}); 

Answer 3

Leider wirst du eine Schleife durch die Elemente in Ihrem JavaScript haben und weisen Sie die Funktion zu jedem, aber Sie tun können, es mit einigen querySelector Methoden etwas einfacher geworfen:

window.onload = function() { 
    var getCart = document.getElementById('item-count'); 
    var forms = document.querySelectorAll('.buy-form'); 
    var numItems = 0; 
    var isNum = function(n) { 
     return(!isNaN(parseFloat(n)) && isFinite(n)); 
    }; 
    var handler = function(e) { 
     (e || event).preventDefault(); 
     var getInput = this.querySelector('.num-item').value; 
     if(isNum(getInput)) { 
      numItems += parseInt(getInput); 
      getCart.innerHTML = numItems; 
      this.reset();    
     } else { 
      alert("Please enter a valid number"); 
     } 
    }; 
    for(var i = 0, len = forms.length; i < len; i++) { 
     forms[i].addEventListener('submit', handler); 
    } 
};