Ajax Question

Display "Thank you" message in html on click of button using AJAX

I'm trying to complete an email submission form.

I want to show a thank you message when form is submitted (when submit button is clicked)

This is my current code in index.html fie

I don't want window alert like this

window.alert

I want to hide email box and subscribe button by displaying "Thank you" message.



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





inside of tag like this

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

Answer

Add a new div with a thank you message and delete/hide the form. Simplest example:

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