JS - 同じ機能を多くのhtmlフォームに貼り付けてください

Question

私は電子商取引のようなウェブページを作成しようとしています（実習用）。ボタンのどれかをクリックするとカートの値が入力要素 これまでは、最初のフォームからのみカートを更新できました。ループを使用してすべてのフォームに関数を割り当てようとすると、ミリ秒のカート更新がゼロに戻ります。私はその範囲のためにそれを仮定する。 私はこれを行うための簡単な方法は、手動ですべての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 カートのために機能を割り当てずあります知っている：

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

HTMLフォーム：簡潔にするために、私は1つのフォームの例を掲載していますが、実際には、私はまったく同じ6つの他の形式を持っています。

<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

ループ：それぞれに機能を割り当てる、しかし、あなたはでスローいくつかのquerySelector方法で少し単純にそれを行うことができますマークアップの柔軟性 - 私はgetElementsByClassNameを使用しました）、forループを実行します。

ループの内部で、addEventListenerを使用して関数を「送信」イベントにバインドします。関数をインラインで定義したり、他の場所で関数を定義したり、変数に代入したり、イベントにバインドするときに変数を参照したりすることができます。

イベントリスナー機能では、提出されたフォームをthisと呼びます。上記の変更の上に

は、私はあなたのコードにいくつかのマイナーな変更を加えました：

は

1. あなたの以前のバージョンでは、カートの中身たびに上書きされました。これは、それぞれのアイテムに1つの「バスケット」があるのか​​、それとも全体的に1つのバスケットがあるのか​​によって、意図的なものになっている可能性があります。したがって、numItemsをゼロに初期化するのではなく、カート内の現在のアイテム数に初期化しました。
2. input type="number" HTMLフォーム要素の使用を検討してください。ほぼすべてのブラウザでサポートされており、数字だけを受け取ります。上下の矢印もあり、スクロールホイールで設定できます。サポートしていないブラウザでは、基本的なテキスト入力に戻ります。

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

あなたはjQueryセレクタを使用することができます。

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

意志セットアップ上記コードCSSクラスbuy-btnを有する各HTML要素の機能。 parent,children,prev,nextまたはfindという関数をjQueryの関数から選択できます。もちろん

は、これは私がここに示すよただ基本的なexempleで、再びいくつかの簡単な例は次のようになります。残念ながら

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

、あなたはJavaScriptで要素をループする必要があるとしていると（セレクタを照会お好みの方法で使用して、性能要件に応じて、とでフォームのすべてを

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); 
    } 
};