Author: John Au-Yeung

To run a function when the page is loaded with JavaScript, we run the code in the window.onload method.

For instance, we write

const init = () => {
  alert("hello");
};
window.onload = init;

to set the window.onload property to the init function.

window.onload is called when the page is loaded so we see 'hello' displayed when it’s loaded.

To make browser go back to previous page on click with JavaScript, we set the onclick attribute to call window.history.go.

For instance, we write

<input
  action="action"
  onclick="window.history.go(-1); return false;"
  type="submit"
  value="Cancel"
/>

to add a submit button with the onclick attribute set to window.history.go(-1); return false;.

We call history.go with -1 to go back to the last page.

And we return false to stop the default behavior.

To convert Data URI to File then append to FormData with JavaScript, we use fetch.

For instance, we write

const url =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

const res = await fetch(url);
const blob = await res.blob();
const fd = new FormData();
fd.append("image", blob, "filename");

console.log(blob);

to call fetch with the url.

Then we call blob to convert the response to a blob.

Next, we create a FormData object.

And then we append the blob as an entry in the FormData object with append.

append takes the key, the value, and the file name as arguments.

To fix "Submit is not a function" error in JavaScript, we should make sure we call submit on a form element.

For instance, we write

<form
  action="product.php"
  method="post"
  name="frmProduct"
  id="frmProduct"
  enctype="multipart/form-data"
>
  <input id="submitValue" type="button" name="submitValue" value="" />
</form>

to add a form with a submit button inside.

Then we write

const submitAction = () => {
  document.getElementById("frmProduct").submit();
  return false;
};
document.getElementById("submitValue").onclick = submitAction;

to select the button with getElementById.

We set its onclick property to the submitAction function.

In submitAction, we select the form with getElementById and call submit on the form.

Then we return false to stop the default submit behavior.

onclick only runs when we click on the button.