1

I am using Gravity Forms and would like to change their submit button text to read "processing..." after onclick. Gravity Forms has told me to use some custom javascript in the heading.php file to make this happen. The following script was given (http://stackoverflow.com/questions/1071012/using-jquery-to-change-input-button-text-back-after-a-few-seconds) this link to point me the right direction but I am still learning and need some help! Can someone please break this code down for me a bit? 

$("form.stock").submit(function()
{
    var $form = $(this);
    $.post( $form.attr('action'), { id: '123', stock: '1' } );
    var $submit = $form.find(":submit").attr('value','Saved!');
    window.setTimeout(function()
    {
        $submit.attr('value','Update') 
    }, 2000);
    return false;
});

What is form.stock referring to? And- id: '123' stock: '1' referring to?

And lastly, what does (this) do? - var $form = $(this);

I would appreciate your kindness - I know these are some basic questions that I should know!

Improve this question

2 Answers 2

Reset to default
1

What is form.stock referring to

A <form> element with class=stock as a jQuery selector. If you have:

<form class="stock">

In your HTML, then $("form.stock") selects it. .submit binds a function to the "submit" event for it.

And- id: '123' stock: '1'

This is to create an HTTP POST request with this data. In GET form, it would be a URL like this:

/action/?id=123&stock=1

The example probably just picked the values 123 and 1 arbitrarily to illustrate the example. You should probably get those values from the form somehow.

$form = $(this)

This simply assigns the result of the method call $(this) to a variable.

$ is actually a jQuery method. Essentially, $(this) calls a function on the argument this. Calling functions is relatively expensive and eats up resources. However, using a variable does not, so much. It's more efficient to do this:

$form = $(this);
$form.one();
$form.two();
$form.three();

Instead of this:

$(this).one();
$(this).two();
$(this).three();

The former only has 4 method calls, but the latter has 6.

Don't be confused: $form is just a variable name. It could be called aform, form, x, or any other valid name.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is code I have implemented in header.php: '<script language="javascript" type="text/javascript"> $("form.buttontext") // <-- this finds forms with class=buttontext .submit(function() { // <-- binds submit handler to them var $form = $(this); //<-- this caches current form that's triggered event handler $.post($form.attr('action'), function(){ var $submit = $form.find(":submit").attr('value', 'Processing'); window.setTimeout(function() { $submit.attr('value', 'Register Now') }, 5000); }); return false; });​ </script>'
The first time or 2 viewing page, the form button took on the css characteristics of the class "buttontext" for a first few seconds of page view and then changed back to original css. So something happened! But, no text change, however. And nothing happens after I click on the submit button, it was only when first visited the page. Now it's not doing it at all. Do I need to rid of the class in the stylesheet? Can/should I use form ID instead? If I can tie the submit function to a class - shouldn't I be able to apply an "onclick" function simply through css?
@user1877181 it sounds like you should accept an answer here and create a separate question.
Will do. Thank you for the assistance so far!
1 
$("form.stock") // <-- this finds forms with class=stock
    .submit(function() { // <-- binds submit handler to them
    var $form = $(this);  //<-- this caches current form that's triggered event handler
       // ajax post to the current form's action attribute
       $.post($form.attr('action'), {
           id: '123',  // <-- these are the data passed back to your server
           stock: '1'
       });
       //  find's submit button and changes value to 'Saved!'
       var $submit = $form.find(":submit").attr('value', 'Saved!');
       window.setTimeout(function() {
           // after 2000ms update value back to 'Update'
           $submit.attr('value', 'Update')
       }, 2000);          
       return false; // <-- stops any event bubbling and default action of form submit
});​

Though you should really be doing the text change inside of success function.. That way only of the post was successful, it will change.

$("form.stock").submit(function() { 
    var $form = $(this);            
       $.post($form.attr('action'), function(){ 
          // these are now in the success function.. so these will only occur if ajax is successful
          var $submit = $form.find(":submit").attr('value', 'Saved!');
          window.setTimeout(function() {
              // after 2000ms update value back to 'Update'
              $submit.attr('value', 'Update')
          }, 2000);
       });        
    return false; // <-- stops any event bubbling and default action of form submit
});​
Improve this answer

2 Comments

Great. Thank you! If I do not need to pass any data - just want the text to change in the submit button - can I rid of the '$.post($form.attr('action'), { id: '123', // <-- these are the data passed back to your server stock: '1' }); ' all together? Do I need those 3 lines?
@user1877181, if you don't want to pass any data.. you can just send an empty {} or remove it.. so $.post($form.attr('action')).. or $.post($form.attr('action'),{});.. though you should be doing those text changes inside the success function

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.