【问题标题】:Display "Thank you" message in html on click of button using AJAX使用 AJAX 单击按钮时在 html 中显示“谢谢”消息
【发布时间】:2017-04-05 05:33:24
【问题描述】:

我正在尝试填写电子邮件提交表单。

我想在提交表单时显示感谢信息(点击提交按钮时)

这是我当前在 index.html 文件中的代码

我不想要这样的窗口警报

我想通过显示“谢谢”消息来隐藏邮箱和订阅按钮。

function call_mailm() {

  $.ajax({
    url: "http://google.com/form/" + $("#name").val(),
    success: function(result) {
      alert("Mail sent successfully");

    },
    error: function(error) {
      alert("There is some problem with mail");
    }
  });
  return false;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Begin  Signup Form -->
<div id="mc_embed_signup">

  <form>

    <input type="text" id="name" name="email" class="required email" id="email" placeholder="Email Address" style="font-size:15pt;height:38px;width:350px;font- family:Century Gothic;">

    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" name="b_438e8df85b7f9df7fce94287a_013c74a5bc" tabindex="-1" value="">
    </div>
    <button onclick="return call_mailm()" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color: rgba(14,46,71,1);border: 1px solid #0E2E47;width:150px;height:37px;font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;font-size:24px;color:white;">Subscribe</button>
    <div id="mce-responses" class="clear">
      <div class="response" id="error" style="display:none"></div>
      <div class="response" id="success" style="display:none"></div>
    </div>
  </form>

</div>
<!--End mc_embed_signup-->

这样的标签内部

<div id="success">
Congrats! <br>
 Thank you for subscribing
 </div>

【问题讨论】:

  • $('#someElement').text('Thank you') ?
  • 不,我想在
    中显示消息
  • 然后显示在div中。你有没有尝试过任何东西?有很多介绍性的 jQuery 教程和示例展示了如何写入页面。

标签: html ajax forms message display


【解决方案1】:

添加带有感谢信息的新 div 并删除/隐藏表单。最简单的例子:

$.ajax({url: "http://google.com/form/"+$("#name").val(), 
    success: function(result){
      $('#mc_embed_signup').html('<div>Thank you!</div>');

    },
    error: function (error) {
      alert("There is some problem with mail");
    }
  });

【讨论】:

  • 如何向这个 ajax 代码添加简单的电子邮件验证,请帮助我是 ajax 新手,我在网络上没有找到任何有用的东西。
猜你喜欢
相关资源
最近更新 更多
热门标签