Skip to main content

AJAX POST IN PHP

AJAX POST SCRIPT
________________________________________________________
index.php
________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>AJAX POST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
   jQuery(function($){
           var text1 = $('#text_id1');
           var text2 = $('#text_id2');
           $('#button_submit').click(function(){
                   jQuery.ajax({
                           url: 'ajax_page.php',
                           type: 'post',
                           data: 'text1=' + text1.val() + '&text2='+text2.val(),
                           success: function(results){
                                   $("#text_id3").val(results) ;
                           }
                   });
           });
   });
</script>
</head>
<body>
<h2>AJAX POST</h2>
<input type="text" name="text1" id="text_id1" />
<input type="text" name="text2" id="text_id2" />
<input type="text" name="text3" id="text_id3" />
<button id="button_submit">Get Result</button>
</body>
</html>
________________________________________________________
ajax_page.php
________________________________________________________
<?php
$text1  = $_POST["text1"]; $text2 = $_POST["text2"];
echo $text = $text1 + $text2;
?>

Comments

Post a Comment

Popular posts from this blog

transparent css

body {   font-family: 'Open Sans', sans-serif;   font-size: 14px;   line-height: 45px;   /*color: #666;*/   color: black;   background-color: #fff; } :hover {   text-decoration: none;   outline: none } .form-control {   background-color: transparent;   border-color: black;   height: 50px;   border-radius: 0;   box-shadow: none; } textarea.form-control {   min-height: 180px;   resize:none; } .form-group {   margin-bottom: 30px; } .contact-info {   padding-left:70px;   font-weight: 300; } ul.address {   margin-top: 30px;   list-style: none;   padding: 0;   margin: 0; } .btn-submit {   display: block;   padding: 12px;   width: 100%;   background:transparent;   color: #4985C6;   border:1px solid black;   margin-top: 40px; } .btn-submit:hover {   display: block;   padding: 12px; ...
Post a Comment
Read more

Get Current Location & Address in PHP

index.php ____________________________________________________________________ <!DOCTYPE html> <head> <title>GEt Current Location</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ var lat = $('#lat'); var lng = $('#lng'); $('#submit').click(function(){ jQuery.ajax({ url: 'get_address.php', type: 'post', data: 'lat=' + lat.val() + '&lng='+lng.val(), success: function(results){ $("#ack").val(results) } }); }); }); </script> <script> if(!navigator.geolocation){ alert('Your Browser does not support HTML5 Geo Location. Please Use Newer Version Browsers'); } navigator.geolocation.getCurrentPosition(success, error); function success(position){ var latit...
Post a Comment
Read more

Page loader

<html> <head> <style> .no-js #loader { display: none;  } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .preload { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(load.gif) center no-repeat #fff; } </style> </head> <body> <div class="preload"></div> <script src="js/jquery.min.js"></script> <script type="text/javascript"> //paste this code under head tag or in a seperate js file. // Wait for window load $(window).load(function() { // Animate loader off screen $(". preload ").fadeOut("slow");; }); </script> </body> </html>
Post a Comment
Read more