PHP 7 Script to Process HTML Form Values in Browser Using jQuery AJAX in Javascript Full Project For Beginners

  • Post author:
  • Post category:PHP
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be processing html form values in browser using jquery ajax in javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.php file and copy paste the following code

 

 

index.php

 

 

<html>
<head>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
  
  $("#sub").click(function() {
    var city_name=$("#city").val();
    var country_name=$("#country").val();
    $.ajax({
      url:'ajax.php',
      data:{city:city_name, country:country_name},
      type:'POST',
      success:function(data) {
        $("#result").html(data);
      }
    });
    
  });
  
});

</script>
</head>

<body>

<div id="box">
  <input type="text" name="city" id="city" /><br/>
  <input type="text" name="country" id="country" /><br/>
  <input type="submit" name="sub" id="sub" value="Get" /><br/>

  <div id="result"></div>
</div>

</body>
</html>

<?php
if(isset($_POST['city']) &&!empty($_POST['city']) && isset($_POST['country']) &&!empty($_POST['country']))
{

$getcity = $_POST['city'];
$getcountry = $_POST['country'];
echo "City: $getcity <br/>";
echo "Country: $getcountry";

} else {
  echo "<h2>Please enter all the values</h2>";
}
?>

Leave a Reply