Contoh Melakukan penambahan menggunakan jQuery

Contoh Melakukan penambahan menggunakan jQuery

by Adi Jaya

HTML

<div id="section-example">

    <p class="container-demo">
        <input class="demo" type="number" data-func="one"/> +
        <input class="demo" type="number" data-func="two"/> =
        <input class="demo" type="text" data-func="result"/>
    </p>

    <p class="container-demo">
        <input class="demo" type="number" data-func="one"/> +
        <input class="demo" type="number" data-func="two"/> =
        <input class="demo" type="text" data-func="result"/>
    </p>

</div>


<p>
    <button class="button" data-click="append">
        Test Tambah data
    </button>
</p>

CSS

.container-demo input {
    width: 50px;
}

JavaScript

$( document ).on( "input change keyup", ".demo",  function(){

	var input = $( this ).attr( "data-func" );
    var parents = $( this ).parents( ".container-demo" );
    
    var value1 = parents.find( "[data-func='one']" );
    var value2 = parents.find( "[data-func='two']" );
    var result = parents.find( "[data-func='result']" );
    
    if( value1.val() == "" ){
    	value1.val( 0 );
    } 
    
    else if( value2.val() == "" ){
    	value2.val( 0 );
    }
    
    if( value1 != "" || value2 != "" ){
    	var $sum = parseInt( value1.val() ) + parseInt( value2.val() );
    	result.val( $sum );
    }
    
});


//test appending element

$( document ).on( "click", "[data-click='append']",  function(){
	var template = "";
    
    template += '<p class="container-demo">';
		template += '<input class="demo" type="number" data-func="one"/> + ';
        template += '<input class="demo" type="number" data-func="two"/> = ';
        template += '<input class="demo" type="text" data-func="result"/>';
    template += '</p>';
    
    $( template ).appendTo( "#section-example" );
    
});