Title: use jquery post onsubmit function
Last modified: August 21, 2016

---

# use jquery post onsubmit function

 *  Resolved [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/)
 * Hi, I would like to post data to PHP via a jquery post after clicking a button
   using the onsubmit function:
 *     ```
       <script>
       function Do () {
         alert("Before");
         jQuery(document).ready(function($) {
           $.post("/code.php", {"arg1": "1", "arg2": "2"}, function(response) {
             alert('Got this from the server: ' + response);
           });
         });
         alert("After");
       }
       </script>
       <form name="Form1" action="" onsubmit="Do()">
       <input type="submit" value="Send">
       </form>
       ```
   
 * Clicking the button the before and after text is shown but not the server response.
   I tested the code without the button and loading it directly, i.e.:
 *     ```
       <script>
       jQuery(document).ready(function($) {
         $.post("/code.php", {"arg1": "1", "arg2": "2"}, function(response) {
           alert('Got this from the server: ' + response);
         });
       });
       </script>
       ```
   
 * which worked.
 * Any help is highly appreciated – Thanks,
 * Toby

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811056)
 * It may have something to do with the noConflict wrapper and `ready()`. Try removing
   it and use `jQuery.post()`, or use the immediate form of the wrapper.
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811081)
 * Thanks, I tried using jQuery.post():
 *     ```
       <script>
       function Do () {
         $jQuery.post("/test6.php", {"arg1": "1", "arg2": "2"}, function(response) {
             alert('Got this from the server: ' + response);
           });
       }
       </script>
       <form name="Form1" action="" method="post" onsubmit="return Do()">
       <input type="submit" value="Send">
       </form>
       ```
   
 * which unfortunately also did not work. How would the code for the immediate form
   of the wrapper look like?
 * Thanks,
 * Toby
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811097)
 * Sorry I also tried the immediate form of the wrapper, i.e.:
 *     ```
       (function($) {
         $.post("/test6.php", {"arg1": "1", "arg2": "2"}, function(response) {
             alert('Got this from the server: ' + response);
         });
       })(jQuery);
       ```
   
 * which did not show the alert box.
 * Thanks for any help.
 * Toby
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811101)
 * Sorry, I hope this was not too confusing. The code I posted above has a small
   error the post function without the wrapper should not have the $ sign in the
   beginning but just jQuery.post(). I tried all three versions inside the Do() 
   function and outside of it. They all worked outside but not inside of it.
 * Thanks,
 * Toby
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811104)
 * Sorry, I added an error function and it seems all three versions work but throw
   an error. Is there a way to see what the error is (I tried putting out errorThrown
   but it was empty)?
 *     ```
       jQuery.post("/test6.php", {"arg1": "1", "arg2": "2"}, function(response) {
         alert('Got this from the server: ' + response);
       }).done(function() {
         alert( "second success" );
       }).fail(function(xhr, textStatus, errorThrown) {
         alert( textStatus );
       });
       ```
   
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811110)
 * Maybe I should use the click event of a button. This works in JSFiddle ([http://jsfiddle.net/H6YZL/2/](http://jsfiddle.net/H6YZL/2/))
   with error “NOT FOUND” but not in my WordPress:
 *     ```
       <script>
       $(document).ready(function(){
         $(".sendButton").click(function(){
           $.post("/code.php", {"arg1": "1", "arg2": "2"}, function(response) {
             alert('Got this from the server: ' + response);
           }).done(function() {
             alert( "second success" );
           }).fail(function(xhr, textStatus, errorThrown) {
             alert( textStatus );
           });
         });
       });
       </script>
       <button class="sendButton">Send</button>
       ```
   
 * However in the other code I at least got an empty error.
 * Thanks
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811111)
 * I am not sure if the click-function really helps because in WordPress even the
   more simple example of just putting out a “Hello” does not work:
 *     ```
       <script>
       $(document).ready(function(){
         $("button").click(function(){
           alert("Hallo");
         });
       });
       </script>
       <button">Send</button>
       ```
   
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811129)
 * I’m now trying to get this simple button click example to work. In another post(
   [use jquery post onsubmit](http://wordpress.org/support/topic/use-jquery-post-onsubmit-function?replies=8))
   I got the hint to put the code to file and enqueue jquery in my functions.php
   and add an action hook in functions.php. As it was enough for the other example
   to put the code to file and call it via script src parameter I did the same here:
 * My file is code.js:
 *     ```
       jQuery("button").click(function(){
         alert("hello");
       });
       ```
   
 * And my WP page looks like this:
 *     ```
       <script type="text/javascript" src="/wp-content/themes/supernova-child/js/js-ex-click.js"></script>
       <button>Send</button>
       ```
   
 * I also tried using the two wrappers (as described in [jQuery NoConflict Wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers))
   to use $(“button”) instead of jQuery(“button”). This unfortunately did not work.
 * So I tried adding:
 *     ```
       wp_enqueue_script( 'jquery');
       ```
   
 * as well as:
 *     ```
       function theme_name_scripts() {
       	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
       	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/code.js', array(), '1.0.0', true );
       }
       add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
       ```
   
 * to my functions.php of my theme. Unfortunately this did also not help.
 * Thanks for any help
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811147)
 * Sorry about the fuss. There was actually no need to hook the script in WP it 
   simply works like this:
 *     ```
       <button>Click</button>
       <script>
       jQuery("button").click(function(){
         alert("Hi");
       });
       </script>
       ```
   
 * 🙂
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811148)
 * closed 🙂

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘use jquery post onsubmit function’ is closed to new replies.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 10 replies
 * 2 participants
 * Last reply from: [T.oby](https://wordpress.org/support/users/toby-1/)
 * Last activity: [12 years ago](https://wordpress.org/support/topic/use-jquery-post-onsubmit-function/#post-4811148)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics