Created
March 8, 2017 10:13
-
-
Save Mauryashubham/08d7fae640ba2b1a5079f45510e0a791 to your computer and use it in GitHub Desktop.
How to Use Ajax with Simple Example of Letters Conversion
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
| 2.Make a another file in notepad and save it as ajax.php and paste the below code. | |
| <?php | |
| /** | |
| @author : Shubham Maurya, | |
| Email id : [email protected] | |
| **/ | |
| if(isset($_POST['small_text'])) | |
| { | |
| $small_Id=$_POST['small_text']; | |
| $sletter=strtoupper($small_Id); | |
| echo $sletter; | |
| } | |
| if(isset($_POST['capital_letter'])) | |
| { | |
| $capital_Id=$_POST['capital_letter']; | |
| $cletter=strtolower($capital_Id); | |
| echo $cletter; | |
| } | |
| ?> |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Ajax Example</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| // For Small Letter | |
| function small_letter() | |
| { | |
| var small=document.getElementById("smalll").value; //Get value from text using ID | |
| if(small) | |
| { | |
| $.ajax({ //Use Ajax | |
| type: 'POST', | |
| url: 'ajax.php', //Ajax File | |
| data: { | |
| small_text:small, | |
| }, | |
| success: function (data) { | |
| $( '#small_status' ).html(data); | |
| } | |
| }); | |
| } | |
| else | |
| { | |
| $( '#small_status' ).html("No Data Typed.."); | |
| return false; | |
| } | |
| } | |
| // For Capital Letter | |
| function capital_letter() | |
| { | |
| var capital=document.getElementById("capital").value; //Get value from text using ID | |
| if(capital) | |
| { | |
| $.ajax({ //Use Ajax | |
| type: 'POST', | |
| url: 'ajax.php', //Ajax File | |
| data: { | |
| capital_letter:capital, | |
| }, | |
| success: function (data) { | |
| $( '#capital_status' ).html(data); | |
| } | |
| }); | |
| } | |
| else | |
| { | |
| $( '#capital_status' ).html("No Data Typed.."); | |
| return false; | |
| } | |
| } | |
| </script> | |
| <style type="text/css"> | |
| .margin_t | |
| { | |
| margin-top: 15px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="text-align: -webkit-center;margin-top: 150px;"> | |
| <h2>SIMPLE AJAX EXAMPLE</h2> | |
| <label>Enter Text in Small Letters and Using Ajax ,will convert it into CAPITAL Letters </label><br> | |
| <input type="text" id="smalll" class="margin_t" onkeyup="small_letter();" name="small"><br> | |
| <label>Output : </label><span id="small_status" style="color:red;font-size: 12px;""></span> | |
| <br><br> | |
| <label class="margin">Enter Text in CAPITAL Letters and Using Ajax ,will convert it into small Letters </label><br> | |
| <input type="text" id="capital" class="margin_t" onkeyup="capital_letter();" name="capital"><br> | |
| <label>Output : </label><span id="capital_status" style="color:red;font-size: 12px"></span> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment