vendredi 24 août 2018

responsive html form based on user input

I am trying to set up a form that has different options available based on other selected options. Here is my code as it stands now:

<html>
    <head>
    <form action="file:///.../action_page.php">
      <p>Select Model</p>
        <input type="radio" name="model" value="A" checked> Model A<br>
        <input type="radio" name="model" value="B"> Model B<br>
        <p>Select Reel</p>
        <input type="radio" name="reel" value="single" checked> Single Reel<br>
        <input type="radio" name="reel" value="dual" checked> Dual Reel<br>
        <p>Select Engine</p>
        <input type="radio" name="engine" value="ford" checked> Ford<br>
        <input type="radio" name="engine" value="cat" checked> Cat<br>
      <p>Select Water</p>
      <!--here i want to add the following...
      if engine = "ford" then
        <input type="radio" name="water" value="on" checked>water<br><br>
      else
        <input type="radio" name="water" value="off" checked>water<br>
        <input type="radio" name="water" value="on" checked>water<br>
      end if
      ...-->
      <br><p>To send to engineering, click submit</p>
        <input type="submit" value="Submit">
    </form>
  </head>
</html>

I have an input where the user can select either a ford engine or a cat engine. What I want to have happen is if the radio button is selected for ford, then the option for water is on. If the engine is anything else, the option for water is off or on. To be clear, I want this form to be responsive, I don't want the user to have to select a submit button in order to run a script.

My question is two-fold. Can this be done strictly with html or must I use javascript or php. What is the most straight forward way to do it?

Aucun commentaire:

Enregistrer un commentaire