电子邮件表单交互
Posted
技术标签:
【中文标题】电子邮件表单交互【英文标题】：E-mail form interactivity 【发布时间】：2011-07-26 10:04:13 【问题描述】：我是一名网络开发专业的学生，我需要一些帮助。我有下面的代码；如何使其仅在提交表单而不是单击文本字段时才起作用。我还希望它在.thanks Div 中获取并插入textField 的值。请帮我学习。
<script type="text/javascript">
$(document).ready(function()
$(".quote").click(function()
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
);
);
</script>
<style type="text/css">
<!--
.thanks
display: none;
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
【问题讨论】：
代码现在在那里。 Dutchie 谢谢你提醒我。 【参考方案1】：这有点粗糙和准备好了，但应该能让你开始
$(document).ready(function()
$("#submitbutton").click(function()
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function ()
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
);
);
);
我稍微改变了html：
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
【讨论】：
谢谢尼克，它成功了。我也会尝试 Nrabinowitz 的想法。我会让其他人知道它是否也有效。【参考方案2】：这里有几个问题：
通过使用$('.quote').click()，您正在为<form> 中包含的任何元素上的any 点击事件设置一个处理程序。如果您只想捕获提交事件，您应该在提交按钮上设置一个点击处理程序：
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function()
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
);
或者，最好是表单上的提交处理程序：
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function()
// do stuff
return false; // as above
);
提交处理程序更好，因为它们可以捕获其他提交表单的方式，例如在文本输入中点击Enter。
另外，在您隐藏的<div> 中，您将 Javascript 放入纯文本中，而不是在 <script> 标记中，所以它只会在屏幕上可见。您可能需要一个可以引用的占位符元素：
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
然后您可以将名称粘贴到占位符中：
var name = $("#name").val();
$('#nameholder').html(name);
我不知道你想用 $("input").val(text); 行做什么 - text 没有在这里定义，所以这没有任何意义。
【讨论】：
以上是关于电子邮件表单交互的主要内容，如果未能解决你的问题，请参考以下文章