Question 369324 in Html Question posted in
Some basic documentation can be found here.

Html – reloading page after the alert button

After approve button the alert message will appear and has 2 option button "ok" and "cancel". after clicking ok the page will reload, the problem is I can’t do multiple approval because after clicking the alert ok button the page will reload.

I tried the onclick function but it still reloading after i click the approve button, also tried to remove the alert (data-confirm) but still reload the page.

I’m using these line of code:

<button type="submit" name="status" value="2" class="btn btn-success btn-sm m-b-0-0 waves-effect waves-light" data-confirm="Are you sure you want to approve this leave application?"  title="Approve">
    <i class="fa fa-check"></i>
</button>

This is the output of button:

image of button output

How can I multiple approve without appearing of alert but it still record the data?

after i click the check button the pending must change into aprrove, how to do that without reloading or refreching the page?

enter image description here

these is the whole code of the image

Tags:

2

Answers


  1. 0

    To achieve multiple approvals without the alert message and page reload, you can use JavaScript to handle the form submission asynchronously.

    1. change the button type to "button" instead of "submit" to prevent the form from being submitted automatically.
    2. add an event listener to the button which triggers when it’s clicked.
    Login or Signup to reply.
  2. 0

    After approve button the alert message will appear and has 2 option button "ok" and "cancel".

    If you have Ok and Cancel buttons, You should be using form element.

    When a form is sumbitted, page reloads automatically.

    To prevent Page reload after Ok button is clicked,
    You should use preventDefault() method

    html file:

    <form id="myForm">
    <!-- your other tags here -->
    <button type="reset" name="reset" >Cancel</button>
    <button type="submit" name="status" value="2" class="btn btn-success btn-sm m-b-0-0 waves-effect waves-light" data-confirm="Are you sure you want to approve this leave application?"  title="Approve">
    <i class="fa fa-check"></i>
   </button>
</form>

    JavaScript file:

    document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault();
        // Rest of Your form submission logic here
    });
});

    if you want inline Javascript, place script tag inside a head tags

    <head>
 <!-- your other tags here -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault();
        // Rest of Your form submission logic here
    });
});
</script>

</head>
<body>
 <!-- your other tags here -->
   <form id="myForm">
    <!-- your other tags here -->
    <button type="reset" name="reset" >Cancel</button>
    <button type="submit" name="status" value="2" class="btn btn-success btn-sm m-b-0-0 waves-effect waves-light" data-confirm="Are you sure you want to approve this leave application?"  title="Approve">
    <i class="fa fa-check"></i>
   </button>
  </form>
 <!-- your other tags here -->
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search