Affichage de la liste déroulante HTML dans le bouton E-mail Appuyez sur

Question

J'ai un tableau dans lequel vous pouvez sélectionner certaines lignes en cochant une case et en cliquant sur un bouton, un client e-mail apparaîtra et coller ces sélections dans le corps du message. Cela fonctionne très bien. Ce qui me dérange, c'est que j'ai besoin de l'obtenir pour coller aussi dans la sélection de la liste déroulante mais j'ai du mal à intégrer cette fonctionnalité dans mon code. Comment pourrais-je faire ça?

HTML sélectionnez:

<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 ... la variable pos_city_selected contient la liste déroulante sélection actuelle:

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

Approche suggérée:

• supprimer ces trois vars, input_num etc et le function updateinput() {...}, et toute mention d'entre eux.
• ajouter une méthode publique RowData.validityCheck(), qui lance si elle rencontre une erreur dans rowData, par exemple une quantité entrée est supérieure à la quantité disponible disponible.
• emploient une structure try{} catch{} dans le gestionnaire de clic de # caisse pour orchestrer la vérification de la validité et agir en conséquence, comme suit:

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