Eingabewert speichern onclick div

Question

Neben einer Eingabe möchte ich zwei Divs mit Plus- und Minuszeichen anzeigen, so dass beim Klicken auf einen der divs der Wert innerhalb der Eingabe erhöht oder verringert wird.

Es funktioniert fast perfekt, aber der beste Weg, um die Eingabe zu speichern. Durch Ändern der Eingabe und Laden der /save URL. Die Eingabe funktioniert perfekt mit diesem Code, der beim Ändern der/save URL lädt und der Wert wird gespeichert.

Ich möchte das gleiche für die Divs, dass beim Klicken auf das Div der Wert innerhalb der Eingabe ändert sich und der Wert wird von der /save URL gespeichert.

Wie muss ich meinen Code ändern?

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

Lassen Sie sich in Ihrem Plus von PHP-Code befreien und minus divs wie diese

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

Und diese addQtyFieldSaver Funktion

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

Mit dieser Lösung wird das Click-Ereignis auf der +/- divs greift auf das Eingabetextfeld mit seinem übergeordneten Container zu erhalten, um die Menge des Eingangswertes zu Ihrer hinzufügen und ändern Sie es. Ruft dann die Funktion saveForm() auf, um die neuen Daten zu speichern.

EDIT: Voll Beispiel

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(){ 
 
    \t addQtyFieldSaver(); 
 
    \t $('.reduced').click(function() { 
 
     \t var el = $(this).parent().find('input:text'); \t 
 
      var newval = (parseInt($(el).val(),10) - 1 > 0)?$(el).val() - 1:0; 
 
      el.val(newval); 
 
      saveForm(); 
 
     }); 
 
     $('.increase').click(function() { \t \t 
 
      var el = $(this).parent().find('input:text'); 
 
      var newval = parseInt($(el).val(),10)+1; 
 
      el.val(newval); 
 
      saveForm(); 
 
     }); 
 
    })

<html> 
 
\t <head> 
 
\t \t <title>Ejemplo</title> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
\t \t <script type="text/javascript"> 
 
    \t 
 
</script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="shopping-cart-table"> 
 
\t \t \t <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> 
 
\t </body> 
 
</html>