Question

我有一个联系表，当我提交该表时，我想隐藏该联系表并在该位置显示谢谢消息。

_mm256_fmadd_pd

Answer 1

这是东西：

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

希望这会有所帮助。

Answer 2

尝试一下。使用ajax请求。将事件侦听器添加到表单的提交中。

HTML

<form class="contact-us" action="#" name="form_contact">

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

Js

 $("form.contact-us").submit(function(e) {
            e.preventDefault(); //dont refresh the page

            $.ajax({
                url: '/../contact', //endpoint
                method: 'POST', //post request
                data: $("form.contact-us").serialize(), //get data of form
                success: function(data) { //success function
                    $("form.contact-us").css('display', 'none'); //hide form
                    alert('Thank you for your Contacting us'); //show thank you message
                },
                error: function(data) { //error function
                    alert("Error")
                }
            });

        });

在表单提交中显示感谢消息

2 个答案: