DEV Community: Adnan Afzal

2 methods to prevent form from submission

Adnan Afzal — Fri, 11 Feb 2022 15:09:43 +0000

Normally, when you submit the form, it redirects to the action attribute link. But you can stop that reload and call an AJAX or any other Javascript function.

1. preventDefault

You can call the preventDefault function on the event target and it will stop the form from redirecting to the page specified in the action attribute of the <form> tag.

<form method="POST" action="your-page.php" onsubmit="onFormSubmit();">
    <input type="submit" />
</form>

Then you can create the following Javascript function to prevent the page reload:

function onFormSubmit() {
    event.preventDefault();

    // your Javascript code here
}

In this method, the form is first prevented from submission and then your Javascript code will be run.

2. return false

The second approach is to use the return false statement in your Javascript code. For this, you also need to return the value from onsubmit event function. Let's check this out.

<form method="POST" action="your-page.php" onsubmit="return onFormSubmit();">
    <input type="submit" />
</form>

Then create your Javascript function as like that:

function onFormSubmit() {
    // your Javascript code here

    return false;
}

In this method, your Javascript code runs first before preventing the form submission.

Recommendation

We would recommend the 1st method i.e. preventDefault because it is the very first line of the Javascript function. So if there is an error in your Javascript code, your browser will not get reloaded and thus you will be able to view the error in the browser console.

Display Messages in Browser Console using Figlet

Adnan Afzal — Thu, 10 Feb 2022 18:24:34 +0000

Here how you can display beautiful messages in a browser console using Javascript. You just need to download a library called Figlet.

After download, you need to extract the zip file and copy the file lib/figlet.js in your project. You also need to copy the fonts folder too.

Then you need to include that library in your project using the script tag:

<script src="figlet.js"></script>

Right after that, you can display the message you want in the browser console:

<script>
    // initialize the library

    const textDisplay = "adnan-tech.com";
    const font = "Speed";

    figlet(textDisplay, font, function (error, text) {
        // display the text in console
        console.log(text);
    });
</script>

Create a Password Protected ZIP file in Mac OS X

Adnan Afzal — Mon, 07 Feb 2022 19:21:12 +0000