How can I prevent submit if selected options are empty?

Question

I'm trying to prevent submiting using an Onclick event (with javascript) if any of selected menus are empty. Maybe displaying an alert. Is it possible?

<select name="form1" form="my_form">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

<select name="form2" form="my_form">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

<form id="my_form" method="post" action="selections.php">
    <input type="submit" value="Send">
</form>

You can check if the values are false then in the submit event listener run `event.preventDefault()` so it doesn't submit — VirxEC, Feb 06 '20 at 14:31
Maybe have a look at [this](https://stackoverflow.com/a/21017888/12852291). Maybe this fits your question sort of. — Michael Holley, Feb 06 '20 at 14:36

stefanowiczp · Accepted Answer · 2020-02-06T15:30:40.210

5

Proposed solution

The most convenient way is to use HTML form validations handled by a browser (required) as mentioned by epascarello

Unfortunately, your selects has the first option as the default. You can just add a placeholder option with no value. That will prevent submitting the form without selecting.

If you don't want to display it you can hide this option for the user. Second select in the example.

Third input added to answer your question in the comment. No value means it will be content of <option> tag be the default. It would only work if you have no text in this option.

<form id="my_form">
    <select required name="form1" form="my_form">
        <option value>Placeholder</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
    </select>

    <select required name="form2" form="my_form">
        <option hidden disabled selected value>Choose an option</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
    </select>

    <select required name="form3" form="my_form">
        <option>I'm the value if none set</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
    </select>


    <input type="submit" value="Send">
</form>

edited Feb 06 '20 at 15:30

answered Feb 06 '20 at 15:03

stefanowiczp

475
5
13

1

This is everything I was looking for. Thank you to give the right credits. I don't see the reason of "value" attribute at the hidden placeholder, though. Is there any special reason to do that? – Alan Fabricio Feb 06 '20 at 15:23
1

It is equivalent of `value=""`. If you don't set any value, the value will be the same as the text that is between `` – stefanowiczp Feb 06 '20 at 15:27
1

I see now. Thanks! – Alan Fabricio Feb 06 '20 at 15:28
Does the attribute title within – Alan Fabricio Feb 06 '20 at 16:14
There is no such attribute for ` – stefanowiczp Feb 06 '20 at 19:12
I just reminded that it was a jQuery plugin that I was using. Highly recommended, though: https://developer.snapappointments.com/bootstrap-select – Alan Fabricio Feb 07 '20 at 12:40

score 0 · Answer 2 · answered Feb 06 '20 at 14:37

I would use an id for your submit button:

<input type="submit" value="Send" id="submitButton" disabled>

Afterwards just create a function for your options:

    function onItemSelected() {
       var selectedItem1 = document.getElementByName("form1").selectedIndex;
       var selectedItem2 = document.getElementByName("form2").selectedIndex;
       if (selectedItem1 && selectedItem2) {
         document.getElementById('submitButton').disabled = false;
       } else {
             document.getElementById('submitButton').disabled = true;
          }
        }

You have to call the onItemSelected in each select input: For example:

<select name="form2" form="my_form" (onchange)="onItemSelected()">

I made work like this but had to do some different stuff. First I took off the parenthesis from "onchange" to call the event properly. Afterwards I used getElementById within the function instead of getElementByName and added de corresponding ID's inside the — Alan Fabricio, Feb 06 '20 at 15:17

score 0 · Answer 3 · answered Feb 06 '20 at 14:45

0

Yes, you can prevent submitting the form if menu are empty using required property in in select tag.

answered Feb 06 '20 at 14:45

Ashish

410
2
11

score 0 · Answer 4 · answered Feb 06 '20 at 14:50

0

is it normal that your select inputs are not in your 'form' tag? in which case would they be empty? because 'option 1' is selected by default

answered Feb 06 '20 at 14:50

Matthieu kwant

33
7

Yes. The reason for that is that I need to pass values from multiple select forms. To make that possible, I'm using the attribute form="my_form" inside – Alan Fabricio Feb 06 '20 at 14:55

score 0 · Answer 5 · answered Feb 06 '20 at 15:14

var selectElts = document.getElementsByTagName('select');
var formElt = document.getElementById('my_form');

formElt.addEventListener('submit', function(e) {
  // stop the form submission
  e.preventDefault();
  var error = 0;

  // Check all select menus
  for (var i = 0; i < selectElts.length; i++) {
    // Check if current input's value is empty
    if (selectElts[i].value.trim() === '') {
      error = error + 1;
      alert(selectElts[i].name + ' is empty');
    }
  }

  // if there are no errors, then we submit the form
  if (error === 0) {
    formElt.submit();
  } 
});

How can I prevent submit if selected options are empty?

5 Answers5

Proposed solution