0

我正在学习 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>

谢谢

4

1 回答 1

0

嗯，第一件事是第一 - 你将在页面上使用相同的 id 无处可去。将 id 更改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/

于 2013-09-23T15:35:50.843 回答