jQuery的阿贾克斯 - 改变jQuery的目标值的形式提交 [英] jquery ajax - change jQuery target value with form submit

查看:510
本文介绍了jQuery的阿贾克斯 - 改变jQuery的目标值的形式提交的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我用从malsup了jQuery插件形式简单jQuer形式( http://jquery.malsup.com /表格/ )和我使用的测试(如下图)阿贾克斯。 在我的网页,我有多种形式。 在提交表单,我需要(我使用的是目标的方法),结果被张贴到一个特定的分区。 我一直在试图找出如何我可以改变的目标的依据是什么形式提交的结果。我会假设(和我的非常有限的jQuery知识),如果我加入了一个隐藏字段,每个窗体,我可以做一个if语句(我发现了一些类似的搜索堆栈溢出,但不能得到它的工作我的情况)告诉jQuery的哪些目标使用,但我不知道如何去这样做(我尝试过了没有!)。 任何帮助将大大AP preciated。

 <脚本类型=文/ JavaScript的>
$(文件)。就绪(函数(){
    $('#的HtmlForm)。当作ajaxForm({
        目标:#INFO1,
        成功:函数(){
            $('#INFO1)淡入(慢)。
        }
    });
});
< / SCRIPT>
< /头>
<身体GT;
<形式ID =的HtmlForm行动=INC / test_ajax5.lasso的方法=邮报>
<输入类型=隐藏名称=窗体名称值=INFO1/>
    名字:<输入类型=文本名称=FNAME值=/> < BR />
    姓氏:其中;输入类型=文本名称=L-NAME值=/> < BR />
    消息:<输入类型=文本名称=消息值=/>
    <输入类型=提交值=回声为HTML/>
< /形式GT;
<小时/>
< D​​IV ID =INFO1>< / DIV>
<小时/>
< D​​IV ID =INFO2>< / DIV>
 

解决方案

您可以尝试在操控性上的成功回调的一切,而不是使用的目标。

HTML:

 <形式ID =的HtmlForm行动=INC / test_ajax5.lasso的方法=邮报>
<输入ID =目标类型=隐藏名称=窗体名称值=INFO1/>
    名字:<输入类型=文本名称=FNAME值=/> < BR />
    姓氏:其中;输入类型=文本名称=L-NAME值=/> < BR />
    消息:<输入类型=文本名称=消息值=/>
    <输入类型=提交值=回声为HTML/>
< /形式GT;
 

记者:

  $(文件)。就绪(函数(){
    $('#的HtmlForm)。当作ajaxForm({
        成功:函数(responseText的,状态文本,XHR,$形式){
            VAR目标ID = $ form.find(#目标)VAL()。 //隐藏字段值

            $('#'+目标ID)。html的(responseText的).fadeIn(慢);
        }
    });
});
 

I have a simple jQuer form using the jQuery form plugin from malsup ( http://jquery.malsup.com/form/ )and ajax that I'm using for testing (below). On my page, I have multiple forms. On submitting a form, I need the results to be posted to a specific div (I'm using the "Target" method). I've been trying to figure out how I can change the "Target" for the results based on what form was submitted. I would assume (with my VERY limited jQuery knowledge) that if I added a hidden field to each form, I could do an if statement (I found something similar searching stack overflow but couldn't get it to work for my situation) to tell jQuery which target to use but am not sure how to go about doing this (None of my attempts have worked!). Any help would be greatly appreciated.

  <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>

解决方案

You can try handling everything on the success callback instead of using target.

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

这篇关于jQuery的阿贾克斯 - 改变jQuery的目标值的形式提交的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆