Submit form with Javascript / Jquery and without button

Question

I am trying to submit a form without button by calling a JavaScript function and executing the form with JQUERY / PHP. I want the form to silently execute on the backend without reloading the page. Unfortunately it keeps returning the error that the JavaScript function is not defined even though it is there on the page. I am not good with JavaScript admittedly, so consider me a noob and do point me in the right direction. Thanks, 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 called the Jquery script within my header tag <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Thanks alot!

Answer 1

Your submit_1form function is nested within the anonymous document.ready() function, so it can't be found in scope when it's needed. Since it is a function, it doesn't need to be defined within document.ready in the first place.

To not encounter a page reload, don't use the typical submit event of the form . Instead, use AJAX as you already are and trigger that with the click event of the div .

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input id="acc_name" value="name"> <br> <input id="with_id" value="1"> <div class="submitButton">Submit</div> </form> <script> $(function(){ // Set up a click (not submit) event handler for the div $("div.submitButton").on("click", submit_1form); }); function submit_1form() { 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) {} }); alert("Form data submitted!"); } </script>

Answer 2

首先确保您的 jQuery 文件正确加载，并且在表单提交上调用您的 javascript 函数会很好。