Demo Checkbox Ajax

by Adi Jaya

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<input class="test" type="checkbox" name="1" data-target="#target-1"/>
<input type="text" value="1111" id="target-1"/>

<hr>

<input class="test" type="checkbox" name="2" data-target="#target-2" checked/>
<input type="text" value="2222" id="target-2"/>

JavaScript

function changeData( selector ){
	$( selector ).each(function(){
		var name = $( this ).attr( "name" );
		var target = $( this ).attr( "data-target" );
		if( name ){
			if( $( this ).is(":checked") ){
				getAjax( name, target );
			} else {
				$( target ).val( "" );
			}
		}
		else {
			alert( "Attribute [Name] tidak ditulis" );
 		}	
	});
}
changeData( ".test" );


function getAjax( $name, $target ){
	var data1 = $name;
	var data2 = $target;
  	console.log( data1 ); //view console browser
  	console.log( data2 ); //view console browser

	/* example ajax
		$.ajax({
		    url: "demo.php?post="+ data1 +"",
		    beforeSend: function() {
		    	//...
		    },
		    success: function (exampleData) {
		        //... $( data2 ).val( exampleData );
		        // or 
		        // var valueData = $( selector ).find( ".selector" ).val();
		        //... $( data2 ).val( valueData );
		    },
		    error: function () {
		        //...
		    }
		});
	*/
  	// for this demo
  	$( data2 ).val( data1 );
}



$( document ).on( "change", ".test", function(){
	changeData( this );
});