在按下按钮时显示电子邮件中的HTML下拉选择 [英] Displaying HTML Dropdown Selection in Email on Button Press

问题描述

我有一个表格，您可以通过选中某个复选框来选择某些行，然后在点击一个按钮时，会弹出一个电子邮件客户端并将这些选择粘贴到电子邮件正文中。这工作得很好。

我正在努力的是，我需要从下拉列表中粘贴选择内容，但无法将该功能集成到我的代码。我怎么能这样做？

HTML选择：

 < select id =pos-droponChange =updateinput（）;> 
<选项已禁用> POS  -  City< / option> 
<？php foreach（$ pos-> fetchAll（）as $ city）{？> 
< option class =pos-cityvalue =<？php echo $ city ['POS'];？>><？php echo $ city ['POS'] ;? >< /选项> 
<？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 = {
'行'：'％0D％0A'，
'dataItem'：'\xa0\xa0'
}; 
函数readFromSession（）{
 return JSON.parse storage.getItem（storageKey）||'{}'）; 
} 
函数writeToSession（）{
 storage.setItem（storageKey，JSON.stringify（rowData））; 
 } 
函数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（）; //如果使用HTML5< input type =number> 
} else {
 delete rowData [id]; 
} 
 writeToSession（）; 
} 
函数readRow（tr）{
 //从存储的数据中恢复tr的复选框和微调值
 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）; //如果使用微调控件
 .find（'。spinner'）。val（row.quantity_num）; //如果使用HTML5< input type =number> 
 
 $ b函数toEmailString（）{
 return $ .map（rowData，function（row，id）{
 return $ .map（row，window。 encodeURIComponent）.join（emailDelimiters.dataItem）; 
}）; 
 
 //选择性地将函数暴露为RowData的方法
 return {
'writeRow'：writeRow，
'readRow'：readRow，
'toEmailString '：toEmailString 
}; 
}）（window.sessionStorage，'checkedRowData'）; $（$＃
 $（'＃merchTable'）。on（'change'，'.check'，function（）{//关于更改表格行... 
 RowData.writeRow（$ （this）.closest（'tr'）。get（0））; // ...在RowData和sessionStorage中设置相应的行对象
}）。on（'change'，'.spinner'，function （）{//离开一个微调元件
 RowData.writeRow（$（this）.closest（'tr'）。get（0））; 
}）; $（'＃checkout'）。on（'click'，function（）{//点击[Checkout]按钮
 
 console.log（input_num）; 
如果（input_num> quantity_num）{
 alert（输入的数字不能大于数量。）; 
} else if（pos_city_selected1！= true）{
 alert（Please ）; 
}其他{
 
 var link =mailto：[e-mail]+？subject =+ encodeURIComponent（ Order）+& body =+ RowData.toEmailString（）; 
 console.log（link）; 
 window.location.href = link; 
} 
} ）; 
 
 //完成每个分页/搜索时调用此函数
函数restoreVisibleRows（）{
 $（'＃merchTable tbody tr'）。get（）。forEach（RowData .readRow）; 
} 
 
 restoreVisibleRows（）; 
 
}）; 
  

解决方案

建议的方法：

• 删除这三个变量， input_num 等和函数updateinput（）{...


• 添加一个public RowData.validityCheck（）方法，它如果在rowData中遇到错误，则抛出它，例如，输入的量大于其相应的量 - 可用。
  
• 使用 try {} catch {}






$ b $结构的结构（'click'，function（）{//点击[Checkout]按钮
尝试{
/ $（'＃$ checkout'）。 /（1）对所选行进行有效性检查
RowData.validityCheck（）; //如果检测到错误，则会抛出

//（2）对#pos_drop选项执行有效性检查
var pos_city = $（ ＃POS降）VAL（）。
if（！pos_city）{
throw new Error（'请从下拉列表中选择一个POS城市。'）;

（3）在这里执行任何进一步的有效性检查（并相应地抛出）

//如果没有遇到有效性错误，执行只会到达这一点。
var link =mailto：[e-mail]+？subject =+ encodeURIComponent（Order）+& body = Location：+ pos_city +'％0D％0A'+ RowData。 toEmailString（）; //检查分隔符。
console.log（link）;
window.location.href = link;
}
catch（e）{
console.error（e）;
$（'＃userMessage'）。text（e.message）; // element #userMessage - 例如一个< span> - 需要在页面某处存在
}
}）;





I have a table where you can select certain rows by checking a checkbox and, on a button click, it will bring up an email client and paste those selections into the email body. This works just fine.

What I am struggling with is that I need to get it to also paste in the selection from the dropdown list but am having trouble integrating that functionality into my code. How could I do this?

HTML select:

<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...the pos_city_selected variable holds the current dropdown list selection:

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:[e-mail]" + "?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();

});

解决方案

Suggested approach :

• delete those three vars, input_num etc and the function updateinput() {...}, and any mention of them.
• add a public RowData.validityCheck() method, which throws if it encounters an error in the rowData, eg an entered quanity is greater than its corresponding quantity-available.
• employ a try{} catch{} structure in #checkout's click handler to orchestrate validity checking and act accordingly, as follows :

$('#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:[e-mail]" + "?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
    }
});

这篇关于在按下按钮时显示电子邮件中的HTML下拉选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！