javascript如何区分一个窗体的另一个按钮？

这里的index.php的代码：javascript如何区分一个窗体的另一个按钮？

<html> 
<head> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
    <table> 
     <tr> 
      <td>Name</td> 
      <td>Band</td> 
      <td>Indx</td> 
      <td>Send</td> 
     </tr> 
     <tr> 
      <td>Bruce</td> 
      <td>Iron Maiden</td> 
      <td>95</td> 
      <td> 
       <form action="" class="form" method="POST"> 
        <input class="name" name="name" type="hidden" value="Bruce"> 
        <input class="band" name="band" type="hidden" value="Iron Maiden"> 
        <input class="indx" name="indx" type="hidden" value="95"> 
        <button class ="send" type="submit">SEND<button> 
       </form> 
      </td> 
     </tr> 
     <tr> 
      <td>James</td> 
      <td>Metallica</td> 
      <td>90</td> 
      <td> 
       <form action="" class="form" method="POST"> 
        <input class="name" name="name" type="hidden" value="James"> 
        <input class="band" name="band" type="hidden" value="Metallica"> 
        <input class="indx" name="indx" type="hidden" value="90"> 
        <button class ="send" type="submit">SEND<button> 
       </form> 
      </td> 
     </tr> 
    </table> 

    <div class="result"></div> 

    <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    <script> 

     $(function(){ 
      $('.form').submit(function(){ 
       $.ajax({ 
        data: $('.form').serialize(), 
        type: 'POST', 
        url: 'remote.php', 
        success: function(data){ 
         $('.result').html(data); 
        } 
       }); 
       return false; 
      }); 
     }); 
    </script> 
</body> 
</html>

这里remote.php

<?php 

    $name = $_POST['name']; 
    $band = $_POST['band']; 
    $indx = $_POST['indx']; 
    $up = $indx * 2; 

    $output = ' 
     <div id="rock-modal" class="modal fade in" role="dialog" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
      <div class="modal-dialog modal-lg"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
         <h4 class="modal-title" id="myModalLabel"> 
          <i class="fa fa-files-o"></i> 
          Rock Modal 
         </h4> 
        </div> 
        <div class="modal-body"> 
         The band '.$band.' has an up index of '.$up.'!!! 
        </div><!-- /modal-body --> 
       </div><!-- /modal-content --> 
      </div><!-- /modal-dialog modal-lg --> 
     </div><!-- /modal fade in--> 
     <script type="text/javascript"> 
      $("#rock-modal").modal("show"); 
     </script>'; 
    echo $output;

当我只有一个行的表（例如：铁娘子）我收到的代码具有相应信息的引导模式。当我在表格中有多行时（例如Iron Maiden和Metallica），当我点击第一行的按钮时，我只收到最后一行（本例中为Metallica）的结果。如果我插入另一行并单击第一个或第二个按钮，我会始终收到最后一行的信息。

我该如何说javascript到底是什么按钮？

来源

2014-12-05 Aloysia de Argenteuil

确保两个按钮都有唯一的名称或ID ... – RichardBernards 2014-12-05 12:03:55

为每个按钮使用唯一的ID – 2014-12-05 12:05:26

您可以为每个按钮$（“。send1”）分配类，click（function（）{// do button这里的行动}）; – Dibish 2014-12-05 12:15:16

您遇到的问题来自多个窗体，然后最终序列化错误。

您将提交事件绑定到任何包含.form的事件，从而能够捕获任何形式的提交事件。我指的是该生产线是这一个：

$('.form').submit(function(){

然而，问题在于你通过AJAX实际发送，而罪魁祸首是以下行：

data: $('.form').serialize(),

当你有一种形式，该行工作正常。如果您有多个表单，那么jQuery如何知道要序列化的表单？ ~~根据我的假设，它会选择最后一个表格，因为选择器 $('.form');将选择所有表格。~~ 它会序列化所有表单，但是当值到达PHP脚本时 - 传播的值将是最后的表单的值，因为字段名称在所有表单中都是相同的。

所以你必须做的是修改你绑定提交事件的函数。你必须告诉那个函数“请序列化实际提交的表单”。

$(function(){ 
     $('.form').submit(function(e){ 
      $.ajax({ 
       data: $(e.currentTarget).serialize(), 
       type: 'POST', 
       url: 'remote.php', 
       success: function(data){ 
        $('.result').html(data); 
       } 
      }); 
      return false; 
     }); 
    });

注意在回调函数的变化和data行：你可以通过做。这意味着你不必告诉JavaScript哪个按钮被按下了。你需要做的是序列化提交的表单。

来源

2014-12-05 12:15:11

-1

为窗体或按钮使用唯一的ID。然后调用他们：

$('#form-one button') // if you set ID to form

或

$('#my-button-id') // if you set id to button.

ID必须是唯一遵循HTML规则和jQuery的工作

来源

2014-12-05 12:10:38 Forien

-1

用于创建，所以你可以参考它的每个按钮，创建独特的类值在jQuery中。在你的例子中，两者都是用'send'定义的。您可以为两个按钮添加类attibute内的另一个类值，并设置像一个独特的价值：

<button class ="send button_1" type="submit">SEND<button> 

<button class ="send button_2" type="submit">SEND<button>

的方法，另外，你可以用唯一的ID将jQuery采取具体行动。

来源

2014-12-05 12:11:57 bcesars

javascript如何区分一个窗体的另一个按钮？

回答

相关问题