如何使用一个 JavaScript 函数管理两个表单

How to manage two forms with one javascript function?

本文关键字：管理 两个 表单 函数 一个 何使用 JavaScript      更新时间：2023-09-26

我正在学习javascript，但我仍然没有读到可以回答我问题的书的章节，所以如果有人能把我放在正确的轨道上，我将不胜感激。

情况如下：

我正在使用jquery提交表单。但是我需要放置两种形式（相同类型但引用不同的对象），并且我想使用相同的 jquery 函数来提交我选择的表单。

这是 jquery 函数： 

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".submit").click(function(){
   var name = $("#student").val();
   var mark = $("#mark").val();
    var dataString = 'student='+ student + '&mark=' + mark;
   $.ajax
   ({
       type: "POST",
      url: "records.php",
      data: dataString,
      success: function()
      {
          $('.success').fadeIn(200).show();
         $('.error').fadeOut(200).hide();
      }
   });
   return false;
});
});
</script>

这些是我想传递给上述函数的表单，具体取决于我单击的表单。

<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Mandy" > 
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>  
</form> 
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Fred" > 
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>  
</form>

谢谢

好吧，第一件事是第一件事 - 页面上的相同ID将无处可去。将 id on student 和 mark 更改为类（不必是唯一的）：

<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Mandy" > 
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>  
</form> 
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Fred" > 
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>  
</form>

然后jQuery非常简单 - 找到最近的表单并查找学生并按班级评分（范围限定为表单）：

$(".submit").click(function(){
   var $form = $(this).closest('form');
   var student = $(".student", $form).val();
   var mark = $(".mark", $form).val();
    var dataString = 'student='+ student + '&mark=' + mark;
   $.ajax
   ({
       type: "POST",
      url: "records.php",
      data: dataString,
      success: function()
      {
          $('.success').fadeIn(200).show();
         $('.error').fadeOut(200).hide();
      }
   });
   return false;
});

现场示例：http://jsfiddle.net/6Lc8R/

相关文章：