电子邮件形式的交互性

我是一名网络开发学生，我需要一些帮助。我有下面的代码;只有在提交表单并且没有单击文本字段时，如何才能使其工作。我也希望它能够在.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

电子邮件形式的交互性

回答

相关问题