0

我有一排具有唯一 ID 和自己的提交按钮的表单。我使用 for 循环来获取我的行。for ( $i = 0 ; $i < count($areaList) ; $i++ )

下面的示例 html 输出。

在我的 javascript 中，我需要 #loading 和 #result 来引用我的 html 中的唯一 id="loading(int)" 以便消息显示在该行旁边。

起初，我在表格的每一行中都有 div id="loading" 和 div id="result" 不带整数，但消息“已保存”只会显示在我的第一行（首先它发现ID）。我需要我的 id 是唯一的，但是如何将它们附加到我的 javascript 中？

我需要一些 js 的方向......我尝试过：

var rows = getElementsByClassName('reply_form');
for (var i=0, ii=rows.length; i<ii; i++)
rows[i]


var loading = $('#loading').attr('value');
$('#loading').prepend(""+loading+"");

——不知道去哪里……

 <form id="1" class="reply_form" enctype="multipart/form-data" method="post" action="/reports/addcounts/" accept-charset="utf-8">
    <div style="display:none;"><input type="hidden" name="_method" value="PUT" /><input type="hidden" name="data[_Token][key]" value="977ceaa782a964fe9a3f5a1cb3d7d422e8470af9" id="Token108437306" /></div>    
<table>
<tbody>
    <tr>
        <td><input type="hidden" name="data[Report][id]" value="184463" /><b>Room</b><br />207  <input type="hidden" name="data[Report][area]" value="1" /></td>
        <td><input name="data[Report][tables1]" type="text" class="inputbox" size="3" value="0" id="ReportTables1" />           </td> 
        <td><input name="data[Report][chairs1]" type="text" class="inputbox" size="3" value="0" id="ReportChairs1" />           </td> 
        <td><input name="data[Report][comments1]" type="text" size="20" value="" id="ReportComments1" />            </td>
        <td>
            <div class="submit"><input type="submit" value="Submit" /></div><br />
            <div id="loading1" style="display: none;">Saved</div>
            <div id="result1" style="display: none;"></div>
        </td>
    </tr>
    </tbody>
    </table>
</form>

    <form id="2" class="reply_form" enctype="multipart/form-data" method="post" action="/reports/addcounts/" accept-charset="utf-8">
    <div style="display:none;"><input type="hidden" name="_method" value="PUT" /><input type="hidden" name="data[_Token][key]" value="977ceaa782a964fe9a3f5a1cb3d7d422e8470af9" id="Token108437307" /></div>    
<table>
<tbody>
    <tr>
        <td><input type="hidden" name="data[Report][id]" value="184464" /><b>Room</b><br />208  <input type="hidden" name="data[Report][area]" value="2" /></td>
        <td><input name="data[Report][tables2]" type="text" class="inputbox" size="3" value="0" id="ReportTables2" />           </td> 
        <td><input name="data[Report][chairs2" type="text" class="inputbox" size="3" value="0" id="ReportChairs2" />            </td> 
        <td><input name="data[Report][comments2]" type="text" size="20" value="" id="ReportComments2" />            </td>
        <td>
            <div class="submit"><input type="submit" value="Submit" /></div><br />
            <div id="loading2" style="display: none;">Saved</div>
            <div id="result2" style="display: none;"></div>
        </td>
    </tr>
    </tbody>
    </table>
</form>

    <form id="3" class="reply_form" enctype="multipart/form-data" method="post" action="/reports/addcounts/" accept-charset="utf-8">
    <div style="display:none;"><input type="hidden" name="_method" value="PUT" /><input type="hidden" name="data[_Token][key]" value="977ceaa782a964fe9a3f5a1cb3d7d422e8470af9" id="Token108437308" /></div>
<table>
<tbody> 
    <tr>
        <td><input type="hidden" name="data[Report][id]" value="184465" /><b>Room</b><br />209  <input type="hidden" name="data[Report][area]" value="3" /></td>
        <td><input name="data[Report][tables3]" type="text" class="inputbox" size="3" value="0" id="ReportTables3" />           </td> 
        <td><input name="data[Report][chairs3" type="text" class="inputbox" size="3" value="0" id="ReportChairs3" />            </td> 
        <td><input name="data[Report][comments3]" type="text" size="20" value="" id="ReportComments3" />            </td>
        <td>
            <div class="submit"><input type="submit" value="Submit" /></div><br />
            <div id="loading3" style="display: none;">Saved</div>
            <div id="result3" style="display: none;"></div>
        </td>
    </tr>

    </tbody>
    </table>
</form>

--

<script type="text/javascript">
    $(document).ready(function() {
      $('.reply_form').submit(function() {
        $.ajax({
          type: 'POST',
          url: '/reports/addcounts/',
          data: $(this).serialize(),
          cache: false,       
          beforeSend: function() {
            $('#loading').show();
            $('#result').hide();
          },
         success: function(data) {
            if(data==1) {
              $('#loading').hide();
              $('#result').fadeIn('slow').html("ok");
              $('#result').addClass('true');
              $(this).slideUp(1000);
            }
            else {
              $('#loading').hide();
              $('#result').fadeIn('slow').html(data);
              $('#result').addClass('errors');
            }
          }    
        });

         return false;
      });
    })
    </script>
4

2 回答 2

0

我不肯定我理解这个问题，但您似乎想参考提交了哪些表单，并仅操纵那些#result 和#loading div？如果是这样...

在成功函数中，您检索使用 jQuery 启动事件的 DOM 元素，然后将其附加到每个 #loading 和 #result div。

    $(document).ready(function() {
       $('.reply_form').submit(function(event) {
         currentId = event.delegateTarget.id;          
         $.ajax({
             type: 'POST',
             url: 'form.php',
             data: $(this).serialize(),
             cache: false,       
              beforeSend: function() {
                $('#loading'+currentId).show();
                $('#result'+currentId).hide();
            },
         success: function(data) {
              if(data==1) {
                  $('#loading'+currentId).hide();
                  $('#result'+currentId).fadeIn('slow').html("ok");
                  $('#result'+currentId).addClass('true');
                  $(this).slideUp(1000);
               }
             else {
                $('#loading'+currentId).hide();
                $('#result'+currentId).fadeIn('slow').html(data);
                $('#result'+currentId).addClass('errors');
             }  
      }    
    });

     return false;
  });

}):

假设您在表单的 id 与其结果和加载 div 之间存在关系，这应该可以工作。

于 2013-05-08T01:35:40.930 回答
0

口号，这种东西你不需要单独的表格，你应该在大多数情况下使用类而不是 id。

诀窍是将单击处理程序附加到提交按钮，然后在处理程序中相对于this（单击的按钮）找到所有关联的元素。这样，就不需要 id。

HTML 将是这样的：

<table id="reply_table">

<tbody>
<tr>
<td><b>Room</b><br />207</td>
<td>
    <input type="hidden" name="_method" value="PUT" />
    <input type="hidden" name="data[_Token][key]" value="977ceaa782a964fe9a3f5a1cb3d7d422e8470af9" id="Token108437306" />
    <input type="hidden" name="data[Report][id]" value="184463" />
    <input type="hidden" name="data[Report][area]" value="1" />

    <input name="data[Report][tables1]" type="text" class="inputbox" size="3" value="0" id="ReportTables1" />
</td> 
<td><input name="data[Report][chairs1]" type="text" class="inputbox" size="3" value="0" id="ReportChairs1" /></td>
<td><input name="data[Report][comments1]" type="text" size="20" value="" id="ReportComments1" /></td>
<td>
    <div><button class="submit">Submit</button></div>
    <div class="loading" style="display: none;">Saved</div>
    <div class="result" style="display: none;"></div>
</td>
</tr>
</tbody>

</table>

而 javascript 将是这样的：

$(function() {
    $('#reply_table').on('click', "button.submit", function() {
        var $tbody = $(this).closest("tbody");//find relevant tbody relative to the clicked button
        var $loading = $tbody.find('.loading').show();//find the relevant "loading" div and show it.
        var $result = $tbody.find('.result').hide();//find the relevant "result" div and hide it.

        $.ajax({
            type: 'POST',
            url: '/reports/addcounts/',
            data: $tbody.find("input").serialize(),
            cache: false,
            success: function(data) {
                $loading.hide();
                if(data==1) {
                    $result.html('ok').addClass('true').fadeIn('slow', function() {
                        $tbody.slideUp(1000);
                    });
                }
                else {
                    $result.html(data).addClass('errors').fadeIn('slow');
                }
            }
        });
        return false;
    });
});

未经测试

我不确定tbody元素是否会在所有浏览器中滑动。你可能需要妥协，.hide()而不是。

于 2013-05-08T02:45:50.377 回答