Показать сообщение спасибо на форме отправить

Question

У меня есть контактная форма, и когда я отправляю форму, я хочу скрыть контактную форму и показать сообщение благодарности в этом месте.

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

Answer 1

Попробуй это. Используйте запрос 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")
                }
            });

        });

Answer 2

Вот вещи:

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

Надеюсь, это поможет.