电子邮件形式的交互性
问题描述:
我是一名网络开发学生,我需要一些帮助。我有下面的代码;只有在提交表单并且没有单击文本字段时,如何才能使其工作。我也希望它能够在.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 -->
答
这是一个有点粗糙和准备好,但应该让你去
$(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 -->
+0
感谢尼克,它工作。我也会尝试Nrabinowitz的想法。我会让别人知道它是否也有效。 – 2011-03-31 15:27:17
答
有这里的问题几件事情:
使用$('.quote').click()
,你在设定的处理程序包含在<form>
中的任何元素上的任何 click事件。如果你想赶上只能提交的事件,您应该设定一个点击处理程序提交按钮:
// 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>
中,您以纯文本而不是<script>
标签显示Javascript,因此只会在屏幕上显示。你可能需要一个占位符元素,您可以参考:
<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
在这里没有定义,所以这没有任何意义。
现在的代码是存在的。 Dutchie感谢提醒我。 – 2011-03-30 20:53:03