edit the text field without clicking edit button

Question

we have a multi vendor site. we gave an option to edit the Price for vendor in his account.

Its displaying in vendor account as like in image 1 :

once user click on edit button, its diplaying like this :

we are using following code to display the price. what i need is without clicking edit button, user should able to edit the price.

once user click on text field , it should allow to edit the price. user enter new price and enter update button.

PHP

<span id="valueprice_<?php echo $products->getId(); ?>"><?php echo $products->getPrice(); ?></span>

<input type = "text" id = "price_<?php echo $products->getId(); ?>" onkeydown="validateNumbers(event)" "name = "price" value = "<?php echo $products->getPrice(); ?>" style = "display:none"/>
<span class="label wk_action" id="edit_link_<?php echo $products->getId(); ?>">

<img onclick="showFieldPrice('<?php echo $products->getId(); ?>'); return false;" src="<?php echo $this->getSkinUrl('marketplace/images/icon-edit.png'); ?>"/>
    </span>  

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

<button id="price_update_button_<?php echo $products->getId(); ?>" class="button wk_mp_btn1" onclick="updateFieldPrice('<?php echo $products->getId(); ?>'); return false;" style="display:none" >
        <span><span style="font-size:12px;"><?php echo $helper->__('Update') ?></span></span>
</button>
<button id="price_reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideResetPrice('<?php echo $products->getId(); ?>'); return false;" style="display:none" >
<span><span><?php echo $helper->__('Cancel') ?></span></span>
</button>                                                       
</span>

JS

    <script>

    function hideResetPrice(product_id) {

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

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


function showFieldPrice(product_id)
        {

            var qtyId='#price_'+ product_id;

            var editLink="#price_edit_link_"+ product_id;
            var updateButton="#price_update_button_"+ product_id;
            var resetButton="#price_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 updateFieldPrice(product_id)
        {
            var priceId = '#price_'+ product_id;
            var valueId = '#valueprice_'+ product_id;
            var updatedqty = '#updatedprice_'+ product_id;


            var editLink = "#price_edit_link_"+ product_id;
            var updateButton = "#price_update_button_"+ product_id;
            var resetButton = "#price_reset_button_"+ product_id;
            var url ='<?php echo Mage::getUrl('marketplace/marketplaceaccount/updateFieldPrice/')?>';

            $wk_jq(priceId).toggle()

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

            $price = $wk_jq(priceId).val();
            jQuery(valueId).html($price);
            hideReset(product_id);

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



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

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

                //  $wk_jq(priceId).setValue($price);


                    jQuery(priceId).val($price);
            // $wk_jq(priceId).setValue($price);



                }
            });
        }


        </script>

Answer 1

try that

  <span id="valueprice_<?php echo $products->getId(); ?>" onclick="showFieldPrice('<?php echo $products->getId(); ?>');"><?php echo $products->getPrice(); ?></span>

    <input type = "text" id = "price_<?php echo $products->getId(); ?>" onkeydown="validateNumbers(event)" "name = "price" value = "<?php echo $products->getPrice(); ?>" style = "display:none"/>
    <span class="label wk_action" id="edit_link_<?php echo $products->getId(); ?>">



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

    <button id="price_update_button_<?php echo $products->getId(); ?>" class="button wk_mp_btn1" onclick="updateFieldPrice('<?php echo $products->getId(); ?>'); return false;" style="display:none" >
            <span><span style="font-size:12px;"><?php echo $helper->__('Update') ?></span></span>
    </button>
    <button id="price_reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideResetPrice('<?php echo $products->getId(); ?>'); return false;" style="display:none" >
    <span><span><?php echo $helper->__('Cancel') ?></span></span>
    </button>                                                       
    </span>

js

function hideResetprice(product_id) {

        var qtyId='#price_'+ 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(qtyId).hide();
        $wk_jq(valueprice).show();
        $wk_jq(editLink).show();
        $wk_jq(updateButton).hide();
        $wk_jq(resetButton).hide();
    }
function showFieldLocal(product_id)
        {

            var qtyId='#local_'+ product_id;

            var editLink="#local_edit_link_"+ product_id;
            var valueprice="#valueprice_"+ product_id;
            var updateButton="#local_update_button_"+ product_id;
            var resetButton="#local_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 updateFieldLocal(product_id)
        {
            var priceId = '#local_'+ product_id;
            var valueId = '#valuelocal_'+ product_id;
            var updatedqty = '#updatedlocal_'+ product_id;
            var valueprice="#valueprice_"+ product_id;

            var editLink = "#local_edit_link_"+ product_id;
            var updateButton = "#local_update_button_"+ product_id;
            var resetButton = "#local_reset_button_"+ product_id;
            var url ='<?php echo Mage::getUrl('marketplace/marketplaceaccount/updateFieldPrice/')?>';

            $wk_jq(priceId).toggle()

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

            $price = $wk_jq(priceId).val();
            jQuery(valueId).html($price);
            hideReset(product_id);

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



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

                    $updateButton.prop('disabled', false);
                    $wk_jq(valueprice).show();
                //  $wk_jq(priceId).setValue($price);


                    jQuery(priceId).val($price);
            // $wk_jq(priceId).setValue($price);



                }
            });
        }