Save input value onclick div

Question

Next to a input I want to display two div's with plus and minus signs, so that when clicking on one of the divs, the value insdie the input increase or decrease.

It almost works perfect, but the best way to save the input. Is by changing the input and than load the /save url. The input works perfect with this code, that on changing the /save url loads and the value is saved.

I want the same for the div's, that when clicking on the div the value inside the input changes and the value is saved by the /save URL.

How do I need to change my code for this?

CODE HTML:

            <div class="quote-item product-quote-qty">
                    <div id="qdiv_<?php echo $item->getId() ?>" nowrap="nowrap" class="qty-div input-box">
                    <div class="reduced items item-<?php echo $item->getQty()*1; ?>" onclick="var result_<?php echo $item->getId() ?> = document.getElementById('qty_<?php echo $item->getId() ?>'); var qty_<?php echo $item->getId() ?> = result_<?php echo $item->getId() ?>.value; if( !isNaN( qty_<?php echo $item->getId() ?> ) &amp;&amp; qty_<?php echo $item->getId() ?> > 1 ) result_<?php echo $item->getId() ?>.value--;saveForm();return false;">-</div>

                    <input type="text" name="quote_request[<?php echo $item->getId() ?>][qty][]" id="qty_<?php echo $item->getId() ?>" value="<?php echo $item->getQty()*1; ?>" size="4" title="<?php echo $this->__('Qty') ?>" onchange="location.href='save'" class="required-entry validate-zero-or-greater input-text" maxlength="12" />

                    <div class="increase items" onclick="var result_<?php echo $item->getId() ?> = document.getElementById('qty_<?php echo $item->getId() ?>'); var qty_<?php echo $item->getId() ?> = result_<?php echo $item->getId() ?>.value; if( !isNaN( qty_<?php echo $item->getId() ?> )) result_<?php echo $item->getId() ?>.value++;saveForm();return false;">+</div>
                    </div>
            </div>

CODE JS:

    function saveForm() {
        var form = $('quotelist').clone(true);
        //update textarea
        var i = 0;
        $('quotelist').select('textarea').each(function (el) {
            form.select('textarea')[i].value = $(el).value;
            i++;
        });

        var action = $('quotelist').action;
        action = action.replace("quoteRequest", "save");
        form.action = action;
        form.request({
            onComplete: function(){ Miniquote.reloadContent(); }
        });
    }

    function addQtyFieldSaver(){
        $$('#shopping-cart-table input[type=text]').each(function (el) {
            return $(el).observe('blur', function(e){
                saveForm();
            });
        });
    }

EDIT:

    function addQtyFieldSaver(){
        $$('#shopping-cart-table input[type=text]').each(function (el) {
            return $(el).observe('blur', function(e){
                saveForm();
            });
        });

    $('.reduced').click(function () {
    var el =  $(this).parent().find('input:text');      
    var newval = (parseInt($(el).val(),10) - 1 > 0)?$(el).val() - 1:0;
    el.val(newval);
    saveForm();
    });

    $('.increase').click(function () {      
    var el = $(this).parent().find('input:text');
    var newval = parseInt($(el).val(),10)+1;
    el.val(newval);
    saveForm();
    });

    }

Rodrigo · Accepted Answer · 2017-12-12 18:58:48Z

1

Get rid of your PHP code in your plus and minus divs like this

<div class="reduced items">-</div>
<div class="increase items" >+</div>

And add this to your addQtyFieldSaver function

    $('.reduced').click(function () {
        var el =  $(this).parent().find('input:text');      
        var newval = (parseInt($(el).val(),10) - 1 > 0)?$(el).val() - 1:0;
        el.val(newval);
        saveForm();
    });
    $('.increase').click(function () {      
        var el = $(this).parent().find('input:text');
        var newval = parseInt($(el).val(),10)+1;
        el.val(newval);
        saveForm();
    });

With this solution, the click event on the +/- divs accesses the input text field using its parent container in order to get the quantity of the input value and change it. Then calls the function saveForm() to save the new data.

EDIT: Full Example

function saveForm() {
        alert('saveform is called');
    }

    function addQtyFieldSaver(){
        $('#shopping-cart-table input[type=text]').each(function (el) {
            return $(el).bind('blur', function(e){
                saveForm();
            });
        });
        
    }
    $(document).ready(function(){
    	addQtyFieldSaver();
    	$('.reduced').click(function () {
        	var el =  $(this).parent().find('input:text');   	
            var newval = (parseInt($(el).val(),10) - 1 > 0)?$(el).val() - 1:0;
            el.val(newval);
            saveForm();
        });
        $('.increase').click(function () { 		
            var el = $(this).parent().find('input:text');
            var newval = parseInt($(el).val(),10)+1;
            el.val(newval);
            saveForm();
        });
    })

<html>
	<head>
		<title>Ejemplo</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
		<script type="text/javascript">
 	
 </script>
	</head>
	<body>
		<div id="shopping-cart-table">
			<div class="quote-item product-quote-qty">
            <div id="qdiv_1" nowrap="nowrap" class="qty-div input-box">
            <div class="reduced items">-</div>

            <input type="text" name="quote_request[1][qty][]" id="qty_1" value="1" size="4" title="1" onchange="location.href='save'" class="required-entry validate-zero-or-greater input-text" maxlength="12" />

            <div class="increase items" >+</div>
            </div>
           </div> 
    </div>
	</body>
</html>

edited Dec 12, 2017 at 18:58

answered Dec 11, 2017 at 19:05

Rodrigo

1612 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JGeer Over a year ago

Thanks a lot! When I try your code, I get a JS error: TypeError: null is not an object (evaluating '$('.reduced').click')

JGeer Over a year ago

Yes, see my edit. I'm loading it inside the addQtyFieldSaver function. But that does not seem to work.

Rodrigo Over a year ago

Then move the code from the function to $(document).ready(function(){ }. Your html must be fully loaded, also you have a typo in $$('#shopping-cart-table remove the first $.

Collectives™ on Stack Overflow

Save input value onclick div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related