jQuery ajax - 使用表单提交更改 jQuery 目标值答案

【问题标题】：jQuery ajax - change jQuery target value with form submitjQuery ajax - 使用表单提交更改 jQuery 目标值
【发布时间】：2014-05-31 15:55:33
【问题描述】：

我有一个简单的 jQuery 表单，使用来自 malsup (http://jquery.malsup.com/form/) 的 jQuery 表单插件和用于测试的 ajax（如下）。

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

在提交表单时，我需要将结果发布到特定的 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>

【问题讨论】：

是每个表单都有单独的 ajaxform 提交还是所有表单提交都由单个函数处理。在这里我只能看到一个表单。

标签： jquery ajax forms

【解决方案1】：

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

HTML：

<form id="htmlForm" action="inc/test_ajax5.lasso" method="post">
<input id="target" 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>

JS：

$(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'); 
        } 
    }); 
});

【讨论】：

这是有道理的——我还没有为成功回调设置任何东西。这是否意味着不能以类似的方式更改目标回调？
另外，我也遇到了同样的问题。是否可以以相同的方式更改“#htmlForm？似乎对于每个表单，这需要不同。当我使用#htmlForm作为表单ID转到“form2”时，表单作为内容发送 -类型“application / x-www-form-urlencoded”而不是“XMLHttpRequest”。它似乎完全忽略了jquery！如果我先选择第二种形式没关系，它会忽略除第一种之外的任何表单请求页面上的一个。如果我添加另一个 jQuery“块”并将 #htmlForm 更改为 #htmlForm2 它们都可以工作。
尝试对所有表单使用一个类 $(".htmlForm")。

【解决方案2】：

您可以将 class 分配给每个带有 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">

你可以在你的代码中使用它，如下所示：

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

【讨论】：