Javascript 电子邮件表单交互_Javascript_Jquery_Jquery Selectors_Jquery Validate

Javascript 电子邮件表单交互

javascript jquery

Javascript 电子邮件表单交互,javascript,jquery,jquery-selectors,jquery-validate,Javascript,Jquery,Jquery Selectors,Jquery Validate,我是一名网络开发专业的学生，我需要一些帮助。我有下面的代码；如何使其仅在提交表单而不是单击文本字段时工作。我也希望它能获取文本字段的值并将其插入到。谢谢。请帮助我学习 <script type="text/javascript"> $(document).ready(function(){ $(".quote").click(function(){ $(this).fadeOut(5000); $(".thanks").fadeIn(6000); va

我是一名网络开发专业的学生，我需要一些帮助。我有下面的代码；如何使其仅在提交表单而不是单击文本字段时工作。我也希望它能获取文本字段的值并将其插入到。谢谢。请帮助我学习

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


$（文档）.ready（函数（）{
$（“.quote”）。单击（函数（）{
美元（本）。淡出（5000）；
$（“.Thank”）.fadeIn（6000）；
var name=$（“#name”）.val（）；
$（“输入”）.val（文本）；
}); 
});




$（“#名称”）.val（）；感谢您与我们联系，我们会尽快回复您

这里有几个问题：

通过使用

$（'.quote'）.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

另外，在隐藏的

中，您将Javascript放入纯文本中，而不是

标记中，这样就可以在屏幕上看到。您可能需要可以引用的占位符元素：

<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>

我不知道你想用

$（“input”）.val（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 -->






感谢您与我们联系，我们会尽快回复您
代码现在就在那里。达奇，谢谢你提醒我，谢谢尼克，成功了。我还将尝试纳拉比诺维茨的想法。我会让其他人知道它是否也有效。
<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 -->