ProAct.js click counter with streams

Uses the ProAct.registry to declaratively write code.

HTML

<script src="http://cdn.jsdelivr.net/proact.js/0.4.2/proact.min.js"></script>
<form id='myform' method='POST' action='#'>
<input type='text' name='quantity' value='1' class='qty' size="1" readonly/>
<div id="back"><input type='image' src="" alt="back" height="65" width="115" value='-' class='qtyminus' field='quantity' /></div>
    <div id="loading"><img src="" alt="loading" height="65" width="65" /></div>
<div id="next"><input type='image' src="" alt="next" height="65" width="115" value='+' class='qtyplus' field='quantity' /></div>
<div id="complete"><img src="" alt="complete" height="65" width="115"></div>
</form>

JavaScript

jQuery(document).ready(function(){

	// Default for buttons
	$('#complete').hide();
	$('#back').hide();	
	$('#next').hide();
	$('#loading').delay(9600).hide("fast");
	$('#next').delay(10000).show("fast");


    // This button will increment the value
    $('.qtyplus').click(function(e){

    	$('#back').hide();
    	$('#next').hide();
    	$('#complete').hide();

        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());

	        $('input[name='+fieldName+']').val(currentVal + 1);

	        if ((parseInt($('input[name='+fieldName+']').val())) <= 2) {
	        	$('#back').show();
				$('#loading').show();
				$('#loading').delay(9700).hide("fast");
				$('#next').delay(10000).show("fast");
			}
			else {
				$('#back').show();
				$('#loading').show();
				$('#loading').delay(9700).hide("fast");
				$('#complete').delay(10000).show("fast");
			}

    });

    // This button will decrement the value till 1
    $(".qtyminus").click(function(e) {

    	$('#back').hide();
    	$('#next').hide();
    	$('#complete').hide();

        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());

        // If greater than 1
        if (currentVal > 1) {
            
            $('input[name='+fieldName+']').val(currentVal - 1);

	        if ((parseInt($('input[name='+fieldName+']').val())) <= 2) {
	        	$('#back').show();
				$('#loading').show();
				$('#loading').delay(9700).hide("fast");
				$('#next').delay(10000).show("fast");
			}
			else {
				$('#back').show();
				$('#loading').show();
				$('#loading').delay(9700).hide("fast");
				$('#complete').delay(10000).show("fast");
			}

        } else {
      ...