New to ajax here. I have a php file that have a form with simple elements in it.
I want to be able to click "Submit" and then have the form data sent to another php to process it
(and this process may take long time), and then when its done, shall return some result (text etc) to the first php file. Here’s my code:
<html>
<head>
<script src="jquery.min.js"></script>
<script>
function submitBorrow() { // Call to ajax function
$.ajax({
type: "POST",
url: "sendEmail.php",
data: { test:'yes', wat:'no' },
success: function(html)
{
$("#emailResultDiv").html(html);
}
});
}
</script>
</head>
<body>
<form id="borrowForm" name="borrowForm">
<select name="duration" id="duration" onchange="submitBorrow();">
<option value="3 days">3 days</option>
<option value="4 days">4 days</option>
<option value="5 days">5 days</option>
<option value="6 days">6 days</option>
<option value="1 week">7 days</option>
<option value="2 week">14 days</option>
<option value="3 week">21 days</option>
<option value="1 month">30 days</option>
<option value="40 days">40 days</option>
<option value="60 days">60 days</option>
</select>
<button onclick="submitBorrow();">submitBorrow</button>
<div id="emailResultDiv">Here</div>
</form>
</body>
</html>
Here is content of my sendEmail.php (just a simple php with fake process command sleep.)
<?php
if ($_POST) {
sleep(5);
echo "DONE!";
}
?>
When i change the select item, after 5 secs, the value DONE! is displayed at the div. but when I press the button, it doesn’t do that. Why is that, and how to achieve what I need?
2
Answers
Rookie mistake. After posting a question, I just realized that all buttons in a form shall be Submitting the form if a type is not given.
So just did this and it works:
I specified type="button" and it ceased to be a submit button and solved the issue I am having.
You can always use preventDefault() to prevent the form from submitting in such kind of cases.