将表格中的JavaScript Spinner值拖入电子邮件中 [英] Pull JavaScript Spinner Value from Table into Email

查看：95
本文介绍了将表格中的JavaScript Spinner值拖入电子邮件中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个多列表格，其中一列是一个复选框。我可以检查不同的行，然后点击Checkout按钮，它会在电子邮件正文中显示相应的选定表格行数据。



无论何时选中复选框，它还会显示一个额外的列 Quantity＃，其中包含一个微调器，用户可以键入数字或使用向上/向下箭头选择数字。 然而，当我输入一个数字然后点击Checkout按钮时，该数值始终显示为未定义。

我的控制台中的微调器的价值，但我不确定如何让它显示在我的电子邮件中。



HTML：

$ b
$ b 

 < section id =checkout-btn> 
< button id =checkoutname =orderonclick =sendMail（）; return false> Checkout< / button> 
< / section> 
 
< br> 
 
< table id =merchTablecellspacing =5class =sortable> 
< thead> 
< tr class =ui-widget-header> 
 < th class =sorttable_nosort> Loc< / th> 
< th class =merchRow>报告代码< / th> 
< th class =merchRow> SKU< / th> 
< th class =merchRow>特殊ID< / th> 
 < th class =merchRow>数量< / th> 
< th class =sorttable_nosort> Unit< / th> 
< th style =display：none; class =num> Quantity＃< / th> 
< / tr> 
< / thead> 
< tbody> 
 
<？php foreach（$ dbh-> query（$ query）as $ row）{？> 
 
< tr> 
< td class =ui-widget-content>< input type =checkboxclass =checkname =checkid =checkid-<？php echo intval（$ row [ 'ID']）>？>< / TD> 
< td class =loc ui-widget-contentdata-loc =<？php echo $ row ['Loc']？>>< input type =hidden> <？php echo $ row ['Loc'];？>< / td> 
< td class =rp-code ui-widget-contentalign =centerdata-rp-code =<？php echo $ row ['Rp-Code']？> id =rp-code-<？php echo intval（$ row ['Rp-Code']）？>><？php echo $ row ['Rp-Code'];？>< / TD> 
< td class =sku ui-widget-contentdata-sku =<？php echo $ row ['SKU']？> id =sku-<？php echo intval（$ row ['SKU']）？>><？php echo $ row ['SKU'];？>< / td> 
< td class =special-id ui-widget-contentdata-special-id =<？php echo $ row ['Special-ID']？>我们可以通过这种方式来创建一个特定的标识符，这个标识符是一个特定的标识符。 ？>< / TD> 
< td class =description ui-widget-contentdata-description =<？php echo htmlspecialchars（$ row ['Description']）？> id =description-<？php echo intval（$ row ['Description']）？>><？php echo $ row ['Description'];？>< / td> 
< td class =quantity ui-widget-contentdata-quantity =<？php echo $ row ['Quantity']？>我们可以通过下面的例子来说明如何使用数据库中的数据：['Quantity'];>><？php echo $ row ['Quantity'];？>< TD> 
< td class =unit ui-widget-contentdata-unit =<？php echo $ row ['Unit']？> id =unit-<？php echo intval（$ row ['Unit']）？>><？php echo $ row ['Unit'];？>< / td> 
< td style =display：none; class =quantity_num ui-widget-contentdata-spinner =<？php echo intval（$ row ['ID']）？>>< input type =textboxstyle =width：100px ; class =spinnerid =spin-<？php echo intval（$ row ['ID']）？>>< / td> 
< / tr> 
 
<？php}？> 
 
< / tbody> 
< / table>

Javascript将数据发送至电子邮件地址：

函数sendMail（）{
 var link =mailto：me@example.com
 +？subject =+ encodeURIComponent（Order）
 +& body =; 
 
 var body =''; 
 
 $（'table tr input [name =check]：checked'）。each（function（）{
 var current_tr = $（this）.parent（）。parent ）; 
 
 var data = current_tr.find（'。loc'）。data（'loc'）; 
 body + = encodeURIComponent（data）+'\xa0\xa0' ; 
 
 var data = current_tr.find（'。rp-code'）。data（'rp-code'）; 
 body + = encodeURIComponent（data）+'\xa0\\ （'。sku'）。
 body + = encodeURIComponent（data）+'\xa0\ xa0'; 
 
 var data = current_tr.find（'。special-id'）。data（'special-id'）; 
 body + = encodeURIComponent（data）+'\ xa0\xa0'; 
 
 var data = current_tr.find（'。description'）。data（'description'）; 
 body + = encodeURIComponent（data）+'\xa0 \xa0'; 
 
 var data = current_tr.find（'。quantity'）。data（'quantity'）; 
 body + = encodeURIComponent（data）+ \xa0\xa0'; 
 
 var data = current_tr.find（'。unit'）。data（'unit'）; 
 body + = encodeURIComponent（data）+'\\ \\xa0\xa0' ; 
 
 var data = current_tr.find（'。quantity_num'）。data（'spinner'）; 
 body + = encodeURIComponent（data）+'\xa0\xa0'; 
 
 body + ='％0D％0A'; 
}）; 
 
 body + =''; 
 link + = body; 
 console.log（link）; 
 
 window.location.href = link;

JavaScript for spinner： 

  $（function（）{
 $（。check）。change（function（）{
 $（this）.closest（'tr' ）.find（'td.quantity_num'）。toggle（this.checked）; 
 console.log（$（'input.check'）。is（'：checked'））; 
 var quantity ='（this）.closest（'tr'）。find（'td.quantity'）。data（'quantity'）; 
 console.log（quantity）; 
 
 if $（'input.check'）。is（'：checked'））
 $（this）.closest（'table'）。find（'th.num'）。toggle（true）; 
 else 
 $（this）.closest（'table'）。find（'th.num'）。toggle（false）; 
 
 
 
 $（ ）（$。$ spin $ {
 spin：function（event，ui）{
 if（ui.value> quantity）{
 $（this）.spinner（value，quantity）; 
 return false; 
} else if（ui.value< = 1）{
 $（this）.spinner （价值，1）; 
 re变成false; 
} 
 
 var test = ui.value; 
 sessionStorage.setItem（test，JSON.stringify（test））; 
 var testtrue = sessionStorage.getItem（test）; 
 console.log（JSON.parse（testtrue））; 
 
} 
}）; 
}）; 
}）;


解决方案

据我所知，您想获得所谓的 spinner 的当前值，由以下公式给出： 

  $（selector）.spinner（'value'）

所以，应该建立所需的字符串：

$ p $ function sendMail（）{
var dataItems = [
{'clss '：'。loc'，'prop'：'loc'}，
{'clss'：'。rp-code'，'prop'：'rpCode'}，
{'clss'： '.sku'，'prop'：'sku'}，
{'clss'：'。special-id'，'prop'：'specialId'}，
{'clss'：'。描述'，'道具'：'描述'}，
{'clss'：'。quantity'，'prop'：'quantity'}，
{'clss'：'。unit'，' prop'：'unit'}
];
var link =mailto：me@example.com+？subject =+ encodeURIComponent（Order）+& body =;
link + = $（'＃merchTable tr input [name =check]：checked'）。closest（'tr'）。get（）。map（function（tr）{
var str = dataItems.map（function（item）{
return encodeURIComponent（$（tr）.find（item.clss）.data（item.prop））+'\xa0\xa0';
}）。join（''）;
str + = encodeURIComponent（$（tr）.find（'。spinner'）。spinner（'value'））+'\xa0\xa0';
return str;
}）。join（''）+'％0D％0A';
console.log（link）;
window.location.href = link; （
）

请注意 .map（） code>（两次）将对象数组映射到字符串数组，并将 .join（''）放到一起。


I have a multiple column table with one of the columns being a checkbox. I can check different rows and then hit a "Checkout" button and it will display the corresponding selected table row data in the body of an email.

Whenever a checkbox is checked, it also displays an extra column Quantity # which contains a spinner where the user can either type in a number or use the up/down arrows to select a number. However, when I enter a number and then hit the "Checkout" button, the value is always displayed as undefined.

I am getting the value of the spinner in my console but am unsure of how to get it displayed on my email. How can I get it so that the value will be read and correctly displayed on the email body?

HTML:

<section id="checkout-btn"> 
<button id="checkout" name="order" onclick="sendMail(); return false">Checkout</button>
</section>

<br>

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr>
            <td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
            <td class="loc ui-widget-content" data-loc="<?php echo $row['Loc'] ?>"><input type="hidden"><?php echo $row['Loc'];?></td>
            <td class="rp-code ui-widget-content" align="center" data-rp-code="<?php echo $row['Rp-Code'] ?>" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
            <td class="sku ui-widget-content" data-sku="<?php echo $row['SKU'] ?>" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
            <td class="special-id ui-widget-content" data-special-id="<?php echo $row['Special-ID'] ?>" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
            <td class="description ui-widget-content" data-description="<?php echo htmlspecialchars($row['Description']) ?>" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
            <td class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
            <td class="unit ui-widget-content" data-unit="<?php echo $row['Unit'] ?>" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
            <td style="display: none;" class="quantity_num ui-widget-content" data-spinner="<?php echo intval ($row['ID'])?>"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

Javascript to send data to email:

function sendMail() {
    var link = "mailto:me@example.com"
             + "?subject=" + encodeURIComponent("Order")
             + "&body=";

    var body = '';

  $('table tr input[name="check"]:checked').each(function(){
    var current_tr = $(this).parent().parent();

    var data = current_tr.find('.loc').data('loc');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.rp-code').data('rp-code');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.sku').data('sku');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.special-id').data('special-id');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.description').data('description');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.quantity').data('quantity');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.unit').data('unit');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.quantity_num').data('spinner');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    body += '%0D%0A';
  });

  body += '';
  link += body;
  console.log(link);

  window.location.href = link;
}

JavaScript for spinner:

$(function () {
    $(".check").change(function(){
    $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
    console.log($('input.check').is(':checked'));
    var quantity = $(this).closest('tr').find('td.quantity').data('quantity');
        console.log(quantity);

  if($('input.check').is(':checked'))
    $(this).closest('table').find('th.num').toggle(true);
    else
    $(this).closest('table').find('th.num').toggle(false);



    $(this).closest("tr").find(".spinner" ).spinner({
      spin: function( event, ui ) {
        if ( ui.value > quantity ) {
          $( this ).spinner( "value", quantity );
          return false;
        } else if ( ui.value <= 1 ) {
          $( this ).spinner( "value", 1 );
          return false;
        }

    var test = ui.value;
    sessionStorage.setItem("test", JSON.stringify(test));
    var testtrue = sessionStorage.getItem("test");
    console.log(JSON.parse(testtrue));

      }
    });
  });
  });

解决方案

As far as I can tell, you want to get the current value of the so-called spinner, which is given by :

$(selector).spinner('value')

So, in full, something like this should build the required string :

function sendMail() {
    var dataItems = [
        { 'clss':'.loc',         'prop':'loc' },
        { 'clss':'.rp-code',     'prop':'rpCode' },
        { 'clss':'.sku',         'prop':'sku' },
        { 'clss':'.special-id',  'prop':'specialId' },
        { 'clss':'.description', 'prop':'description' },
        { 'clss':'.quantity',    'prop':'quantity' },
        { 'clss':'.unit',        'prop':'unit' }
    ];
    var link = "mailto:me@example.com" + "?subject=" + encodeURIComponent("Order") + "&body=";
    link += $('#merchTable tr input[name="check"]:checked').closest('tr').get().map(function(tr) {
            var str = dataItems.map(function(item) {
                return encodeURIComponent($(tr).find(item.clss).data(item.prop)) + '\xa0\xa0';
            }).join('');
            str += encodeURIComponent($(tr).find('.spinner').spinner('value')) + '\xa0\xa0';
            return str;
        }).join('') + '%0D%0A';
    console.log(link);
    window.location.href = link;
}

Note the use of .map() (twice) to map an Array of objects to Array of strings, and .join('') to put the pieces together.

这篇关于将表格中的JavaScript Spinner值拖入电子邮件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆