仅当我们在文本字段内编辑值时才显示取消按钮 [英] Display cancel button only when we edit the value inside textfield

问题描述

我们正在使用以下代码来显示价格"文本字段.我们将编辑该值，然后单击更新按钮.如果我们在文本字段中输入错误的数字，我们将单击取消"按钮，它将显示原始值.

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)取消按钮仅在我们在文本字段中键入更新的数量时才显示.

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

2)一旦单击更新"按钮，取消"按钮将再次隐藏.

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>

推荐答案

您可以使用jQuery来做到这一点.您必须使用隐藏值检查当前值.如果它们相等，则无需显示取消"按钮，否则您正在编辑该值.并且您的代码应类似于

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>

检查 jsfiddle

这篇关于仅当我们在文本字段内编辑值时才显示取消按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！