电子邮件表单交互

发布于 2024-10-28 03:32:59 字数 989 浏览 1 评论 0原文

我是一名网络开发学生，我需要一些帮助。我有下面的代码；如何使其仅在提交表单而不是单击文本字段时才起作用。我还希望它能够获取 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 -->

原文

I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

合约呢 2024-11-04 03:32:59

这有点粗糙，但应该能让你继续下去

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

This is a bit rough and ready but should get you going

$(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);
        });

  }); 

});

and I changed the html a bit:

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

三人与歌 2024-11-04 03:32:59

这里有几个问题：

通过使用 $('.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
});

提交处理程序更好，因为它们捕获提交表单的其他方式，例如点击 在文本输入中输入。

另外，在隐藏的

中，您以纯文本形式放入 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，因此这实际上没有任何意义。

There are several things at issue here:

By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:

// 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
});

or, preferably, a submit handler on the form:

// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() { 
    // do stuff
    return false; // as above
});

Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.

Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:

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

Then you can stick the name into the placeholder:

var name = $("#name").val();
$('#nameholder').html(name);

I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.

回复收藏 0 原文

~没有更多了~

关于作者

吃兔兔

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

电子邮件表单交互

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

电子邮件表单交互

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。