電子郵件形式的交互性

我是一名網絡開發學生，我需要一些幫助。我有下面的代碼;只有在提交表單並且沒有單擊文本字段時，如何才能使其工作。我也希望它能夠在.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 -->

來源

2011-03-30 Sleek Geek

現在的代碼是存在的。 Dutchie感謝提醒我。 – 2011-03-30 20:53:03

這是一個有點粗糙和準備好，但應該讓你去

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

來源

2011-03-30 21:29:44

感謝尼克，它工作。我也會嘗試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在這裏沒有定義，所以這沒有任何意義。

來源

2011-03-30 21:24:20 nrabinowitz

電子郵件形式的交互性

回答

相關問題