时间戳

首页 > 解决方案 > 多个提交按钮仅首先初始化 javascript

javascript - 多个提交按钮仅首先初始化 javascript

问题描述

我在表格的每一行中重复提交按钮，如下所示。当点击提交按钮时，Javascript 初始化并且 alert() 的响应。问题只是第一个按钮按预期工作，后续按钮重定向到 foobar.php。

提交按钮：

<form name="savefilenote" id="savefilenote" method="post" action="forbidden-savefilenote.php?notetype=2">Note: <input id="filenote" name="filenote" type="text" value="'.$filenote.'"> <input id="filename" name="filename" type="hidden" value="'.$filename.'"> <input type="submit" value="Save"></form>

Javascript：

<script>
$(function(){
    $('.savefilenote').on('submit', function(e){

        // prevent native form submission here
        e.preventDefault();

        // now do whatever you want here
        $.ajax({
            type: $(this).attr('method'), // <-- get method of form
            url: $(this).attr('action'), // <-- get action of form
            data: $(this).serialize(), // <-- serialize
            beforeSend: function(){
                $('#result').html('');
            },
            success: function(data){
                $('#result').html(data);

      if(data === "0") {
alert("foo");
      }

      if(data === "1") {
alert("bar");
      }    
            }
        });
    });
});
</script>

标签： javascripthtml

解决方案

使用类而不是 id。

$("#savefilenote")只能找到按钮的一个实例，因为 ID 适用于特定元素。如果您将其更改为$(".savefilenote")并将相同的类应用于所有按钮，它应该可以工作。

推荐阅读