将 JavaScript Spinner 值从表中提取到电子邮件中

Question

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

选中复选框时，它还会显示一个额外的列Quantity #，其中包含一个微调器，用户可以在其中输入数字或使用向上/向下箭头选择一个数字。 但是，当我输入一个数字然后点击“结帐”按钮时，该值始终显示为未定义。

我在控制台中获取微调器的值，但不确定如何在我的电子邮件中显示它。 我怎样才能得到它，以便在电子邮件正文中读取并正确显示该值？

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 将数据发送到电子邮件：

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：

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

      }
    });
  });
  });

Answer 1

据我所知，你想要得到所谓的spinner 的当前值，它由以下公式给出：

$(selector).spinner('value')

所以，完整地说，这样的东西应该构建所需的字符串：

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;
}

注意使用.map()（两次）将对象数组映射到字符串数组，并使用.join('') 将各个部分组合在一起。