Skip to main content

HTML Form submission technique via jQuery

By

Here's a technique I use often to provide an alternative method to HTML Form submission for JS Disabled Browsers.
Here's a Basic HTML Form with its corresponding jQuery script: 
( **note: for sake of simplicity, I have placed the messageDiv on top of form **) 
The messageDiv:



<div id="messageDiv"><?php if( isset($_GET['msg']) ) { 
echo $_GET['msg']; } ?></div>


The form:


<form name="addCustomerForm" id="addCustomerForm" method="post" enctype="application/x-www-form-urlencoded" action="somefile.php">


<p>Name: <br />


<input type="text" name="customerName" />


</p>


<p> Address: <br />


<input type="text" name="customerAddress" />


</p>

<p>

<input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" />

<input type="hidden" name="return_url" value="URL_OF_CURRENT_PAGE" />

</p>

</form>

<script language="javascript" type="text/javascript">

<!-- 

$(function() {

$('#addCustomerForm').submit(function() {

// do form validation here

$.ajax({

type       : "POST",

url         : "somefile.php",

data       : $(this).serialize() + "&return_type=json",

dataType : "json", 

success: function(data){

if( data.error != '0' ) {

$('#messageDiv').addClass('error').html(data.msg);

} else {

$('#messageDiv').addClass('success').html(data.msg);

}

}

});

return false;

});

});

// -->

</script>

In the above JS code, I am adding an extra Post variable 'return_type' with value 'json', whenever I am posting by $.ajax technique. 

Now, the following is the PHP Code on submission Page:



<?php


/** After Server side validation is done.. **/


$responseArr = array();


/** Assuming the process was successful **/


if($success) {


$responseArr = array (


'error' => '0',


'msg'  => 'New Customer Added');


} else {


$responseArr = array (


'error' => '1',


'msg'  => 'Error Adding Customer');


}


if( isset($_POST['return_type']) && $_POST['return_type'] == 'json' ) {


header("Content-Type: text/plain");


echo json_encode($responseArr);


exit; 


} else {


// so, jQuery submission was not made.. 


header('Location: '.$_POST['return_url'].'?'.http_build_query($responseArr));


exit;


}


?>


The PHP code itself is self-explanatory. If there's a return_type in $_POST and has value 'json', then echo JSON values, otherwise redirect to return_url on $_POST passing the response values as $_GET.
Labels:

Comments

Post a Comment

Popular posts from this blog

Getting Lat and Lon from Address in Google Maps Using PHP

By
Recently, I am working on an application where I have to convert addresses to their corresponding Lat and Lon. So, I decided to write on how to get Latitude and Longitude in Google Maps using only PHP. To use the technique explained below, you need to have a  Google Maps Key . The idea is simple. Make a request to Google Maps server, and it will return an XML (or JSON). Then, parse the XML to get the Lat and Lon. I use DomDocument and DomXPath for processing it. Below I have used the address:  100 City Centre Dr., Mississauga, Ontario . 1. $key    =  "....." ;  // your Google Maps key 2.   3. $address   = urlencode( '100 City Centre Dr., Mississauga, ON' ); 4.   5. $url   =  ' http://maps.google.com/maps/geo?q= ' . $address . '&output=xml&oe=utf8&key=' . $key ; 6. $dom   =  new   DomDocument(); 7. $dom ->load( $url ); At this point, the XML is loaded into the $dom. Now, it...
Post a Comment
Read more

Sending Email in Android using JavaMail API without using the default android app(Builtin Email application)

By
I find a way sending a mail in android using the JavaMail API using Gmail authentication Steps to create a simple Project: MailSenderActivity.java YOUR PACKAGE ; import android . app . Activity ; import android . os . Bundle ; import android . util . Log ; import android . view . View ; import android . widget . Button ; public class MailSenderActivity extends Activity {     /** Called when the activity is first created. */     @Override     public void onCreate ( Bundle savedInstanceState ) {         super . onCreate ( savedInstanceState );         setContentView ( R . layout . main );         final Button send = ( Button ) this . findViewById ( R . id . send );         send . setOnClickListener ( new View . OnClickListener () {             public void onClick ( View v ) {       ...
2 comments
Read more

Reversing Digits of a 32-Bit Integer in Java

By
  Have you ever wondered how to reverse the digits of a signed 32-bit integer in Java? Reversing the digits of an integer is a common programming task, and it's essential to handle it correctly, especially when dealing with constraints like the 32-bit integer range. In this blog post, we'll walk you through how to achieve this task in Java, ensuring that you handle potential integer overflow. The Challenge The challenge is to reverse the digits of a given 32-bit integer x while maintaining the constraints of the problem. In Java, an int can hold 32 bits, with values ranging from -2^31 to 2^31 - 1. Reversing the digits should be done while considering both positive and negative integers and avoiding integer overflow. The Java Solution To reverse the digits of a 32-bit integer in Java, you can follow these steps: java Copy code public int reverse ( int x) { // Initialize variables to store the result and check for the sign of x int result = 0 ; int sign = ...
Post a Comment
Read more