JQuery is a powerful javascript library that makes programmer’s life getting easy. Recently, I am doing some small project on with JQuery scripting involved.
Below is the form submission source code.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<form id="processForm" action="formProcess.php">
<input id="buyerName" name="buyerName" type="text" />
<input id="Submit" onclick="submitProcess();" name="Submit" type="button" value="Submit" />
</form>
<script type="text/javascript">
var fnSuccess = function(data) {
$("#purchaseForm").submit();
}
function submitProcess() {
var url = 'notification.phtml';
$.ajax({
type: "POST",
url: url,
data: "buyerName="+$("#buyerName").attr('value'),
dataType: "text",
success: fnSuccess
});
}
</script>
Purpose :
- Send out the Notification email via notification.php before submitting the form.
I am using Firebug -> Net -> XHR to run the debugging. Firebug console shows that the data send over successfully by QUERY String and the notification email send out correctly. Unfortunately, the Form is not submitting at all.
Searching the solution from Google, no luck. Checking the scripts line by line, no spelling error. Getting helps from programming expert, no solution.
Finally, with the helps from one of my programmer friend, we found the problem.
Let’s take a closer on the highlight scripts below,
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<form id="processForm" action="formProcess.php">
<input id="buyerName" name="buyerName" type="text" />
<input id="Submit" onclick="submitProcess();" name="Submit" type="button" value="Submit" />
</form>
<script type="text/javascript">
var fnSuccess = function(data) {
$("#purchaseForm").submit();
}
function submitProcess() {
var url = 'notification.phtml';
$.ajax({
type: "POST",
url: url,
data: "buyerName="+$("#buyerName").attr('value'),
dataType: "text",
success: fnSuccess
});
}
</script>
<input id="Submit" onclick="submitProcess();" name="Submit" type="button" value="Submit" />
** NOTE : DO NOT USE name=”Submit” and id=”Submit” in the input BUTTON element **
Simply remove the name=”Submit” and id=”Submit” from the input Button, the Form get submitted.
