时间戳

首页 > 解决方案 > 在提交表单时显示感谢信息

ajax - 在提交表单时显示感谢信息

问题描述

我有一个联系表格，当我提交表格时，我想隐藏联系表格并在那个地方显示感谢信息。

<form class="contact-us" method="post" action="/../contact" name="form_contact" onSubmit="alert('Thank you for your Contacting us');">

    <input type="hidden" name="formID_contact" value="609" />

    <div style="padding:10px;" class="bg-boxshadow ">
        <!-- Text input-->
        <div class="row">
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
            <div class="form-group">
                <label class="sr-only control-label" for="name">name<span class=" "> </span></label>
                <input id="name" name="name" type="text" maxlength="30" placeholder="Name" class="form-control input-md" required>
            </div>
        </div>

        <!-- Select Basic -->
       <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="form-group">
                <label class="control-label" for="message"> </label>
                <textarea class="form-control" id="message" rows="7" name="message" maxlength="200" placeholder="Message" required></textarea>
            </div>
        </div>
        <!-- Button -->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

标签： ajaxhtml

解决方案

以下是事情：

    onSubmit="alert('Thank you for your Contacting us');

只是要提醒一条消息。这不是你想要的。

您可以添加带有感谢消息的新 div 并删除/隐藏表单。最简单的例子：

  $.ajax({
      type: "POST",
      url: "Your Post URL",
      success: function(result){
      $('#your-div').html('<div>Thank you!</div>');
    },
    error: function (error) {
      alert("There is a problem");
    }
  });

希望这可以帮助。

推荐阅读