I'm trying to submit a form without a button by calling a JavaScript function and executing the form using JQUERY/PHP. I want the form to execute silently on the backend without reloading the page. Unfortunately, it keeps returning a JavaScript function undefined error, even though it's on the page. Admittedly, I'm not good at JavaScript, so please treat me like a noob and point me in the right direction. Thank you, my code is
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_1form" action="" method="POST">
<input type="text" name="acc_name" id="acc_name" value="name"/>
<br/>
<input type="text" name="with_id" id="with_id" value="1"/>
<div onclick="submit_1form()">Submit</div>
</form>
<script>
$(document).ready(function() {
function submit_1form() {
var fo1rm = document.getElementById("my_1form");
fo1rm.submit();
var acc_name = $("#acc_name").val();
var with_id = $("#with_id").val();
var dataString = 'acc_name=' + acc_name +
'&with_id=' + with_id; {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "submit-withdraw.php",
data: dataString,
cache: false,
success: function(result) {}
});
}
return false;
}
});
</script>
Please note that I am using the header tag <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">< Jquery script is called in /script>< /p>
Thank you so much!
First make sure your jQuery files load correctly and preferably call your javascript function on the form submit.
Your
submit_1formfunction is nested within an anonymousdocument.ready()function, so it cannot be found in scope when needed. Since it is a function, there is no need to define it indocument.readyfirst.To avoid page reloading, please do not use the typical
submitevent ofform. Instead, use AJAX as you do now, and trigger that AJAX via theclickevent ofdiv.