Author: John Au-Yeung

We can use the FormData constructor to create an object that gets the key-value pairs of the form values we entered.

For instance, if we have the following form:

<form>
  Credit Card Validation:
  <input type="text" name="cctextbox">
  <br />

  Card Type:
  <select name="cardtype">
    <option value="visa">Visa</option>
    <option value="mastercard">MasterCard</option>
    <option value="discover">Discover</option>
    <option value="amex">Amex</option>
    <option value="diners">Diners Club</option>
  </select>
  <br />
  <input type="submit" />
</form>

Then we can write:

const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
  const formData = new FormData(form)
  for (const pair of formData.entries()) {
    console.log(pair)
  }
})

to listen to the submit event of the form and get the value when we submit.

We first get the form element with document.querySelector .

Then we call addEventListener to add the submit event listener to the form.

The 2nd argument of addEventListener is the submit event listener.

We call e.preventDefault to prevent the default submit behavior so we can do client-side form submission.

Then we create the formData object with the FormData constructor with the form as the argument to get the form data values.

And then we call formData.entries to get an array of form data key-pair pairs.

Then pair should be something like:

["cctextbox", "aa"]
["cardtype", "visa"]

where the first entry if the name attribute value and the 2nd entry is the entered value.

The scrollHeight property of the text area element has the full height of the content in pixels.

Therefore, we just need to set the height of the text area to the scroll height to set the height of the text area to wrap around all the content of the text area.

For instance, if we have the following HTML:

<textarea></textarea>

Then we can get the text area and then set the height to the scroll height by writing:

const textarea = document.querySelector('textarea')
textarea.addEventListener('keyup', () => {
  textarea.style.height = `${textarea.scrollHeight}px`;
})

We get the text area with document.querySelector .

Then we call addEventListener with 'keyup' as the first argument to add a keyup listener for the text area.

In the event listener, we set the style.height to textarea.scrollHeight to set the height of the text area to the height of the content inside.

We should remember to include the unit so that the height will be set.

Now when we type into the text area, it’ll resize the height to wrap around all the content.

Sometimes, we want to check if an image exists on the server with JavaScript.

In this article, we’ll look at how to check if an image exists on the server with JavaScript.

Listen to the Image error Event

We can listen to the error event trigger by the image element when the image fails to load to check whether there’s any errors trigger from loading the image from the server.

For instance, we can write:

const image = new Image();

image.onload = () => {
  document.body.appendChild(image);
}
image.onerror = () => {
  const err = new Image();
  err.src = 'https://i.picsum.photos/id/918/200/300.jpg?hmac=1gEvFp6O-XDh4848VnlwyOIrVy8s_aJNhYyTzxN9_JA';
  document.body.appendChild(err);
}

image.src = "abc";

We use the Image constructor to create an image DOM element object.

Then we set the img.onload property to a function that runs when the image loads successfully.

In the function, we call document.body.appendChild to add the image to the body element.

Next, we set the img.onerror property to a function that runs when the original image fails to load.

In the function, we create a new Image instance and set the src to an image that we load in case the original one fails to load.

Finally, we set image.src to an invalid URL so the onerror method runs and loads the fallback image.

Conclusion

We can listen to the error event of an image to see when the original image we’re loading fails to load.

Sometimes, we want to programmatically trigger a change event on an input element with JavaScript.

In this article, we’ll look at how to programmatically trigger a change event on an input element with JavaScript.

Use the dispatchEvent Method

We can use the dispatchEvent method on an element to trigger an event programmatically.

For instance, if we have the following HTML:

<input>

We can write:

const element = document.querySelector('input');  
element.addEventListener('change', () => console.log('change'))  
const event = new Event('change');  
element.dispatchEvent(event);

to trigger the change event on an input.

We get the input with document.querySelector .

Then we add a change event listener with the addEventListener method.

Then we create a new event with the Event constructor.

'change' sets it to create the change event.

And then we call element.dispatchEvent to trigger the event we created.

Therefore, we should see 'change' logged from the change event listener.

Conclusion

We can trigger the change event programmatically on an input element with the Event constructor.

Then we can call the dispatchEvent method to dispatch the event.