Question

我们使用以下代码显示Price textfield。我们将编辑该值并单击“更新”按钮。如果我们错过在文本字段中键入一些数字，我们将点击取消按钮，它将显示原始值。

现在，取消按钮显示在文本字段下方。我想要的是

1）仅当我们在文本字段中键入更新的数量时，才会显示取消按钮。

2）一旦我们点击更新按钮，再次＆＃34;取消＆＃34;按钮应隐藏。

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

您可以使用jQuery执行此操作。您必须使用隐藏值检查当前值。如果它们相等，则无需显示取消按钮，否则您正在编辑该值。你的代码应该像

<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

Answer 2

使用jquery，我使用片段发布示例，您可以在代码中尝试此操作。

我希望这会对你有所帮助，

＆＃13;

 var original = $('.input').val(); // store original value
$('.cancel').hide();
$('.updates').hide();

$('.input').keyup(function(){  
  var cur_val = $(this).val();  
  if(original != cur_val){
     $('.cancel').show();
     $('.updates').show();
  }else{
      $('.cancel').hide();
      $('.updates').hide();
  }
});

$('.cancel').on('click',function(){
  $('.input').val(original);
  $(this).hide();
  $('.updates').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input" value="25.00">
<span class="updates" style="color:red;">Updated</span>
<button class="cancel">Cancel</button>

＆＃13;

仅在我们编辑文本字段内的值时显示取消按钮

2 个答案: