Submit form with Javascript / Jquery and without button-CodePudding

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!

CodePudding user response：

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 >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>

CodePudding user response：

at the first be sure your jQuery file load correctly, and it will be good to call your javascript function on the form submit.