js variable ведет себя по-разному в двух событиях

Question

Я создаю форму заказа с элементами. Люди вводят количество элементов, необходимых в поле ввода. Как и в случае, функция keyUp вычисляет общее количество каждого элемента и отображается рядом с ним. В то же время в нижней части таблицы отображаются итоговая общая стоимость и общее количество элементов. Все это делается в JS. Затем он передается на следующую страницу с помощью PHP. Это страница подтверждения. Затем пользователь нажимает кнопку «Продолжить», чтобы отправить данные на следующую страницу, где данные вставляются в базы данных.

Все это отлично работает.

Однако на странице подтверждения есть кнопка «Изменить», которая при нажатии возвращает форму заказа. Там все предыдущие данные и общее количество правильно там, которые пользователь может редактировать и повторно отправлять. для общего количества предметов, который показывает два раза, что было ранее представлено исключением

Код

$('document').ready(function(){ 

     $("input").each(function() { 
        $(this).keyup(function(){ 

         calculateSum(); 
        }); 

       }); 
}); 
    calculateSum(); 

    function calculateSum() { 

    //Calculate Total Items 
      var sum = 0; 
      var totcost=0; 
      //iterate through each textboxes and add the values 
      $("input").each(function() { 

       //add only if the value is number 
       if(!isNaN(this.value) && this.value.length!=0 && this.value.length<=3) { 
        sum += eval(parseInt(this.value)); 
       } 
      }); 

    //Calculate Total Cost 
      $("div.ittot").each(function() { 
       var tots=0; 
       var str=$(this).text(); 
       var thenum = str.replace(/^\D+/g, ''); 
       var tots = parseInt(thenum,10); 

       //add only if the value is number 
       if(!isNaN(tots) && tots.length!=0) { 
        totcost += tots; 
       } 
      }); 

     $("#totalcost").css("background-color", "green").html("<div style='float:left;margin-left:5px'><span style='font-weight:700'>Total Cost : </span>Rs."+ totcost + "</div><div style='float:right;margin-right:5px'><span style='font-weight:700'>Total Items : </span>" + sum + "</div><div style='clear:both'></div>"); 
    } 

В totcost переменная работает прекрасно.

Но переменная суммы не сбрасывается при каждом вызове функции и суммирует общее значение каждый раз вместо того, чтобы каждый раз обновляться каждый раз.

Что не так? Оба имеют одинаковые команды.

Редактировать

Заполненные код заказа в соответствии с просьбой

include('conn.php'); 
    $itemsc=""; 
    $arraytable = array(); 

$result=$orderdb->query("SELECT * FROM rates ORDER BY item"); 

if ($result) { 

/* Get field information for all columns */ 
    while ($finfo = $result->fetch_assoc()) { 

     $arraytable[$finfo['item']] = $finfo['rate']; 

     if($finfo['type']=="Male"){ 
      $itemsm[]=$finfo['item']; 
      $itemsidm[]=$finfo['id']; 
     } 
     elseif($finfo['type']=="Female"){ 
       $itemsf[]=$finfo['item']; 
       $itemsidf[]=$finfo['id']; 
      } 
     elseif($finfo['type']=="Common"){ 
       $itemsc[]=$finfo['item']; 
       $itemsidc[]=$finfo['id']; 
      }   

     elseif($finfo['type']=="Other"){ 
      $itemso[]=$finfo['item']; 
      $itemsido[]=$finfo['id']; 

      } 
    } 

} else{echo "ERROR !<br>";} 
//print_r($itemsm); 
?> 

<div class="scrolltop"><h4>Go to Top</h4></div> 
<div class="clothesform"> 
     <form action="place-order" method="post" name="orderform" id="orderform"> 

     <div><label for="phone">Phone </label> 
       <?php include('jqueryserverphone.php');?> 
         <div style="clear:both"></div> 
     </div>  
     <div style="clear:both"></div> 
       <h3>Order Details</h3> 
         <div class="male">  
          <h4>Male</h4> 
          <div class="colhead1">Item</div><div class="colhead2">Qty</div><div class="colhead3">Cost</div><div style="clear:both"></div> 
          <?php 
          $result=$orderdb->query("SELECT * FROM rates ORDER BY item"); 

          for($i=0;$i<count($itemsm);$i++) 
          { 
           $itemname= strtolower(preg_replace('/[^(\x20-\x7F)]*/',"",$itemsm[$i])); 
           $itemname=str_replace(array("_"," ","/"),"",$itemname); 
           $itemlabel=ucfirst($itemsm[$i]); 
           $itemlabelname=$itemname."lbl"; 
           ?>  

          <div> 
           <label for="<?php echo $itemname;?>"><?php echo $itemlabel;?><input type="hidden" name='<?php echo $itemlabelname;?>' value="<?php echo $itemlabel;?>"> </label> 
           <input type="number" data-validation="number" name ="<?php echo $itemname;?>" class="clothesqty" id="<?php echo $itemname;?>" 
           <?php if(isset($_POST[$itemname])){echo " value='$_POST[$itemname]'";}else{echo " value='0'";}?>> 
           <div id="<?php echo $itemname."cost";?>" class="ittot"> 
            <?php 
             include('testfunct.php'); 
            ?> 
           </div> 
           <div style="clear:both"></div> 
          </div> 
          <?php } ?> 
         </div> 

         <div class="female"> 
           <h4>Female</h4> 
           <div class="colhead1">Item</div><div class="colhead2">Qty</div><div class="colhead3">Cost</div><div style="clear:both"></div> 
           <?php 
           for($i=0;$i<count($itemsf);$i++) 
           {  
           $itemtitle=$itemsf[$i]; 
           $itemname= strtolower(str_replace("_","",preg_replace('/[^(\x20-\x7F)]*/',"",$itemsf[$i]))); 
           $itemname=str_replace(array("_"," ","/"),"",$itemname); 
           $itemlabel=ucfirst($itemsf[$i]); 
           $itemlabelname=$itemname."lbl"; 

           ?> 

           <div> 
            <label for="<?php echo $itemname;?>"><?php echo $itemlabel;?> <input type="hidden" name='<?php echo $itemlabelname;?>' value="<?php echo $itemlabel;?>"> </label> 
            <input type="number" data-validation="number" name ="<?php echo $itemname;?>" class="clothesqty" id="<?php echo $itemname;?>" 
            <?php if(isset($_POST[$itemname])){echo " value='$_POST[$itemname]'";}else{echo " value='0'";}?>> 
            <div id="<?php echo $itemname."cost";?>" class="ittot"> 
             <?php 
             include('testfunct.php'); 
            ?> 
            </div> 
            <div style="clear:both"></div> 
           </div> 

           <?php } ?> 

         </div> 

         <div class="common"> 
           <h4>Common Apparel</h4> 
           <div class="colhead1">Item</div><div class="colhead2">Qty</div><div class="colhead3">Cost</div><div style="clear:both"></div> 
           <?php 
           if(!empty($itemsc)){ 
           for($i=0;$i<count($itemsc);$i++) 
           {  
           $itemtitle=$itemsc[$i]; 
           $itemname= strtolower(str_replace("_","",preg_replace('/[^(\x20-\x7F)]*/',"",$itemsc[$i]))); 
           $itemname=str_replace(array("_"," ","/"),"",$itemname); 
           $itemlabel=ucfirst($itemsc[$i]); 
           $itemlabelname=$itemname."lbl"; 

           ?> 

           <div> 
            <label for="<?php echo $itemname;?>"><?php echo $itemlabel;?> <input type="hidden" name='<?php echo $itemlabelname;?>' value="<?php echo $itemlabel;?>"> </label> 
            <input type="number" data-validation="number" name ="<?php echo $itemname;?>" class="clothesqty" id="<?php echo $itemname;?>" 
            <?php if(isset($_POST[$itemname])){echo " value='$_POST[$itemname]'";}else{echo " value='0'";}?>> 
            <div id="<?php echo $itemname."cost";?>" class="ittot"> 
            <?php 
             include('testfunct.php'); 
            ?> 
            </div> 
            <div style="clear:both"></div> 
           </div> 

           <?php } 
           }?> 

         </div> 


         <div class="others"> 
           <h4>Household and Others</h4> 
           <div class="colhead1">Item</div><div class="colhead2">Qty</div><div class="colhead3">Cost</div><div style="clear:both"></div> 
           <?php 
           for($i=0;$i<count($itemso);$i++) 
           { 
           $itemtitle=$itemso[$i]; 
           $itemname=strtolower(preg_replace('/[^(\x20-\x7F)]*/',"",$itemso[$i])); 
           $itemname=str_replace(array("_"," ","/"),"",$itemname); 
           $itemlabel=ucfirst($itemso[$i]); 
           $itemlabelname=$itemname."lbl"; 

           ?> 

           <div> 
            <label for="<?php echo $itemname;?>"><?php echo $itemlabel;?> <input type="hidden" name='<?php echo $itemlabelname;?>' value="<?php echo $itemlabel;?>"> </label> 
            <input type="number" data-validation="number" name ="<?php echo $itemname;?>" class="clothesqty" id="<?php echo $itemname;?>" 
            <?php if(isset($_POST[$itemname])){echo "value='$_POST[$itemname]'";}else{echo "value='0'";}?>> 
            <div id="<?php echo $itemname."cost";?>" class="ittot"> 
            <?php 
             include('testfunct.php'); 
            ?> 

            </div> 
            <div style="clear:both"></div> 
           </div> 

           <?php } ?> 
           <div style="clear:both"></div> 
          </div> 
          <div style="clear:both"></div> 
         <div id="totalcost"><?php 
          if(isset($_POST)){ 
           totitem($_POST); 
           //echo $p; 
           //totcost(); 
          }else{echo "0";} 
         ?></div> 
         <div style="clear:both"></div>   
        <div class="submit"><input Type="submit" name="clothessub" value="Place Order"></div> 
     </form> 
    </div> 
    <script type="text/javascript"> var item= <?php echo json_encode($arraytable); ?>;</script> 

Файл testfunct.php где я называю общую функцию, как уже упоминалось ранее.

Переменная json_encode не имеет ничего общего с этой частью проблемы. Только передать переменную в мой внешний файл js для другой цели.

Редактировать

Фактическая форма here. Когда я сбросил значения формы при редактировании до нуля, так как общее значение элементов создает вышеупомянутую проблему, иначе

Answer 1

Когда вы переходите на этап подтверждения, у вас есть форма (<form action="register" method="post">) со скрытыми полями ввода, в которых хранятся введенные значения. Затем, когда вы вернетесь, чтобы отредактировать свой Ордер, эта форма исчезает, но только визуально - код присутствует в источнике, а скрытые поля ввода - со всеми значениями. Затем, когда calculateSum() вызывается keyUp, сумма вычисляется для ВСЕХ полей ввода, включая скрытые, которые складываются.

Одно из решений заключается в изменении селектора от "входа" на "вход [тип = номер]": Ваш код:

$("input").each(function() { 
    //add only if the value is number 
    if(!isNaN(this.value) && this.value.length!=0 && this.value.length<=3) { 
     sum += eval(parseInt(this.value)); 
    } 
}); 

Изменить его:

$("input[type=number]").each(function() { 
    //add only if the value is number 
    if(!isNaN(this.value) && this.value.length!=0 && this.value.length<=3) { 
     sum += eval(parseInt(this.value)); 
    } 
});