Author: John Au-Yeung

Sometimes, we want to create a form dynamically via JavaScript.

In this article, we’ll look at how to create a form dynamically via JavaScript.

How to create a form dynamically via JavaScript?

To create a form dynamically via JavaScript, we use the createElement method.

For instance, we write

const f = document.createElement("form");
f.setAttribute("method", "post");
f.setAttribute("action", "submit.php");

const i = document.createElement("input");
i.setAttribute("type", "text");
i.setAttribute("name", "username");

const s = document.createElement("input");
s.setAttribute("type", "submit");
s.setAttribute("value", "Submit");

f.appendChild(i);
f.appendChild(s);

document.body.appendChild(f);

to call createElement with 'form' to create a form element.

Then we set its attributes by calling setAttribute with the attribute name and value.

Next, we call createElement with 'input' to create input elements.

Then we call f.appendChild to append the inputs to the form as its children.

Finally, we call document.body.appendChild with f to append the form as the body’s last child.

Conclusion

To create a form dynamically via JavaScript, we use the createElement method.

Sometimes, we want to fix HTML2Canvas only rendering what is visible on screen with JavaScript.

In this article, we’ll look at how to fix HTML2Canvas only rendering what is visible on screen with JavaScript.

How to fix HTML2Canvas only rendering what is visible on screen with JavaScript?

To fix HTML2Canvas only rendering what is visible on screen with JavaScript, we set the scrollY value.

For instance, we write

const canvas = await html2canvas(htmlSource, { scrollY: -window.scrollY });
const img = canvas.toDataURL();
window.open(img);

to call html2canvas with an object that sets scrollY to -window.scrollY so that we position htmlSource is moved so that the whole htmlSource element will be rendered on the canvas.

Then we call canvas.toDataURL to return the base64 string with the rendered element’s image.

Conclusion

To fix HTML2Canvas only rendering what is visible on screen with JavaScript, we set the scrollY value.

Sometimes, we want to set the form action through JavaScript.

In this article, we’ll look at how to set the form action through JavaScript.

How to set the form action through JavaScript?

To set the form action through JavaScript, we set the action property.

For instance, we write

document.getElementById("form_id").action = "script.php";

to select the form with getElementById.

Then we set its action property to the action attribute value.

Conclusion

To set the form action through JavaScript, we set the action property.

Sometimes, we want to download image with JavaScript.

In this article, we’ll look at how to download image with JavaScript.

How to download image with JavaScript?

To download image with JavaScript, we create a link.

For instance, we write

const a = document.createElement("a");
a.href = "img.png";
a.download = "output.png";
a.click();

to create a link with the createElement method.

Then we set its href property to the path to the file we want to download.

Next, we set the download property to the string with the filename of the downloaded file.

Then we call click to download the file.

Conclusion

To download image with JavaScript, we create a link.

Sometimes, we want to remove hash from URL with JavaScript.

In this article, we’ll look at how to remove hash from URL with JavaScript.

How to remove hash from URL with JavaScript?

To remove hash from URL with JavaScript, we call the history.pushState method.

For instance, we write

history.pushState("", document.title, window.location.pathname);

to call pushState with '' and window.location.pathname to remove the hash from the URL.

Conclusion

To remove hash from URL with JavaScript, we call the history.pushState method.