Display quantity value inside text field in frontend

Question

we are using magento marketplace multi-vendor site, means where sellers can sell products through site.

we are displaying price in frontend using following code :

Phtml

<input onFocus="showPriceCancel('<?php echo $products->getId(); ?>');" 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 style="display:none;" 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>

</span>

script

function showPriceCancel(p) {
              jQuery('#price_reset_button_'+p).css('display','block');

        };

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;


        }


function updateFieldPrice(product_id) 
{ 
var priceId = '#price_'+ product_id; 
var currprice='#curr_'+ product_id; 
var updatedqty = '#updatedprice_'+ product_id; 
var url ='<?php echo Mage::getUrl('marketplace/marketplaceaccount/updateFieldPrice/')?>'; 
$price = $wk_jq(priceId).val(); 
$wk_jq(currprice).val($price); 
new Ajax.Request(url, { 
method: 'post', 
parameters: {id: product_id, price: $price}, 
onComplete: function (transport) { 
//alert(transport.responseText); 

jQuery(updatedqty).show().delay(2000).fadeOut(); 

} 
}); 
}

Its displaying like this :

In the same way we are using following code to display quantity.

Phtml

<span id="valueqty_<?php echo $products->getId(); ?>"><?php echo (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?></span>
  <input type = "text" id = "qty_<?php echo $products->getId(); ?>" onkeydown="validateNumbers(event)" "name = "qty" value = "<?php echo (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?>" style = "display:none"/>

<span class="label wk_action" id="edit_link_<?php echo $products->getId(); ?>">
        <img onclick="showField('<?php echo $products->getId(); ?>'); return false;" src="<?php echo $this->getSkinUrl('marketplace/images/icon-edit.png'); ?>"/>
    </span>  
<p id="updatedqty_<?php echo $products->getId(); ?>" style = "display:none;color:red;">Updated</p>
    <br/>
    <button id="update_button_<?php echo $products->getId(); ?>" class="button wk_mp_btn1" onclick="updateField('<?php echo $products->getId(); ?>'); return false;" style="display:none" >
        <span><span style="font-size:12px;"><?php echo $helper->__('Update') ?></span></span>
    </button>

    <button id="reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideReset('<?php echo $products->getId(); ?>'); return false;" style="display:none" >
        <span><span><?php echo $helper->__('Cancel') ?></span></span>
    </button>

Script

function hideReset(product_id) {

            var qtyId='#qty_'+ product_id;
            var editLink="#edit_link_"+ product_id;
            var updateButton="#update_button_"+ product_id;
            var resetButton="#reset_button_"+ product_id;

            $wk_jq(qtyId).hide();
            $wk_jq(editLink).show();
            $wk_jq(updateButton).hide();
            $wk_jq(resetButton).hide();
        }
         function showField(product_id)
        {

            var qtyId='#qty_'+ product_id;

            var editLink="#edit_link_"+ product_id;
            var updateButton="#update_button_"+ product_id;
            var resetButton="#reset_button_"+ product_id;

            $wk_jq(qtyId).show();

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

            return false;


        }
        function updateField(product_id)
        {
            var qtyId = '#qty_'+ product_id;
            var valueId = '#valueqty_'+ product_id;
            var updatedqty = '#updatedqty_'+ product_id;


            var editLink = "#edit_link_"+ product_id;
            var updateButton = "#update_button_"+ product_id;
            var resetButton = "#reset_button"+ product_id;
        var url ='<?php echo Mage::getUrl('marketplace/marketplaceaccount/updateField/')?>';

            $wk_jq(qtyId).toggle()

            $wk_jq(editLink).hide();
            $wk_jq(updateButton).show();
            $wk_jq(resetButton).show();

            $qty = $wk_jq(qtyId).val();
            jQuery(valueId).html($qty);
            hideReset(product_id);

            new Ajax.Request(url, {
                method: 'post',
                parameters: {id: product_id, qty: $qty},
                onComplete: function (transport) {
                    //alert(transport.responseText);


                    jQuery(updatedqty).show().delay(2000).fadeOut();

                    $updateButton.prop('disabled', false);

                    $wk_jq(qtyId).setValue($qty);



                }
            });
        }

quantity is displaying like this :

i want to display quanity as like price, i want to make quantity as text field and remove edit button.

Answer 1

I found solution for this...

<input type="text" id="qty_<?php echo $products->getId(); ?>" onkeydown="validateNumbers(event)" name = "qty " value = "<?php echo (int) Mage::getModel( 'cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?>"/>

    <p id="updatedqty_<?php echo $products->getId(); ?>" style="display:none;color:red;">Updated</p>
    <br/>

    <button id="update_button_<?php echo $products->getId(); ?>" class="button wk_mp_btn1" onclick="updateField('<?php echo $products->getId(); ?>'); return false;" style="display:none">
        <span><span style="font-size:12px;"><?php echo $helper->__('Update') ?></span></span>
    </button>

    <button id="reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideReset('<?php echo $products->getId(); ?>'); return false;" style="display:none">
        <span><span><?php echo $helper->__('Cancel') ?></span></span>
    </button>