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!
2
Answers
Your
submit_1form
function is nested within the anonymousdocument.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 withindocument.ready
in the first place.To not encounter a page reload, don’t use the typical
submit
event of theform
. Instead, use AJAX as you already are and trigger that with theclick
event of thediv
.at the first be sure your jQuery file load correctly, and it will be good to call your javascript function on the form submit.