S Hu S Hu - 1 month ago 13
Javascript Question

HTML Dropdown - Error Message

I currently have a working HTML dropdown option, with a submit button that displays text based upon the options selected (Thanks to SO member Paul Redmond for creating it).

<label for="car">Car</label>
<select id="car">
<option value="Ford">Ford</option>
<option value="Fiat">Fiat</option>
<option value="Volvo">Volvo</option>
</select>

<label for="engine">Engine</label>
<select id="engine">
<option value="1.4 Petrol">1.4 Petrol</option>
<option value="1.6 Petrol">1.6 Petrol</option>
<option value="2.0 TDI">2.0 TDI</option>
</select>

<button id="process">Update</button>

<p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p>


CodePen Link:
http://codepen.io/paulcredmond/pen/jrdowR

I was wondering how I can hide the text at the bottom of the HTML file and only display it once the user presses 'Update'.

I was also wondering how I can add an IF statement to the JS code, so that if one or both dropdown is not used/selected then it would prompt the user by editing the text at the bottom of the HTML code.

My apologies if the answer is very obvious, I have very limited knowledge of HTML and JS and my efforts throughout the morning seemed futile.

Thanks for reading and thanks for any guidance.

Edit (Update):

Here is my attempt at editing the JS, but i'm not too sure on how to remove the block of HTML text and simply display the text from my IF statement.

$('#process').on('click', function() {
var car = $('#car :selected').text();
var engine = $('#engine :selected').text();
if (car == "Ford"){
$('p .car').text("Error");
$('p .engine').text("Error");
} else{
$('p .car').text(car);
$('p .engine').text(engine);
}
});

Answer

I have managed to get a workaround for this, it:

1.) Displays the text below only when the button is pressed.

2.) Hides the text if a specific value is selected from the dropdown box and should instead display an error message.

HTML Code:

<!--Credit to StackOverflow member Paul Redmond-->
<label for="car">Car</label>
<select id="car">
  <option value="Ford">Ford</option>
  <option value="Fiat">Fiat</option>
  <option value="Volvo">Volvo</option>
</select>

<label for="engine">Engine</label>
<select id="engine">
  <option value="1.4 Petrol 1.4">1.4 Petrol1</option>
  <option value="1.6 Petrol">1.6 Petrol</option>
  <option value="2.0 TDI">2.0 TDI</option>
</select>

<button id="process">Update</button>



<a id="displayText" style="display: none"><p>Please Select Another Option</p></a>
<div id="toggleText" style="display: none"><h1><p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p></h1></div>

JS Code

$('#process').on('click', function() {
  var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
  var car = $('#car :selected').text();
  var engine = $('#engine :selected').text();

  if (car == "Fiat"){
  ele.style.display = "none";
  text.style.display = "block";
  } else{
  ele.style.display = "block";
  text.style.display = "none";
  $('p .car').text(car);
  $('p .engine').text(engine);
  }
});

Please let me know if there is a simpler way to achieve this or if there is error that you spot.