使用jQuery发送表单时获取正确数量的对象 [英] Get the correct number of objects when sending a form with jQuery

问题描述

自昨晚以来，我一直在寻找解决方案，但均未达成. 这是完全以JavaScript形式创建的，可以模拟购物车.它必须通过2个参数TR恢复才能继续.

I am looking for a solution to my problem since last night without reaching either. This is an entirely created in JavaScript form that simulates a shopping cart. It must recover by 2 parameters TR to go further.

问题是，当我验证表单时，他为我创建了正确数量的对象，但是它也为我创建了与TR行相同数量的项目.

The problem is that when I validate the form he created me the right number of objects, however it also created me the same number of items as there TR lines.

示例:我激活了3个项目，已在表单中创建了3行.如果我验证了购物车，然后重新登录，这就是我得到的:

Example: I activated 3 items, 3 lines have been created in the form. If I validate the cart, and I log back, this is what I get :

我得到3行，每行包含相同的对象.

I get so 3 lines each containing the same objects.

然后，如果我删除三篇文章之一，它将删除我三个对象之一，但是仍然向我发送3行，其中包含剩余的两个对象...

Then, if I delete one of three articles, it removes me one of three objects, however it still sends me 3 lines containing the two remaining objects ...

我试图制作一个 JSFIDDLE 以便您更好地理解我的意思，但我没有无法显示发送结果.

I tried to make a JSFIDDLE for you to see better what I mean, but I didn't manage to show the result of sending.

代码:

$('.valide').click(function (e) {

    e.preventDefault();

    var columns = $('.trToCheck').map(function() {
        // $(this) is used more than once; cache it for performance.
        var $row = $(this);

        // For each row that's "mapped", return an object that
        //  describes the first and second <td> in the row.
        return {
            idenR: $row.data('id'),
            duree: $row.find($("select[name='chooseDuration']")).val()
        };
    }).get();

    $('#results').html(columns);


});

HTML:

<form class="table-responsive container">
        <table class="table table-th-block table-dark">
            <thead>
                <tr>
                    <th>name</th>
                    <th class="text-center" style="width: 150px;">duration</th>
                    <th class="text-center" style="width: 100px;"></th>
                    <th class="text-right" style="width: 150px;">total</th>
                </tr>
            </thead>

            <tbody style="border-top-width: 1px; border-top-style: solid; border-top-color: rgb(221, 221, 221);">
            <tr class="trToCheck" data-id="1">
                <td>name 1</td>
                <td class="text-center">
                  <select class="form-control" name="chooseDuration">
                    <option class="selected" value="1">1 month</option>
                    <option value="2">2 months</option>
                    <option value="3">3 months</option>
                    <option value="6">6 months</option>
                    <option value="9">9 months</option>
                    <option value="12">1 year</option>
                  </select>
                </td>

                <td class="text-right">
                  <a class="fa fa-trash" href="#" style="color: rgb(67, 74, 84);"></a>
                </td>

                <td class="text-right"><span>19<i class="fa fa-eur" style="padding-left: 5px;"></i></span></td>
              </tr>

                <tr class="trToCheck" data-id="2">
                <td>name 2</td>
                <td class="text-center">
                  <select class="form-control" name="chooseDuration">
                    <option class="selected" value="1">1 month</option>
                    <option value="2">2 months</option>
                    <option value="3">3 months</option>
                    <option value="6">6 months</option>
                    <option value="9">9 months</option>
                    <option value="12">1 year</option>
                  </select>
                </td>

                <td class="text-right">
                  <a class="fa fa-trash" href="#" style="color: rgb(67, 74, 84);"></a>
                </td>

                <td class="text-right"><span>19<i class="fa fa-eur" style="padding-left: 5px;"></i></span></td>
              </tr>
            </tbody>
         </table>

         <p class="text-right">
           <button class="btn btn-success valide" style="margin-left: 20px;">
               <i class="fa fa-check"></i><span>Next step</span></button>
         </p>
    </form>

<div id="results">Results<br></div>

编辑:这是删除行的代码(虽然它不是jsfiddle中写的，但您会理解的):

EDIT : Here is the code for removing a line (it is not written like that in the jsfiddle, but you'll understand) :

$('.supprLine').click(function (e) {
  e.preventDefault();
  $(this).parents('tr').remove();
});

推荐答案

您的小提琴工作正常，看起来您在应用中多次分配了click事件处理程序.

Your Fiddle works fine, It looks like you assigned the click event handler more than once in your app.

要检查其是否可以使用$('.valide').unbind().click(...

To check if its so u can try replacing $('.valide').click(... with $('.valide').unbind().click(...

喜欢这个:

$('.valide').unbind().click(function (e) {
  e.preventDefault();

  var columns = $('.trToCheck').map(function() {
    var $row = $(this);
    return {
        idenR: $row.data('id'),
        duree: $row.find($("select[name='chooseDuration']")).val()
    };
  }).get();
});

这篇关于使用jQuery发送表单时获取正确数量的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！