Last active
January 9, 2017 12:29
-
-
Save dasbairagya/d831472abe00eab71ca245253cbe0065 to your computer and use it in GitHub Desktop.
Submit html form using Ajax with loader
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Insert data in the database using Ajax</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <style>/* Absolute Center Spinner */ | |
| .success{ | |
| color:green; | |
| font-size:20px; | |
| border:1px solid green; | |
| padding: 8px; | |
| } | |
| .error{ | |
| color:red; | |
| font-size:20px; | |
| border:1px solid red; | |
| padding: 8px; | |
| } | |
| .loading { | |
| position: fixed; | |
| z-index: 999; | |
| height: 2em; | |
| width: 2em; | |
| overflow: show; | |
| margin: auto; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| /* Transparent Overlay */ | |
| .loading:before { | |
| content: ''; | |
| display: block; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.3); | |
| } | |
| /* :not(:required) hides these rules from IE9 and below */ | |
| .loading:not(:required) { | |
| /* hide "loading..." text */ | |
| font: 0/0 a; | |
| color: transparent; | |
| text-shadow: none; | |
| background-color: transparent; | |
| border: 0; | |
| } | |
| .loading:not(:required):after { | |
| content: ''; | |
| display: block; | |
| font-size: 10px; | |
| width: 1em; | |
| height: 1em; | |
| margin-top: -0.5em; | |
| -webkit-animation: spinner 1500ms infinite linear; | |
| -moz-animation: spinner 1500ms infinite linear; | |
| -ms-animation: spinner 1500ms infinite linear; | |
| -o-animation: spinner 1500ms infinite linear; | |
| animation: spinner 1500ms infinite linear; | |
| border-radius: 0.5em; | |
| -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; | |
| box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; | |
| } | |
| /* Animation */ | |
| @-webkit-keyframes spinner { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| -moz-transform: rotate(360deg); | |
| -ms-transform: rotate(360deg); | |
| -o-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @-moz-keyframes spinner { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| -moz-transform: rotate(360deg); | |
| -ms-transform: rotate(360deg); | |
| -o-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @-o-keyframes spinner { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| -moz-transform: rotate(360deg); | |
| -ms-transform: rotate(360deg); | |
| -o-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes spinner { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| -moz-transform: rotate(360deg); | |
| -ms-transform: rotate(360deg); | |
| -o-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <div class="container"> | |
| <div class="col-md-6"> | |
| <div class="loading" id="loder" style="display: none;">Loading…</div> //this is for loader calling | |
| <form name="contact_form"> | |
| <div class="form-group"> | |
| <label for="email">Name:</label> | |
| <input type="text" class="form-control" id="name" name="name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email address:</label> | |
| <input type="email" class="form-control" id="email" name="email"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="pwd">Mobile:</label> | |
| <input type="number" class="form-control" id="phone" name="mobile"> | |
| </div> | |
| <button type="submit" id="btn_sub" class="btn btn-default">Submit</button> | |
| </form><br /> | |
| <p id="msg"></p> //show success or error message over here | |
| </div> | |
| <script> | |
| $(document).ready(function(){ | |
| $("#btn_sub").click(function(){ | |
| var name = $("#name").val(); | |
| var email = $("#email").val(); | |
| var mobile = $("#phone").val(); | |
| // Returns successful data submission message when the entered information is stored in database. | |
| var dataString = 'name1='+ name + '&email1='+ email + '&mobile1='+ mobile; | |
| if(name==''||email==''||mobile=='') | |
| { | |
| alert("Please Fill All Fields"); | |
| } | |
| else | |
| { | |
| $('#loader').show(); //call loader to be show | |
| // AJAX Code To Submit Form. | |
| $.ajax({ | |
| type: "POST", | |
| url: "http://example.com/process", | |
| data: dataString, | |
| cache: false, | |
| success: function(result){ | |
| $('#msg').html(result); //show the success message from the process.php and overwrite the html inside the <p> tag. | |
| $('#loader').hide(); // hide the loader | |
| document.forms['contact_form'].reset(); //reset the form after submitting. | |
| } | |
| }); | |
| } | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| </div> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Template Name: test1 | |
| * Created by PhpStorm. | |
| * User: PC35 | |
| * Date: 07-01-2017 | |
| * Time: 12:05 | |
| */ | |
| global $post; | |
| global $wpdb; | |
| $name2=$_POST['name1']; | |
| $email2=$_POST['email1']; | |
| $mobile2=$_POST['mobile1']; | |
| $result = $wpdb->insert('your table name',array('col1'=>$name2,'col2'=>$email2,'col3'=>$mobile2),array('%s','%s','%d')); | |
| if($result){ | |
| echo "<p class='success'>Success !</p>"; | |
| } | |
| else{ | |
| echo "<p class='error'>Oops ! Something went wrong</p>"; | |
| } | |
| ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Awesome! very helpful.