[英]E-mail form interactivity
我是一名網絡開發專業的學生,我需要一些幫助。 我有下面的代碼; 我如何使其僅在提交表單而不單擊文本字段時起作用。 我也希望它獲取並將textField的值插入.thanks Div中。 請幫我學習。
<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 -->
這里有幾個問題:
通過使用$('.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);
行做什么$("input").val(text);
-這里沒有定義text
,所以這實際上沒有任何意義。
這有點粗糙並且已經准備好,但是應該可以幫助您
$(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 -->
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.