samedi 30 juin 2018

Conditional form drop-downs and outputs

I created a form that produces a custom sentence based on a user's input. I want to make a conditional input thus leading to a conditional addition to the sentence. If the user selects "Okay" (id="z4") for the vehicle condition, I want the "Why?" (id="z5") dropdown menu to appear. Then after he or she selects one of the options from the "Why?" dropdown that is added to the sentence.

For example-

  1. The user inputs 2012 Honda Civic, 96,000, red, good. The output sentence is as follows: Up for sale is a 2012 Honda Civic with 96,000 miles. It is finished in red. It is in good shape.

  2. The user inputs 2012 Honda Civic, 96,000, red, okay, dents. The output sentence is as follows: Up for sale is a 2012 Honda Civic with 96,000 miles. It is finished in red. It is in okay shape because it has some dents.

Any ideas?

<!DOCTYPE html>
<html>

  <head>
        <title>Experiment</title>

        <style type="text/css">
  table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}
        </style>

        <script type="text/javascript">
  function sentence() {
    document.getElementById("s1").value = "";// reset
    document.getElementById("s1").style.display = "block";
    document.getElementById("r1").style.display = "block";
    if (document.getElementById("z1").value == "") {
      alert("Year, Make, and Model are needed");
      document.getElementById("z1").focus();
    } else if (document.getElementById("z2").value == "") {
      alert("Mileage is needed");
    } else if (document.getElementById("z3").value == "") {
      alert("Exterior color is needed");
    } else {
      const input1 = document.getElementById("z1").value;
      const input2 = document.getElementById("z2").value;
      const input3 = document.getElementById("z3").value;
      const input4 = document.getElementById("z4").value;

      document.getElementById("s1").value =
        "Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in "
        + input3 + ". It is in " + input4 + " shape.";

    }
  }

  function reset() {
    document.getElementById("s1").value = "";
  }

  function hide() {
    document.getElementById("s1").style.display = "none";
    document.getElementById("r1").style.display = "none";
  }
        </script>
  </head>

  <body onload="hide()">
    <table>
      <tr>
        <td> <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100"></td>
        <td> <input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100"></td>
        <td> <input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100"></td>
        <td> <select name="condition" id="z4"> <option value="" disabled selected>Condition</option> <option value="excellent">Excellent</option> <option value="good">Good</option> <option value="okay">Okay</option></select></td>
        <td> <select name="condition" id="z5"> <option value="" disabled selected>Why?</option> <option value="scratches">Scratches</option> <option value="dents">Dents</option> <option value="mechanical issues">Mechanical Issues</option></select></td>
    </table>
    <br>
    <div class="display">
      <button onclick="sentence()"> Submit </button>
    </div>
    <hr>
    <br>
    <textarea rows="10" cols="100" id="s1">

  </textarea>
    <br>

    <div class="display">
      <button onclick="reset()" id="r1">Reset</button>
    </div>

  </body>
</html>

Aucun commentaire:

Enregistrer un commentaire