Mauryashubham/ajax.php

## ajax.php
2.Make a another file in notepad and save it as ajax.php and paste the below code.

<?php

/**
@author : Shubham Maurya,
Email id : maurya.shubham5@gmail.com
**/

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;
}

?>

## index.php
<!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>
	2.Make a another file in notepad and save it as ajax.php and paste the below code.

	<?php

	/**
	@author : Shubham Maurya,
	Email id : maurya.shubham5@gmail.com
	**/

	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;
	}

	?>
	<!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>