Question

您构建的网站有多个我希望使用AJAX处理的表单，每个请求都会转到一个单独的PHP页面并返回一个字符串。

HTML

<form name="addUserModule" id="addUserModule" action=""  method="POST">
<input type="checkbox" name="moduleToADD[]" value="1">
<input type="submit" value="Save" id="addUserModuleSubmit">

<form action="" method ="post" id="addNewModule" name="addNewModule">
<input type="text" name="newModule"> 
<input type="submit" value="Add Module" id="addNewModuleSubmit">

Jquery的

$('#addUserModule').submit(function(e){
 e.preventDefault(); //Prevent the normal submission action
 var form = this;
  $.ajax({
url:'addUserModules.php',
data:$(form).serialize(),
type:'POST',
success: function(msg) {
        displayNotification(msg);
    }
});   
});

$('#addNewModule').submit(function(e){
 e.preventDefault(); //Prevent the normal submission action
 var form = this;
  $.ajax({
url:'addNewModule.php',
data:$(form).serialize(),
type:'POST',
success: function(msg) {
        displayNotification(msg);
    }
});   
});

第一种形式可以正常工作，但第二种形式运行的功能与第一种形式相同。我使用HTML id来确定差异。

Answer 1

在您的HTML代码中，您尚未关闭form，因此行为就像那样。

<form name="addUserModule" id="addUserModule" action=""  method="POST">
<input type="checkbox" name="moduleToADD[]" value="1">
<input type="submit" value="Save" id="addUserModuleSubmit">
</form>
<form action="" method ="post" id="addNewModule" name="addNewModule">
<input type="text" name="newModule"> 
<input type="submit" value="Add Module" id="addNewModuleSubmit">
</form>

现在它可以正常工作。

检查这个小提琴JSFiddle

使用Jquery将多个表单发送到不同的PHP页面

1 个答案: