I have a form. When a user clicks a list item and selects a "size value", it is given a class of selected, and then the user can submit the form.

The part that I'm trying to figure out is that when no size is selected (and thus no list item has a class of "selected") the form won't be submitted, and instead the error message shows. I'm having trouble getting this to work and the error message to show, as the form still just submits.

Currently I'm getting an error telling me that document.getElementById("errormessage").show() is not a function.

Does anyone know why this is happening? And can anyone help me with my code to get it to work the way I want to?

.on('click', '.modalAddToBagButton', function(e) {
  e.preventDefault();
  var x = document.getElementsByClassName("es-value");
  var i = x.length;
  var selected = false;
  while (i--) {
    if (x[i].hasAttribute("selected")) {
      selected = true;
    }
  }
  if (selected == false) {
    //Displays error
    document.getElementById("errormessage").show();
  } else {
    $(this).closest("#dialog-addToBag").find('form').submit();
  }
});

<form>
  <ul>
    <li>
      <ul>
        <li class="size-value"></li>
        <li class="size-value"></li>
        <li class="size-value"></li>
        <li class="size-value"></li>
      </ul>
    </li>
  </ul>
</form>
<div id="errormessage">Please select a size</div>
<div class="mt10">
  <input type="submit" class="modalAddToBagButton">
</div>

I have a form. When a user clicks a list item and selects a "size value", it is given a class of selected, and then the user can submit the form.

The part that I'm trying to figure out is that when no size is selected (and thus no list item has a class of "selected") the form won't be submitted, and instead the error message shows. I'm having trouble getting this to work and the error message to show, as the form still just submits.

Currently I'm getting an error telling me that document.getElementById("errormessage").show() is not a function.

Does anyone know why this is happening? And can anyone help me with my code to get it to work the way I want to?

.on('click', '.modalAddToBagButton', function(e) {
  e.preventDefault();
  var x = document.getElementsByClassName("es-value");
  var i = x.length;
  var selected = false;
  while (i--) {
    if (x[i].hasAttribute("selected")) {
      selected = true;
    }
  }
  if (selected == false) {
    //Displays error
    document.getElementById("errormessage").show();
  } else {
    $(this).closest("#dialog-addToBag").find('form').submit();
  }
});

<form>
  <ul>
    <li>
      <ul>
        <li class="size-value"></li>
        <li class="size-value"></li>
        <li class="size-value"></li>
        <li class="size-value"></li>
      </ul>
    </li>
  </ul>
</form>
<div id="errormessage">Please select a size</div>
<div class="mt10">
  <input type="submit" class="modalAddToBagButton">
</div>

• javascript
• jquery
• forms
• function
• if-statement

Share Improve this question Follow edited Jul 18, 2018 at 10:32 Brooke Holmes 1,6221414 silver badges3232 bronze badges asked Jul 18, 2018 at 10:03 KatherineMichelleKatherineMichelle 4531212 silver badges3030 bronze badges 4

• 2 Because native DOM elements do not have a show() function, you are thinking of a jQuery function – Patrick Evans Commented Jul 18, 2018 at 10:05
• .show() needs to be done on a jquery object use $('#errormessage') to get the element - getElementById is native js and will give you a dom object – Pete Commented Jul 18, 2018 at 10:05
• You should decide to either use jQuery or Javascript otherwise you'll keep making these mistakes... – Morgs Commented Jul 18, 2018 at 10:07
• provide your code via codepen or other similar coding tools – Staxaaaa Commented Jul 18, 2018 at 10:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You are mixing up Javascript and Jquery functions.

Update from

document.getElementById("errormessage").show();

to

$("#errormessage").show();

or

document.getElementById("errormessage").style.display = 'block';

Seems you want to jquery show method. For that you need jquery object. Replace document.getElementById("errormessage").show();

with

$("#errormessage").show();

show is a JQuery function. when using getElementById you get the javascript element, not the JQuery one. Use $('#errormessage') instead.

Better use native JS hidden attribute. In your HTML replace that line

<div id="errormessage">Please select a size</div>

with that

<div id="errormessage" hidden>Please select a size</div>

And than in JS

document.getElementById("errormessage").hidden = false;

For submit use

form.addEventListener("submit", callback);

form - your form element, also use

btn.addEventListener("click", callback);`

btn - your button, .closest() and '.find()' replace with el.querySelectorAll() and chain it in necessary order. Always cache your getElementByWhatever or querySelectors in var and reuse it. Also in your code it is no need to check every x[i].hasAttribute("selected") if it is at least one item with selected you can end your loop with break;.