是否可以使用多个表单来使用一个ajax post函数

时间:2010-05-14 16:02:48

标签: jquery

嘿伙计我有一个系统,每个朋友都有一个表单,我曾经为每个表单都有一个ajax post函数,但我想保存代码,并想知道是否有可能获得多个表单只使用一个帖子功能。如果有人对如何实现这一点有任何建议,我将不胜感激。例如

<div id="message">
     <form id='submit' class='message-form' method='POST' > 
      <input type='hidden' id='to' value='friend1' maxlength='255' >   
      Subject<br><input type='text'  id='subject' maxlength='50'><br>
       Message<br><textarea id='message2' cols='50' rows='15'></textarea>
       <input type='submit' id='submitmessage' class='responsebutton' value='Send'> 
    </form>
</div>


$(document).ready(function(){
$(".message-form").submit(function() {
 $("#submitmessage").attr({ disabled:true, value:\"Sending...\" });

var to    = $('#to').attr('value');
var subject    = $('#subject').attr('value');
var message    = $('#message2').attr('value');

$.ajax({
type: "POST",
url: "messageprocess.php",
data: 'to='+ to + '&subject=' + subject + '&message=' + message,
success: function(response) {
if(response == "OK") {
$('.message-form').html("<div id='message'></div>");
$('#message').html("<h2>Email has been sent!</h2>")
        .append("<p>Please wait...</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append(\"<img id='checkmark' src='images/check.png' />\");
        });

1 个答案:

答案 0 :(得分:1)

轻松完成,例如:

<div class="message">
     <form class='message-form' method='POST' > 
      <input type='hidden' class='to' value='friend1' maxlength='255' >   
      Subject<br><input type='text'  class='subject' maxlength='50'><br>
      Message<br><textarea class='message' cols='50' rows='15'></textarea>
      <div class="result"></div>
    </form>
     <form class='message-form' method='POST' > 
      <input type='hidden' class='to' value='friend2' maxlength='255' >   
      Subject<br><input type='text'  class='subject' maxlength='50'><br>
      Message<br><textarea class='message' cols='50' rows='15'></textarea>
     <div class="result"></div>
     </form>
    <div class="result"></div>
    <button>Send</button>
</div>

$("button").click(function() {
    $("form.message-form").each(function() {
        var to = $(this).find(".to").val();
        var subject = $(this).find(".subject").val();
        var message = $(this).find(".message").val();
        doPost(to, subject, message);
    });
    return false;
});

function doPost(to, subject, message ) {
    $.ajax({
        type: "POST",
        url: "messageprocess.php",
        data: 'to='+ to + '&subject=' + subject + '&message=' + message,
        success: function(response) {
            if(response == "OK") {
                    $(this).find(".result").append("<img class='checkmark' src='images/check.png' />");
            }    
        }
    });
}​

确保您的消息div,表单和表单元素具有唯一ID(如果不是必需,则为无)。你最好给他们一个类标识符,如上例所示。您还需要调整doPost的行为,以便它根据您的新标记结构正确地处理元素。以上示例尚未经过测试 - 我的目的是让您了解需要发生什么,而不是提供完整的解决方案。