jQueryAjax-使用表单提交更改jQuery目标值_Jquery_Ajax_Forms

jQueryAjax-使用表单提交更改jQuery目标值

jquery ajax forms

jQueryAjax-使用表单提交更改jQuery目标值,jquery,ajax,forms,Jquery,Ajax,Forms,我有一个简单的jQuery表单，它使用malsup（）和ajax中的jQuery表单插件进行测试（如下）在我的页面上，我有多个表单在提交表单时，我需要将结果发布到特定的div（我使用的是“Target”方法）我一直在试图找出如何根据提交的表单更改结果的“目标”。我假设（用我非常有限的jQuery知识），如果我在每个表单中添加了一个隐藏字段，我可以执行一个if语句（我发现了类似的搜索堆栈溢出，但无法让它在我的情况下工作）来告诉jQuery使用哪个目标，但不确定如何执行（我的任何尝试都没有成功

我有一个简单的jQuery表单，它使用malsup（）和ajax中的jQuery表单插件进行测试（如下）

在我的页面上，我有多个表单

在提交表单时，我需要将结果发布到特定的div（我使用的是“Target”方法）

我一直在试图找出如何根据提交的表单更改结果的“目标”。我假设（用我非常有限的jQuery知识），如果我在每个表单中添加了一个隐藏字段，我可以执行一个if语句（我发现了类似的搜索堆栈溢出，但无法让它在我的情况下工作）来告诉jQuery使用哪个目标，但不确定如何执行（我的任何尝试都没有成功！）

任何帮助都将不胜感激

<script type="text/javascript">
$(document).ready(function() { 
    $('#htmlForm').ajaxForm({ 
        target: '#info1', 
        success: function() { 
            $('#info1').fadeIn('slow'); 
        } 
    }); 
});
</script>
</head>
<body>
<form id="htmlForm" action="inc/test_ajax5.lasso" method="post">
<input type="hidden" name="formName" value="info1" />
    First name: <input type="text" name="fname" value="" /> <br />
    Last name: <input type="text" name="lname" value="" /> <br />
    Message: <input type="text" name="message" value="" /> 
    <input type="submit" value="Echo as HTML" /> 
</form>
<hr />
<div id="info1"></div>
<hr />
<div id="info2"></div>


$（文档）.ready（函数（）{
$（'#htmlForm'）.ajaxForm（{
目标：“#信息1”，
成功：函数（）{
$（'info1'）.fadeIn（'slow'）；
} 
}); 
});
名字：

姓氏：

信息：

您可以尝试处理成功回调上的所有内容，而不是使用目标

HTML:

您可以将类指定给每个名为div的表单，而不是隐藏字段，将其响应放在其中；如下图所示：

 <form id="htmlForm" action="inc/test_ajax5.lasso"  class="info1" method="post">

 <form id="htmlForm2" action="inc/test_ajax5.lasso"  class="info2" method="post">

是每个表单都有单独的ajaxform提交，还是所有表单提交都由单个函数处理。在这里，我只能看到一个表单。这很有意义——我还没有为成功回调设置任何东西。这是否意味着不能以类似的方式更改目标回调？此外，我也遇到过类似的情况。是否可以以相同的方式更改“#htmlForm？”似乎对于每个表单，这需要不同。当我使用#htmlForm作为表单ID转到“form2”时，表单将作为“application/x-www-form-urlencoded”的内容类型而不是“XMLHttpRequest”发送“。它似乎完全忽略了jquery！无论我是否首先选择第二个表单，它都会忽略除页面上第一个表单之外的所有表单请求。如果我添加另一个jQuery“block”并将#htmlForm更改为#htmlForm2，它们都可以工作。请尝试对所有表单$（“.htmlForm”）使用一个类。

$(document).ready(function() { 
    $('#htmlForm').ajaxForm({ 
        success: function(responseText, statusText, xhr, $form) { 
            var targetid = $form.find("#target").val(); //hidden field value

            $('#' + targetid).html(responseText).fadeIn('slow'); 
        } 
    }); 
});

 <form id="htmlForm" action="inc/test_ajax5.lasso"  class="info1" method="post">

 <form id="htmlForm2" action="inc/test_ajax5.lasso"  class="info2" method="post">

$('#htmlForm').ajaxForm({ 
    target: '#' + $('#htmlForm').attr('class'), 
    success: function() { 
        $('#' + $('#htmlForm').attr('class')).fadeIn('slow'); 
    } 
});