-1

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!

Improve this question
5
  • Trying to dynamically build function and element names is not a scalable idea. Commented Jun 13, 2022 at 21:47
  • Instead of creating dynamically-named functions for each form, write a single function that takes the form ID as a parameter. Commented Jun 13, 2022 at 21:50
  • There's also no need to create dynamic variable names inside the function. These are local variables, so you can use the same names in each function. Commented Jun 13, 2022 at 21:51
  • You wrote that you don't want to reload the page. But fo1rm.submit() will do exactly that. You should only use AJAX, not submit(). Commented Jun 13, 2022 at 21:51
  • Javascript function is not defined happens to be the issue i am facing with the above code. it tries to execute but doesn't work. I have equally edited the code and removed the PHP Variables. Commented Jun 13, 2022 at 21:53

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Is there a workaround to not make the submit reload the page and just return an alert that it has been submitted?
Yes. Just stay away from the form.submit event altogether and only rely on AJAX to do the submitting. Then just AFTER the $ajax() call, add the alert() that you wish to have. But, these are separate questions from the one you've asked here. Please up vote my answer and mark as "the" answer to your question by clicking the checkmark at the top, left of the answer.
In the question, i said "I want the form to silently execute on the backend without reloading the page." With the answer above, it still does reload.
@StevenHelson Well, I've just answered that part in my comment. Please be aware that questions should really only ask about solving one issue at a time.
@StevenHelson See my updated answer.
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.