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

Html – How to Prevent Page Refresh on Button Click When Submitting Data with JavaScript

I am working on a web application where a button click triggers an async function to submit data. However, the page refreshes every time I click the button, even though I have used e.preventDefault(). Below is a minimal representation of my code.

JavaScript Code:

document.addEventListener('DOMContentLoaded', () => {
    const downloadButton = document.getElementById('downloadButton');
    downloadButton.addEventListener('click', e => download(e));
});

async function download(e) {
    e.preventDefault(); // Prevent default button click action

    const videoUrl = document.getElementById('videoUrl').value;
    console.log('Downloading video from:', videoUrl);

HTML Snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button Click Test</title>
</head>
<body>
    <input id="videoUrl" type="text" placeholder="Enter Video URL">
    <button type="button" id="downloadButton">Download</button>

    <script src="script.js"></script>
</body>
</html>

Issue:

When the button is clicked, the page still refreshes despite using e.preventDefault() in the download function. The expected behavior is for the page to not refresh and for the data to be sent to the server asynchronously.

Attempts to Resolve:

  1. Ensured e.preventDefault() is used in the event handler.
  2. Verified that the button type is "button" to prevent default form submission.
  3. Checked for JavaScript errors in the console (none found).
  4. Ensured the event object e is passed correctly to the download function.

Question:

What could be causing the page to refresh even after using e.preventDefault()? Is there a part of my setup or code that I might be overlooking?

Additional Context:

  • I’m testing this in modern browsers (Chrome, Firefox).
  • The script is included correctly in the HTML and is executed after the DOM is fully loaded.
Tags:

2

Answers


  1. 0

    You have to check you server configurations. If you tried the code below, you will see that it works just fine:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Click Test</title>
</head>
<body>
<input id="videoUrl" type="text" placeholder="Enter Video URL">
<button type="button" id="downloadButton">Download</button>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const downloadButton = document.getElementById('downloadButton');
    downloadButton.addEventListener('click', e => download(e));
});

async function download(e) {
    e.preventDefault();
 
    const videoUrl = document.getElementById('videoUrl').value;
    console.log(videoUrl)
}
</script>
</body>
</html>

    If we came to the logic, you didn’t even add a form. That is, deleting the e.preventDefault() function won’t make a difference. Things are not being submitted at all, so the problem is 99% in the backend configurations. Check it out!

    Login or Signup to reply.
  2. 0

    You have to add a form behind Without action property and then after ending form you should add the <button>.
    If you want to access you could easily access the input with document.getElementById('youInputName'), or … .

    <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <form>
    <input type='text' id='input'>
  </form>
  <button onclick="myFunction(input.value)">Submit!</button>
  
  <script>
    function myFunction(value) {
      console.log(value);
    }
</script>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search