Author: John Au-Yeung

Sometimes, we want to submit a file input without submit button using JavaScript.

In this article, we’ll look at how to submit a file input without submit button using JavaScript.

How to submit a file input without submit button using JavaScript?

To submit a file input without submit button using JavaScript, we can call the form element’s submit method.

For instance, we write:

<form enctype="multipart/form-data" method="POST" action="/upload">
  <input id="fileInput" type="file" name="file">
  <input type="submit">
</form>

to add a form.

Then we write:

const fileInput = document.getElementById('fileInput')
const form = document.querySelector('form')

fileInput.addEventListener('change', () => {
  form.submit();
});

to select the file input and form with document.getElementById and document.querySelector respectivelt.

Next, we call fileInput.addEventListener to add a change listener to the file input.

In the change listener, we call form.submit to submit the form.

Now when we select a file, the form submission will be done immediately.

Conclusion

To submit a file input without submit button using JavaScript, we can call the form element’s submit method.

Sometimes, we want to check if one number is a multiple of another with JavaScript.

In this article, we’ll look at how to check if one number is a multiple of another with JavaScript.

How to check if one number is a multiple of another with JavaScript?

To check if one number is a multiple of another with JavaScript, we can use the % operator check if one number divided by the other has a remainder of 0.

For instance, we write:

const x = 8
const y = 2
const remainder = x % y;
if (remainder === 0) {
  //x is a multiple of y
} else {
  //x is not a multiple of y
}

We get the remainder of x divided by y with the % operator and assign the returned remainder to remainder.

If remainder is 0, then xis a multiple ofy`.

Otherwise, x isn’t a multiple of y.

Conclusion

To check if one number is a multiple of another with JavaScript, we can use the % operator check if one number divided by the other has a remainder of 0.

Sometimes, we want to show a hidden div when a select option is selected with JavaScript.

In this article, we’ll look at how to show a hidden div when a select option is selected with JavaScript.

How to show a hidden div when a select option is selected with JavaScript?

To show a hidden div when a select option is selected with JavaScript, we can listen to the change event of the select element to get the option selected.

Then we can set the display CSS property of the element we want to show or hide according to the selected value.

For instance, we write:

<select id="select">
  <option value="0">No</option>
  <option value="1">Yes</option>
</select>

<div id="div" style="display: none;">
  Hello hidden content
</div>

to add a select element and a div to show or hide according to the selected drop down value.

Then we write:

const select = document.getElementById('select')
const div = document.querySelector('div')

select.addEventListener('change', (e) => {
  if (+e.target.value === 1) {
    div.style.display = 'block'
  } else {
    div.style.display = 'none'
  }
})

to show or hide the div when we select a new value in the drop down.

Then we use document.getElementById to select each element.

Next, we call select.addEventListener with 'change' and the change event listener to add a change event listener.

In the event listener, we check if e.target.value is 1 after it’s converted to a number.

If that’s true, we set div.style.display to 'block' to display it.

Otherwise, we set display.style.display to hide it.

Conclusion

To show a hidden div when a select option is selected with JavaScript, we can listen to the change event of the select element to get the option selected.

Then we can set the display CSS property of the element we want to show or hide according to the selected value.

Sometimes, we want to add a list item with JavaScript.

In this article, we’ll look at how to add a list item with JavaScript.

How to add a list item with JavaScript?

To add a list item with JavaScript, we can call the document.createElement method to create an li element.

Then we call appenddChild on the list with the li element object as the argument.

For instance, we write:

<ol id="demo"></ol>

to add the ol element.

Then we write:

const list = document.getElementById('demo');
const firstName = 'jane'
const entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstName));
list.appendChild(entry);

to select the ol element with document.getElementById.

Then we create the li element with document.createElement.

Next, we call document.createTextNode with firstName to create a text node with the text.

Then we call entry.appendChild to add the text node to the li.

Finally, we call list.appendChild with entry to add the li to the ol.

Now we should see:

1. jane

displayed.

Conclusion

To add a list item with JavaScript, we can call the document.createElement method to create an li element.

Then we call appenddChild on the list with the li element object as the argument.

Sometimes, we want to get the filename from a string path in JavaScript.

In this article, we’ll look at how to get the filename from a string path in JavaScript.

How to get the filename from a string path in JavaScript?

To get the filename from a string path in JavaScript, we can use the JavaScript string’s split method and the JavaScript array’s pop method.

For instance, we write:

const nameString = "/app/base/controllers/filename.js";
const fileName = nameString.split("/").pop();
console.log(fileName)

to call split on nameString with '/' to split the nameString path into segments.

Then we call pop to return the last entry from the split string.

Therefore, we should see that fileName is 'filename.js' according to the console log.

Conclusion

To get the filename from a string path in JavaScript, we can use the JavaScript string’s split method and the JavaScript array’s pop method.