CODEWITHSUNDEEP
javascriptjquery
andrewlundy_
andrewlundy_

Reputation: 1143

How to reset error message after button has been pressed?

I'm currently learning JavaScript and I'm working on a mock pet adoption site. Super simple layout and functionality except for one issue. I have an error message that comes up when the 'submit' button is pressed and the user tries to submit a pet for adoption without clicking the 'terms and conditions' box. The error comes up, but if I click the button again (without checking the terms and conditions check box), it's like the error just appends another error message.

I am trying to get it where it won't create another error message. I have tried setting the alertMessage variable to an empty string at the end of the function in hopes of it resetting itself, but this does not work.

Thank you in advance for all of your help. 

$('#add-pet').on('click', function() {

  if (termsBox.checked) {
  // Grab info from the form
  let $name = $('#pet-name');
  let $species = $('#pet-species');
  let $notes = $('#pet-notes');

  // Assemble the HTML of our new element with the above variables
  let $newPet = $(
    '<section class="six columns"><div class="card"><p><strong>Name:</strong> ' + $name.val() +
    '</p><p><strong>Species:</strong> ' + $species.val() + 
    '</p><p><strong>Notes:</strong> ' + $notes.val() + 
    '</p><span class="close">&times;</span></div></section>'
  );
  // Attach the element to the page
  $('#posted-pets').append($newPet);

  // Make the 'x' in the corner remove the section it's contained within
  $('.close').on('click', function() {
      $(this).parents('section').remove();
  });

  // Reset form fields
  $name.val('');
  $species.val('Dog');
  $notes.val('');

  } else {
    let br = document.createElement('BR');
    let alertMessage = document.createTextNode('Please read the terms and conditions.');
    let span = document.createElement('SPAN');
    span.style.color = '#FF0000';
    span.appendChild(alertMessage);
    let termsLabel = document.getElementById('termsLabel');
    termsLabel.appendChild(br);
    termsLabel.appendChild(span);
    alertMessage = '';
  }
});

Upvotes: 0

Views: 179

Answers (3)

dhilt
dhilt

Reputation: 20754

The easiest way is to use innerHTML DOM element property to clean up node's content:

else {
    let br = document.createElement('BR');
    let alertMessage = document.createTextNode('Please read the terms and conditions.');
    let span = document.createElement('SPAN');
    span.style.color = '#FF0000';
    span.appendChild(alertMessage);
    let termsLabel = document.getElementById('termsLabel');
    termsLabel.innerHTML = ''; // this removes previous content of the node including all it's children
    termsLabel.appendChild(br);
    termsLabel.appendChild(span);
  }

But I would use just:

else {
  let termsLabel = document.getElementById('termsLabel');
  termsLabel.innerHTML = 'Please read the terms and conditions.';
}

And all styles for termsLabel element should be declared via CSS in a way like

#termsLabel {
  margin-top: 15px;
  color: red;
}

UPD Here's the fiddler satisfying new requirements: https://jsfiddle.net/yy1z75e7/2/

Upvotes: 1

Patrick Evans
Patrick Evans

Reputation: 42736

Clear the element before appending the alert messages

termsLabel.innerHTML = '';
termsLabel.appendChild(br);
termsLabel.appendChild(span);

Or when creating the span give it a class or id, and then check termsLabel to see if it already has the span. If it doesn't then create it, otherwise don't do anything.

//cache this so you don't keep needing to call it over and over
let termsLabel = document.getElementById('termsLabel');

//querySelector() will return null if the span isn't in termsLabel
if(!termsLabel.querySelector('.errorMessage')){
  let br = document.createElement('BR');
  let alertMessage = document.createTextNode('Please read the terms and conditions.');
  let span = document.createElement('SPAN');
  span.style.color = '#FF0000';
  span.classList.add("errorMessage");
  span.appendChild(alertMessage);
  termsLabel.appendChild(br);
  termsLabel.appendChild(span);
}

This also gives you the ability to remove the message as well

document.querySelector('.errorMessage').remove()

Upvotes: 1

8bit
8bit

Reputation: 597

Every time you click the button, and the code in the else clause executes, you are creating new elements. What you want to do instead is to check if the element, termsLabel lets say, is created first, and if it is then change its innerHtml or text values, and if it isn't then create the element instead.

Upvotes: 0

Related Questions