按下按鈕

Question

我有一個表，你可以通過勾選複選框，並點擊一個按鈕選擇某些行顯示的HTML下拉選擇在電子郵件，它會彈出一個電子郵件客戶端和這些選擇粘貼到電子郵件正文中。這工作得很好。

我所掙扎的是，我需要得到它也粘貼在從下拉列表中選擇，但我有麻煩這個功能集成到我的代碼。我怎麼能這樣做？

HTML選擇：

<select id="pos-drop" onChange="updateinput();"> 
    <option selected disabled>POS - City</option> 
     <?php foreach($pos->fetchAll() as $city) { ?> 
     <option class="pos-city" value="<?php echo $city['POS'];?>"><?php echo $city['POS'];?></option> 
     <?php } ?> 
</select> 

的JavaScript ...的pos_city_selected變量保持當前的下拉列表中選擇：

var input_num; 

var pos_city_selected; 
var pos_city_selected1; 

function updateinput() { 
var pos_city = document.getElementById("pos-drop"); 
pos_city_selected = pos_city.options[pos_city.selectedIndex]; 
if (pos_city_selected) { 
    pos_city_selected1 = true; 
    } 
console.log(pos_city_selected); 
console.log(pos_city_selected1); 
} 

$(function($) { 
    var RowData = (function(storage, storageKey) { 
     var rowData = readFromSession(); 
     var dataItems = ['loc', 'rp-code', 'sku', 'special-id', 'description', 'quantity', 'unit']; 
     var emailDelimiters = { 
      'row': '%0D%0A', 
      'dataItem': '\xa0\xa0' 
     }; 
     function readFromSession() { 
      return JSON.parse(storage.getItem(storageKey) || '{}'); 
     } 
     function writeToSession() { 
      storage.setItem(storageKey, JSON.stringify(rowData)); 
     } 
     function writeRow(tr) { 
      var $tr = $(tr), 
       id = $tr.prop('id'); 
      if($tr.find('.check').is(':checked')) { 
       rowData[id] = {}; 
       for(var i=0; i<dataItems.length; i++) { 
        rowData[id][dataItems[i]] = $tr.find('.' + dataItems[i]).text(); 
       } 

       input_num = rowData[id].quantity_num = $tr.find('.spinner').val(); // if using HTML5 <input type="number"> 
      } else { 
       delete rowData[id]; 
      } 
      writeToSession(); 
     } 
     function readRow(tr) { 
      // restore tr's checkbox and spinner value from stored data 
      var $tr = $(tr), 
       id = $tr.prop('id'), 
       row = rowData[id]; 
      if(row) { 
       $tr.find('.check').prop('checked', true).end() 
        // .find('.spinner').spinner('value', row.quantity_num); // if using spinner widget 
        .find('.spinner').val(row.quantity_num); // if using HTML5 <input type="number"> 
      } 
     } 
     function toEmailString() { 
      return $.map(rowData, function(row, id) { 
       return $.map(row, window.encodeURIComponent).join(emailDelimiters.dataItem); 
      }); 
     } 
     // selectively expose functions as methods of RowData 
     return { 
      'writeRow': writeRow, 
      'readRow': readRow, 
      'toEmailString': toEmailString 
     }; 
    })(window.sessionStorage, 'checkedRowData'); 

    $('#merchTable').on('change', '.check', function() { // on changing a table row ... 
     RowData.writeRow($(this).closest('tr').get(0)); // ... set the corresponding row object in RowData and sessionStorage 
    }).on('change', '.spinner', function() { // on leaving a spinner widget 
     RowData.writeRow($(this).closest('tr').get(0)); 
    }); 
    $('#checkout').on('click', function() { // on clicking the [Checkout] button   

     console.log(input_num); 
     if (input_num > quantity_num) { 
      alert("The entered number cannot be greater than the quantity."); 
     } else if (pos_city_selected1 != true) { 
      alert("Please select a POS-City from the dropdown list."); 
     } else { 

     var link = "mailto:me@example.com" + "?subject=" + encodeURIComponent("Order") + "&body=" + RowData.toEmailString(); 
     console.log(link); 
     window.location.href = link; 
     } 
    }); 

    // Call this function on completion of every pagination/search 
    function restoreVisibleRows() { 
     $('#merchTable tbody tr').get().forEach(RowData.readRow); 
    } 

    restoreVisibleRows(); 

}); 

Answer 1

建議的方法：

• 刪除這三個瓦爾，input_num等等，以及function updateinput() {...}，以及他們的任何提及。
• 添加一個公共RowData.validityCheck()方法，其拋出如果它在rowData遇到錯誤，例如所輸入的控管數量比其相應的量，可用更大。
• 聘請＃結賬的點擊處理程序來協調的有效性檢查，並採取相應的行動一try{} catch{}結構，如下所示：

$('#checkout').on('click', function() { // on clicking the [Checkout] button 
    try { 
     // (1) perform validity check on the selected rows 
     RowData.validityCheck(); // will throw if error is detected 

     // (2) perform validity check on the #pos_drop selection 
     var pos_city = $("#pos-drop").val(); 
     if (!pos_city) { 
      throw new Error('Please select a POS-City from the dropdown list.'); 
     } 
     // (3) perform any further validity checks here (and throw accordingly) 

     // Execution will only reach this point if no validity error is encountered. 
     var link = "mailto:me@example.com" + "?subject=" + encodeURIComponent("Order") + "&body=Location: " + pos_city + '%0D%0A' + RowData.toEmailString(); // check that delimiter. 
     console.log(link); 
     window.location.href = link; 
    } 
    catch(e) { 
     console.error(e); 
     $('#userMessage').text(e.message); // element #userMessage - eg a <span> - needs to exist somewhere on the page 
    } 
});