javascript - Display cancel button only when we edit the value inside textfield

Question

we are using following code for display Price textfield. we will edit the value and click on update button. if we missly type some numbers in textfields we will click on cancel button ,it will show the original value.

Now cancel button is displaying below text field. what i want is

1)cancel button should display only when we type the updated quantity inside textfield.

2)Once we click on update button , again "cancel" button should hide.

Phtml

<input class="ama1" type = "text" id = "price_<?php echo $products->getId(); ?>" onkeydown="validateNumbers(event)" name= "price[]" value = "<?php echo $products->getPrice(); ?>" style = ""/>

<input type="hidden" name="curr_<?php echo $products->getId(); ?>" id="curr_<?php echo $products->getId(); ?>" value="<?php echo $products->getPrice(); ?>" />

<p id="updatedprice_<?php echo $products->getId(); ?>" style = "display:none;color:red; position:relative; top:16px;">Updated</p>
<br/>

<button id="price_reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideResetPrice('<?php echo $products->getId(); ?>','<?php echo $products->getPrice(); ?>'); return false;">

<span><span><?php echo $helper->__('Cancel') ?></span></span>
</button>

Javascript

function hideResetPrice(product_id,priceold) { 

var qtyId='#price_'+ product_id; 
var currprice='#curr_'+ product_id; 
var editLink="#price_edit_link_"+ product_id; 
var updateButton="#price_update_button_"+ product_id; 
var valueprice="#valueprice_"+ product_id; 
var resetButton="#price_reset_button_"+ product_id; 


$wk_jq(valueprice).show(); 
$wk_jq(qtyId).val( $wk_jq(currprice).val()); 
$wk_jq(editLink).show(); 

}



function showFieldPrice(product_id)
        {

            var qtyId='#price_'+ product_id;

            var editLink="#price_edit_link_"+ product_id;
            var valueprice="#valueprice_"+ product_id;
            var updateButton="#price_update_button_"+ product_id;
            var resetButton="#price_reset_button_"+ product_id;

            $wk_jq(qtyId).show();
            $wk_jq(valueprice).hide();

            $wk_jq(editLink).hide();
            $wk_jq(updateButton).show();
            $wk_jq(updateButton).prop('disabled', false);//just in case
            $wk_jq(resetButton).show();

            return false;


        }   

        </script>

Answer 1

You can do that by using jQuery. You have to check current value with hidden value. if they are equal then there is no need to show cancel button otherwise you are editing the value. and your code should be like

<input class="ama1" type = "text" id = "price_<?php echo $products->getId(); ?>"  name= "price[]" value = "<?php echo $products->getPrice(); ?>" style = ""/>

<input type="hidden" class="test_class" name="curr_<?php echo $products->getId(); ?>" id="curr_<?php echo $products->getId(); ?>" value="<?php echo $products->getPrice(); ?>" />

<p id="updatedprice_<?php echo $products->getId(); ?>" style = "display:none;color:red; position:relative; top:16px;">Updated</p>
<br/>

<button id="price_reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideResetPrice('<?php echo $products->getId(); ?>','<?php echo $products->getPrice(); ?>'); return false;">

    <span><span class="cancle_button" style="display: none;"><?php echo $helper->__('Cancel') ?></span></span>
</button>

JS

<script>
$(document).ready(function(){
    $('.ama1').keyup(function(){
        var hid_val = $('.test_class').val();
        var cur_val = $(this).val();
        if(hid_val != cur_val){
            $('.cancle_button').show();
        }else{
            $('.cancle_button').hide();
        }
    })
})
</script>

check jsfiddle