Question

任何人都可以帮助我获取输入的名称值 - 提交吗？

<form action="" method="POST" enctype="multipart/form-data" class="DeleteProductFromWinkelwagenForm">
  <td class="tdWinkelwagen">
     <input type="hidden" name="<?php echo $product->getProductId() ?>" value="<?php echo $product->getProductId() ?>"/>
     <input type="submit" name="<?php echo $product->getProductId() ?>" value="" title="deleteIcon" class="button"/>
   </td>  
</form>

另一个问题是这个代码生成了未知的次数，每次都有另一个名称（productId来自PHP）。在同一页面上多次生成。我还制作了一个显示动画的脚本。

我如何知道点击哪个提交并为每个提交显示个性化动画？

谢谢！

Answer 1

为了执行特定提交按钮的特定动画：

$(document).on('click', 'input[type="submit"]', function() {
   var that = $(this);
   var name = that.attr('name');
   if (name == 'a_name') {
      // perform animation for 'a_name'
   } else if (name == 'b_name') {
      // ...
   }
})

如果实际存在名称属性，则会被捕获。检查下面的代码（名称=测试）：

＆＃13;

$(document).on('click', 'input[type="submit"]', function(e) {
   var that = $(this);
   var name = that.attr('name');
  e.preventDefault();
  alert(name);
   if (name == 'test') {
      // perform animation for 'a_name'
   } else if (name == 'b_name') {
      // ...
   }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" enctype="multipart/form-data" class="DeleteProductFromWinkelwagenForm">
  <td class="tdWinkelwagen">
     <input type="hidden" name="test" value="<?php echo $product->getProductId() ?>"/>
     <input type="submit" name="test" value="submit" title="deleteIcon" class="button" />
   </td>  
</form>

＆＃13;

Answer 2

您可以使用：

var name = $('.DeleteProductFromWinkelwagenForm').find('[type="submit"]').attr('name');
console.log(name);

或在以下情况下：

var name = $(this).closest('.DeleteProductFromWinkelwagenForm').find('[type="submit"]').attr('name');
console.log(name);

我建议您最好与submit事件一起使用。查看下面的演示：

＆＃13;

$('form').submit(function(){
    var name = $(this).find('[type="submit"]').attr('name');
    alert(name);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" enctype="multipart/form-data" class="DeleteProductFromWinkelwagenForm">
  <td class="tdWinkelwagen">
    <input type="hidden" name="<?php echo $product->getProductId() ?>" value="<?php echo $product->getProductId() ?>" />
    <input type="submit" name="1" value="submit" title="deleteIcon" class="button" />
  </td>
</form>
<form action="" method="POST" enctype="multipart/form-data" class="DeleteProductFromWinkelwagenForm">
  <td class="tdWinkelwagen">
    <input type="hidden" name="<?php echo $product->getProductId() ?>" value="<?php echo $product->getProductId() ?>" />
    <input type="submit" name="2" value="submit" title="deleteIcon" class="button" />
  </td>
</form>
<form action="" method="POST" enctype="multipart/form-data" class="DeleteProductFromWinkelwagenForm">
  <td class="tdWinkelwagen">
    <input type="hidden" name="<?php echo $product->getProductId() ?>" value="<?php echo $product->getProductId() ?>" />
    <input type="submit" name="3" value="submit" title="deleteIcon" class="button" />
  </td>
</form>
<form action="" method="POST" enctype="multipart/form-data" class="DeleteProductFromWinkelwagenForm">
  <td class="tdWinkelwagen">
    <input type="hidden" name="<?php echo $product->getProductId() ?>" value="<?php echo $product->getProductId() ?>" />
    <input type="submit" name="4" value="submit" title="deleteIcon" class="button" />
  </td>
</form>

＆＃13;

Answer 3

$('.DeleteProductFromWinkelwagenForm').submit(function() {
    var hiddenValue = $(this).find("[type='hidden']").attr('value');
    var hiddenname  = $(this).find("[type='hidden']").attr('name');
    console.log(hiddenValue);
    console.log(hiddenname  );
});

编辑：这里作为JSFiddle有警报并返回false，因此表单不会导航 https://jsfiddle.net/5onmwLm6/1/

Answer 4

$(function(){
    $('form').on('click', 'input', function() {
        var $input = $(this);
        var attrName = $input.attr('name');
        if (typeof(attrName) !== 'undefined' && attrName !== '') {
            alert('you clicked on input with name ' + attrName);
        }
        else {
            alert('you clicked on input with udefined name');
        }
    });
});

子节点的JQuery Name属性

4 个答案: