Button text after form submission | Community
Skip to main content
A
Anonymous
April 14, 2014
Solved

Button text after form submission

  • April 14, 2014
  • 5 replies
  • 2011 views
Hi There, 

I'm looking to have multiple forms on one page and am looking for specifics on how to change the button text after someone submitted a form. After the customer fills out the form, they will stay on the same page, but I want the button text to change (and stay changed from Submit) so they can see their submission has gone through.

For example, customer fills out Form A, clicks submit and then button changes to Thank You (and stays on thank you, doesn't revert back to "Submit"). Then customer can fill out Form B with the same result (click on submit, button changes to Thank You and stays). 

I don't want customers to have the fill out (or think they can) fill out the form multiple times.

Any suggestions?

Thanks!
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
Hi Becky,

Below is a solution we are using to change the text value of form buttons that have been previously submitted.

It works by creating cookies on submit button click. Then when the page reloads it checks for the cookie. If there is a cookie present it will make the changes.

Instructions

insert the following into a new html page element


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- include jquery if needed  -->

 
<script>
 
 
$(document).ready(function(){
setTimeout(function(){
 
$('.mktoButton').click(function(e){
e.preventDefault();
var myErrors = $(this).closest('form').find('.mktoInvalid').length;
if(myErrors == 0){
var formID = $(this).closest('form').attr('id');
createCookie(formID ,'submit');
console.log(formID);
$(this).unbind('click').click();
}
});
 
$('form[id]').each(function(){
var formID = $(this).attr('id');
var cookieFormId = getCookie(formID);
console.log(cookieFormId);
if(cookieFormId == 'submit'){
$(this).find('button').text('Thank You');
$(this).find('button').attr('disabled','disabled');
}
});
 
 
},3000);
 
});
 
var createCookie = function(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
 
function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}
 
</script>

5 replies

Matt_Stone2
Matt_Stone2
Level 9
April 14, 2014
What you might want to consider is using an iFrame approach for each form. This way the form wouldn't appear again after submitting it once and you also wouldn't have to worry about the entire page reloading each time they submit.
A
Anonymous
April 14, 2014
I'm sorry, I don't quite understand what you mean by iFrame. Could you explain with a little more detail? (We're still relatively new to Marketo...)

If you'd like, feel free to email me directly at becky.juckem@gmfcu.com.

Thanks!
A
Anonymous
Accepted solution
April 15, 2014
Hi Becky,

Below is a solution we are using to change the text value of form buttons that have been previously submitted.

It works by creating cookies on submit button click. Then when the page reloads it checks for the cookie. If there is a cookie present it will make the changes.

Instructions

insert the following into a new html page element


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- include jquery if needed  -->

 
<script>
 
 
$(document).ready(function(){
setTimeout(function(){
 
$('.mktoButton').click(function(e){
e.preventDefault();
var myErrors = $(this).closest('form').find('.mktoInvalid').length;
if(myErrors == 0){
var formID = $(this).closest('form').attr('id');
createCookie(formID ,'submit');
console.log(formID);
$(this).unbind('click').click();
}
});
 
$('form[id]').each(function(){
var formID = $(this).attr('id');
var cookieFormId = getCookie(formID);
console.log(cookieFormId);
if(cookieFormId == 'submit'){
$(this).find('button').text('Thank You');
$(this).find('button').attr('disabled','disabled');
}
});
 
 
},3000);
 
});
 
var createCookie = function(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
 
function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}
 
</script>

A
Anonymous
April 15, 2014
This worked! Thank you so much for your suggestion!
A
Anonymous
April 16, 2014
Hi Becky,

I have updated the code to allow for form validations before creating the cookie.

The change is below.

This is reflected in my first post.

$('.mktoButton').click(function(e){
e.preventDefault();
var myErrors = $(this).closest('form').find('.mktoInvalid').length;
if(myErrors == 0){
var formID = $(this).closest('form').attr('id');
createCookie(formID ,'submit');
console.log(formID);
$(this).unbind('click').click();
}
});
 
 
Terms & ConditionsAccessibility statement

Loading footer...