There's an email subscription form in a web page,
When someone enters his email and clicks on submit button,
We don't want this page to be redirected to form action url,
We just want it's submit button text value to be converted to another text,
something like "Thank You!".
How is it possible? Should I go through ajax? or javascript?
Here's the form:

<form class="ml-block-form" action="//app.mailerlite/webforms/submit/myownID" data-code="myownID" method="POST" target="_blank">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
    <input class="newsletter-email" type="email" name="fields[email]" placeholder="Email*"/>
</div>
<input type="hidden" name="ml-submit" value="1" />
<p>
    <input class="newsletter-submit" type="submit" value="Get Updates!"/>
</p>

There's an email subscription form in a web page,
When someone enters his email and clicks on submit button,
We don't want this page to be redirected to form action url,
We just want it's submit button text value to be converted to another text,
something like "Thank You!".
How is it possible? Should I go through ajax? or javascript?
Here's the form:

<form class="ml-block-form" action="//app.mailerlite./webforms/submit/myownID" data-code="myownID" method="POST" target="_blank">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
    <input class="newsletter-email" type="email" name="fields[email]" placeholder="Email*"/>
</div>
<input type="hidden" name="ml-submit" value="1" />
<p>
    <input class="newsletter-submit" type="submit" value="Get Updates!"/>
</p>

• javascript
• jquery
• html
• ajax
• forms

Share Improve this question Follow asked Jan 17, 2017 at 8:17 M. SafariM. Safari 31399 silver badges2323 bronze badges 4

• 4 remove target="_blank" – guradio Commented Jan 17, 2017 at 8:18
• Change the input type from submit to button – Zorken17 Commented Jan 17, 2017 at 8:20
• And you don't want to post any kind of data? Just changing text? Or do you want to submit all data to the server without reloading and after a successful submit you want to change the text and maybe disable the form? – axel.michel Commented Jan 17, 2017 at 8:29
• @axel.michel exactly! I want to change the text after a successful submit. – M. Safari Commented Jan 17, 2017 at 8:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

For starters remove target="_blank" from your form tag.

Then, within your jQuery, do something along the lines of this:

$(".ml-block-form").submit(function(){
    var vals = $(this).serialize();

    $.ajax({
        url: "postpage.php",  
        method: "POST",
        data: vals,
        success: function(data) {
            $("#formsubmit").val("Thank you!");
        }
    });

    return false; // prevent from submit
});

I've altered your HTML as well, as it was originally very messy. You can of course add the other elements back if you need:

<form class="ml-block-form" action="" data-code="myownID" method="post">
    <input id="mainval" type="email" name="fields[email]" placeholder="Email*">
    <input id="hiddenval" name="ml-submit" value="1" />
    <input id="formsubmit" type="submit" value="Get Updates!"/>
</form>

You can simply remove target="blank" because blank value opens the linked document in a new window.

Instead of

<input class="newsletter-submit" type="submit" value="Get Updates!"/>

use

<button id="newsletter-submit" value="Get Updates!"/>

(note that I changed class for id)

And then use jQuery to handle the click on the button:

$("#newsletter-submit").click(function () {
    $(this).prop("value", "Thank You!");
    // do something else with the input values e.g. send them via ajax to a server script
});