Unable to trigger ajax with onclick (but it triggered if use onchange)
Question
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
solution1
0 2023-01-29 12:38:31
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:
<button type="button" onclick="submitBorrow();">Borrow</button>
I specified type="button" and it ceased to be a submit button and solved the issue I am having.
solution2
0 2023-01-29 14:01:28
You can always use preventDefault() to prevent the form from submitting in such kind of cases.
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script> <script> $(document).ready(function () { $("#submitBorrow").click(function (event) { event.preventDefault(); // Call to ajax function $.ajax({ type: "POST", url: "sendEmail.php", data: { test: "yes", wat: "no" }, success: function (html) { $("#emailResultDiv").html(html); }, }); }); $("#duration").on("change", function (event) { $("#submitBorrow").click(); }); }); </script> </head> <body> <form id="borrowForm" name="borrowForm"> <select name="duration" id="duration"> <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 id="submitBorrow">submitBorrow</button> <div id="emailResultDiv">Here</div> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.