Unable to trigger ajax with onclick (but it triggered if use onchange)-CodePudding

New to ajax here. I have a php file that have a form with simple elements in it. I want to be able to click "Submit" and then have the form data sent to another php to process it (and this process may take long time), and then when its done, shall return some result (text etc) to the first php file. Here's my code:

<html>

<head>
<script src="jquery.min.js"></script>
<script>

    function submitBorrow() { // Call to ajax function  
    
            $.ajax({
                type: "POST",
                url: "sendEmail.php",
                data: { test:'yes', wat:'no' },
                success: function(html)
                {
                    $("#emailResultDiv").html(html);
                }
            });

    }
    
</script>

</head>

<body>
<form id="borrowForm" name="borrowForm">

<select name="duration" id="duration" onchange="submitBorrow();">
                            <option value="3 days">3 days</option>
                            <option value="4 days">4 days</option>
                            <option value="5 days">5 days</option>
                            <option value="6 days">6 days</option>
                            <option value="1 week">7 days</option>
                            <option value="2 week">14 days</option>
                            <option value="3 week">21 days</option>
                            <option value="1 month">30 days</option>
                            <option value="40 days">40 days</option>
                            <option value="60 days">60 days</option>
                        </select>
                        
                        <button onclick="submitBorrow();">submitBorrow</button>
                        
                        <div id="emailResultDiv">Here</div>

</form>

</body>

</html>

Here is content of my sendEmail.php (just a simple php with fake process command sleep.)

<?php

if ($_POST) {

    sleep(5);
    
    echo "DONE!";
    
}
?>

When i change the select item, after 5 secs, the value DONE! is displayed at the div. but when I press the button, it doesn't do that. Why is that, and how to achieve what I need?

CodePudding user response：

Rookie mistake. After posting a question, I just realized that all buttons in a form shall be Submitting the form if a type is not given.

So just did this and it works:

<button type="button" onclick="submitBorrow();">Borrow</button>

I specified type="button" and it ceased to be a submit button and solved the issue I am having.

CodePudding user response：

You can always use preventDefault() to prevent the form from submitting in such kind of cases.

<html>
  <head>
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
      type="text/javascript"
    ></script>

    <script>
      $(document).ready(function () {
        $("#submitBorrow").click(function (event) {
          event.preventDefault();
          // Call to ajax function
          $.ajax({
            type: "POST",
            url: "sendEmail.php",
            data: { test: "yes", wat: "no" },
            success: function (html) {
              $("#emailResultDiv").html(html);
            },
          });
        });
        $("#duration").on("change", function (event) {
          $("#submitBorrow").click();
        });
      });
    </script>
  </head>

  <body>
    <form id="borrowForm" name="borrowForm">
      <select name="duration" id="duration">
        <option value="3 days">3 days</option>
        <option value="4 days">4 days</option>
        <option value="5 days">5 days</option>
        <option value="6 days">6 days</option>
        <option value="1 week">7 days</option>
        <option value="2 week">14 days</option>
        <option value="3 week">21 days</option>
        <option value="1 month">30 days</option>
        <option value="40 days">40 days</option>
        <option value="60 days">60 days</option>
      </select>

      <button id="submitBorrow">submitBorrow</button>

      <div id="emailResultDiv">Here</div>
    </form>
  </body>
</html>