Question

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

在我的页面上，我有多种形式。

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

我一直试图找出如何根据提交的表单更改结果的“目标”。我假设（我非常有限的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>

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

Answer 2

您可以将类分配给名称为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'); 
    } 
});

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

2 个答案: