隐藏文字&点击按钮

时间:2016-03-29 07:16:10

标签: jquery

请访问magento site,您可以看到可以选择查找特定邮政编码的运费: image1

enter image description here

我想要的是,一旦我们在文本字段中输入“110001”,点击“检查”按钮,它应显示如下图像2

enter image description here

表示1)“14位卖家可用”文字

    <?php if ($this->isFieldVisible('postcode')): ?>
            <li class="item">

                <label for="search"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>><?php if ($this->isFieldRequired('postcode')):?><em>*</em><?php endif;?><?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?></label>
                <div class="search">

                    <input placeholder="Enter your PIN Code" class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?> 
                    required-entry<?php endif;?>" type="text" id="estimate_postcode" name="estimate[postcode]" 
                    value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>" onkeydown="if (event.keyCode == 13) { return false;}" />
                </div>
            </li>
       <?php endif; ?>


<div class="f-right">
            <button type="button" title="<?php echo Mage::helper('webdevlopers_productpageshipping')->getButton(); ?>" 
            onclick="estimateProductShipping()" class="button">

            <span><span style ="font-size:11px; padding:5px;">
            <?php echo Mage::helper('webdevlopers_productpageshipping')->__('CHECK') ?></span></span>
            </button>
        </div>





<script type="text/javascript"> 
var $ = jQuery.noConflict(); 
( function($) { 
$(document).ready(function(){ 
$('#estimate_postcode').keydown(function(e){ 

var items = $$(['.shipping-estimation-form input', 
'.shipping-estimation-form select', 
'#product_addtocart_form input', 
'#product_addtocart_form select']); 
var estimationUrl = '<?php echo $this->jsQuoteEscape($this->getEstimateUrl());?>'; 
var parameters = Form.serializeElements(items, true); 
console.log("zipcode onkeypress worked"); 
if (!e) e = window.event; 
var keyCode = e.keyCode || e.which; 
if (keyCode == '13'){ 
//disable default enter action 
e.preventDefault(); 
console.log("Enter button was pressed"); 
$('#shipping-estimate-loading-message').show(); 
$('#shipping-estimate-results').hide(); 

new Ajax.Updater('shipping-estimate-results', estimationUrl, { 
parameters: parameters, 
onComplete: function() { 
console.log("ajax updater worked"); 
$('#shipping-estimate-loading-message').hide(); 
$('#shipping-estimate-results').show(); 
$('#unique_id').hide(); 
//$('unique_id').hide(); 
} 
}); 
}; 
}); 
}); 
} ) ( jQuery ); 

function estimateProductShipping() 
{ 

var estimationUrl = '<?php echo $this->jsQuoteEscape($this->getEstimateUrl());?>'; 
var items = $$(['.shipping-estimation-form input', 
'.shipping-estimation-form select', 
'#product_addtocart_form input', 
'#product_addtocart_form select']); 

var validationResult = true; 

// Check the valid input 
if (!items.map(Validation.validate).all()) { 
return; 
} 

var parameters = Form.serializeElements(items, true); 

$('shipping-estimate-loading-message').show(); 
$('shipping-estimate-results').hide(); 


new Ajax.Updater('shipping-estimate-results', estimationUrl, { 
parameters: parameters, 
onComplete: function() { 
console.log("ajax updater worked"); 
$('shipping-estimate-loading-message').hide(); 
$('shipping-estimate-results').show(); 
// $('#unique_id').hide(); 
$('unique_id').hide(); 
} 
}); 
} 

/* 

$(document).ready(function(){ 
$('check1234').on('click', function(){ 
$('#unique_id').hide(); 
$('#shipping-estimate-results').show(); 
}); 
}); 

*/ 
//]]> 
</script> 



<!-- Raph --> 

<?php if ($this->htmlEscape($this->getFieldValue('postcode'))): ?> 
<script type="text/javascript"> 
Event.observe(window, 'load', function() { 
estimateProductShipping(); 
}); 
</script> 
<?php endif; ?> 

1 个答案:

答案 0 :(得分:0)

尝试这样的事情:

$(document).ready(function(){
    $('#button_id').on('click', function(){
        $('#text_id').hide();        // Set Id to the text you want to show
        $('#message_id').show();     // Set Id to the message you want to hide
    });
});