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_1form
function 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.ready
first.To avoid page reloading, please do not use the typical
submit
event ofform
. Instead, use AJAX as you do now, and trigger that AJAX via theclick
event ofdiv
.