에코 입력 항목

Question

나는 명령을 내리는 데 사용되는 비교적 직선적 인 입력 집합을 가지고 있습니다.

기본적으로 수량 * 가격이 계산됩니다.

그러나 제출 버튼 근처의 바닥에는 총 가격과 주문한 항목을 표시하고 싶습니다. JQuery 나 그 비슷한 것을 사용하는 방법이 있습니까? 기본적으로 수량 필드에 숫자를 배치 한 항목의 관련 h6 내용을 기본적으로 반향 출력 할 수 있습니까?

이미 정상적으로 작동하는 데 총 비용이 있습니다.

<tr> 
    <td> 
     <h6>Title</h6>Text. 
    </td> 
    <td id="price_item_1" class="menuprice">$PRICE</td> 
    <td class="quantitynum"> 
     <input type="text" name="qty_item_1" id="qty_item_1" value="0" /> 
    </td> 
    <td id="total_item_1" class="runningtl"></td> 
</tr> 

Answer 1

당신은 당신이 무엇을 할 수 있는지 양의 값이 변경, 당신은 양의 값을 확인하기 위해 총을 계산 함수 내에서 때마다 총을 계산하고 그에 따라 행동한다고 ​​가정 :

if (quantity > 0) 
    $("h6").show(); // assuming there is only one h6 in the page, otherwise you have to add ids to each h6 
else 
    $("h6").hide(); 

Answer 2

각 입력에 대해 다른 요소를 보지 않고 한 번 제안하면 input 자체에 제목 텍스트를 특성으로 저장하십시오. title 속성이 이에 적합합니다. 그걸 염두에두고

다음 코드는 작동합니다 :

HTML : 명확성을 위해 약간 단순화

. 양식, 입력 및 요약 요소에 클래스를 추가했습니다.

<form class="order-form"> 
    <table> 
    <tr> 
     <td><input type="number" class="quantity" title="Product 1"/></td> 
    </tr> 
    <tr> 
     <td><input type="number" class="quantity" title="Product 2"/></td> 
    </tr> 
    <tr> 
     <td><input type="number" class="quantity" title="Product 3"/></td> 
    </tr> 
    </table> 
    <div class="order-form-summary"></div> 
</form> 

자바 스크립트 :

$(function(){ 
    // Find all of the DOM elements we're interested in: 
    var form = $('form.order-form'), 
     output = form.find('.order-form-summary'), 
     inputs = form.find('input.quantity'); 

    // Bind a custom event handler to the form, that collects the titles from the 
    // inputs with a value > 0 
    form.bind('updateSummary', function(){ 

    // Collect the titles into an array 
    var summaries = $.map(inputs, function(e){ 
     var input = $(e); 
     if (parseInt(input.val()) > 0){ 
     return input.attr('title'); 
     } 
    }); 

    // Update the output element's HTML with the array, joined to a string with commas. 
    output.html(summaries.join(', ')); 
    }); 

    // Fire the update event whenever chance, key-up or blur occurs on any input 
    inputs.on('change keyup blur', function(){form.trigger('updateSummary')}); 

    // Fire it on load to get the correct starting values (in case any inputs are already filled) 
    form.trigger('updateSummary'); 
}); 

이 코드는 응축 될 수 있지만, 내가 읽을두고하는 것을 목표로했습니다. 여기에 예제가있는 바이올린이 있습니다. https://jsfiddle.net/ejwLy5x8/