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();
    });

    }

Answer 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>