Demo of HTTP Post using JQuery with validated return data

First Name
Second Name

Return to HTTP Post tutorial

jQuery & HTML

<script>
$(document).ready(function() {
 $("#b1").click(function(event){

  $.post( "postck2.php", $( "#f1" ).serialize(),function(return_data,status){

  if(return_data.data.validation_status=="NOTOK"){
  $("#msg").html(return_data.data.msg);
  }else{
  $("#msg").html("Welcome " + $('#t1').val() + $('#t2').val());
  }

      if(return_data.elements.t1 =='F'){$("#t1").addClass('error');}
      else{$("#t1").removeClass('error');}
      if(return_data.elements.t2 =='F'){$("#t2").addClass('error');}
      else{$("#t2").removeClass('error');}

         
 },"json");    
 });
});
</script>
<table><form id=f1>
<tr><td>First Name</td><td><input type=text id="t1" name="t1"></td></tr>
<tr><td>Second Name</td><td><input type=text id="t2" name="t2"></td></tr>
<tr><td colspan=2><input type="button" id="b1" value="Submit"></td><td></td></tr>
</form>
</table>

      
<div id="msg" class="msg"></div>

STYLE

<style>
.error{
         background-color: yellow;
         border-color: red;
}
</style>