{"id":17874607,"date":"2024-07-08T05:25:19","date_gmt":"2024-07-08T05:25:19","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/conditional-elements\/"},"modified":"2024-07-08T05:25:19","modified_gmt":"2024-07-08T05:25:19","slug":"conditional-elements","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/conditional-elements\/","title":{"rendered":"Conditional Elements"},"content":{"rendered":"\n

I’m trying to create conditional forms but my implementation doesn’t look pretty.<\/p>\n\n\n\n

I want a \u201cDropdown\u201d field to work like this:<\/p>\n\n\n\n

The dropdown field chooses the number of people 1,2,3,4\u2026..<\/p>\n\n\n\n

When you select 1 person, some fields should appear to fill out for this person<\/p>\n\n\n\n

When 2 people are selected, the fields for the first person + the fields for the second person should appear<\/p>\n\n\n\n

And so on\u2026<\/p>\n\n\n\n

I have it working this way but the problem is that I have a lot of duplicate code and when the emails arrive from those who fill out the form it is very confusing.<\/p>\n\n\n\n

I ask for any advice or solution please.<\/p>\n\n\n\n

<div>
  <label for=\"form-NUMBER_OF_PERSONS\">number of people<\/label>
  <select name=\"PERSONS\" id=\"form-NUMBER_OF_PERSONS\">
    <option name=\"PERSONS\" value=\"1\">1<\/option>
    <option name=\"PERSONS\" value=\"2\">2<\/option>
    <option name=\"PERSONS\" value=\"3\">3<\/option>
    <!-- More people... -->
  <\/select>
<\/div>

<div>
  <div data-show-if=\"PERSONS:1\">
    <div>
      <div>Diver 1<\/div>
      <div>
        <label for=\"dive-form-HOW_MANY_DIVES\"
          >How many logged dives do you have?
        <\/label>
        <div>
          <input
            type=\"number\"
            name=\"HOW_MANY_DIVES\"
            id=\"dive-form-HOW_MANY_DIVES\"
          \/>
        <\/div>
      <\/div>
      <div>
        <label for=\"dive-form-HOW_OLD_ARE_YOU\">How old are you? <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU\" type=\"radio\" value=\"0-12\" \/>
          <span>0-12<\/span>
        <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU\" type=\"radio\" value=\"13-17\" \/>
          <span>13-17<\/span>
        <\/label>
      <\/div>
      <div>
        <label for=\"dive-form-WHEN_LAST_DIVE\"
          >When was your last dive day?<\/label
        >
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"0-3 months\" \/>
          <span>0-3 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"3-6 months\" \/>
          <span>3-6 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"6-12 months\" \/>
          <span>6-12 months<\/span>
        <\/label>
      <\/div>
    <\/div>
  <\/div>
  <div data-show-if=\"PERSONS:2\">
    <div>
      <div>Diver 1<\/div>
      <div>
        <label for=\"dive-form-HOW_MANY_DIVES\"
          >How many logged dives do you have?
        <\/label>
        <div>
          <input
            type=\"number\"
            name=\"HOW_MANY_DIVES\"
            id=\"dive-form-HOW_MANY_DIVES\"
          \/>
        <\/div>
      <\/div>
      <div>
        <label for=\"dive-form-HOW_OLD_ARE_YOU\">How old are you? <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU\" type=\"radio\" value=\"0-12\" \/>
          <span>0-12<\/span>
        <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU\" type=\"radio\" value=\"13-17\" \/>
          <span>13-17<\/span>
        <\/label>
      <\/div>
      <div>
        <label for=\"dive-form-WHEN_LAST_DIVE\"
          >When was your last dive day?<\/label
        >
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"0-3 months\" \/>
          <span>0-3 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"3-6 months\" \/>
          <span>3-6 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"6-12 months\" \/>
          <span>6-12 months<\/span>
        <\/label>
      <\/div>
    <\/div>
    <div>
      <div>Diver 2<\/div>
      <div>
        <label for=\"dive-form-HOW_MANY_DIVES2\"
          >How many logged dives do you have?
        <\/label>
        <div>
          <input type=\"number\" name=\"HOW_MANY_DIVES2\" \/>
        <\/div>
      <\/div>
      <div>
        <label for=\"dive-form-HOW_OLD_ARE_YOU2\">How old are you? <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU2\" type=\"radio\" value=\"0-12\" \/>
          <span>0-12<\/span>
        <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU2\" type=\"radio\" value=\"13-17\" \/>
          <span>13-17<\/span>
        <\/label>
      <\/div>
      <div>
        <label for=\"dive-form-WHEN_LAST_DIVE2\"
          >When was your last dive day?<\/label
        >
        <label>
          <input name=\"WHEN_LAST_DIVE2\" type=\"radio\" value=\"0-3 months\" \/>
          <span>0-3 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE2\" type=\"radio\" value=\"3-6 months\" \/>
          <span>3-6 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE2\" type=\"radio\" value=\"6-12 months\" \/>
          <span>6-12 months<\/span>
        <\/label>
      <\/div>
    <\/div>
  <\/div>

  <div data-show-if=\"PERSONS:3\">
    <div>
      <div>Diver 1<\/div>
      <div>
        <label for=\"dive-form-HOW_MANY_DIVES\"
          >How many logged dives do you have?
        <\/label>
        <div>
          <input
            type=\"number\"
            name=\"HOW_MANY_DIVES\"
            id=\"dive-form-HOW_MANY_DIVES\"
          \/>
        <\/div>
      <\/div>
      <div>
        <label for=\"dive-form-HOW_OLD_ARE_YOU\">How old are you? <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU\" type=\"radio\" value=\"0-12\" \/>
          <span>0-12<\/span>
        <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU\" type=\"radio\" value=\"13-17\" \/>
          <span>13-17<\/span>
        <\/label>
      <\/div>
      <div>
        <label for=\"dive-form-WHEN_LAST_DIVE\"
          >When was your last dive day?<\/label
        >
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"0-3 months\" \/>
          <span>0-3 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"3-6 months\" \/>
          <span>3-6 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE\" type=\"radio\" value=\"6-12 months\" \/>
          <span>6-12 months<\/span>
        <\/label>
      <\/div>
    <\/div>
    <div>
      <div>Diver 2<\/div>
      <div>
        <label for=\"dive-form-HOW_MANY_DIVES2\"
          >How many logged dives do you have?
        <\/label>
        <div>
          <input type=\"number\" name=\"HOW_MANY_DIVES2\" \/>
        <\/div>
      <\/div>
      <div>
        <label for=\"dive-form-HOW_OLD_ARE_YOU2\">How old are you? <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU2\" type=\"radio\" value=\"0-12\" \/>
          <span>0-12<\/span>
        <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU2\" type=\"radio\" value=\"13-17\" \/>
          <span>13-17<\/span>
        <\/label>
      <\/div>
      <div>
        <label for=\"dive-form-WHEN_LAST_DIVE2\"
          >When was your last dive day?<\/label
        >
        <label>
          <input name=\"WHEN_LAST_DIVE2\" type=\"radio\" value=\"0-3 months\" \/>
          <span>0-3 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE2\" type=\"radio\" value=\"3-6 months\" \/>
          <span>3-6 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE2\" type=\"radio\" value=\"6-12 months\" \/>
          <span>6-12 months<\/span>
        <\/label>
      <\/div>
    <\/div>
    <div>
      <div>Diver 3<\/div>
      <div>
        <label for=\"dive-form-HOW_MANY_DIVES3\"
          >How many logged dives do you have?
        <\/label>
        <div>
          <input type=\"number\" name=\"HOW_MANY_DIVES3\" \/>
        <\/div>
      <\/div>
      <div>
        <label for=\"dive-form-HOW_OLD_ARE_YOU3\">How old are you? <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU3\" type=\"radio\" value=\"0-12\" \/>
          <span>0-12<\/span>
        <\/label>
        <label>
          <input name=\"HOW_OLD_ARE_YOU3\" type=\"radio\" value=\"13-17\" \/>
          <span>13-17<\/span>
        <\/label>
      <\/div>
      <div>
        <label for=\"dive-form-WHEN_LAST_DIVE3\"
          >When was your last dive day?<\/label
        >
        <label>
          <input name=\"WHEN_LAST_DIVE3\" type=\"radio\" value=\"0-3 months\" \/>
          <span>0-3 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE3\" type=\"radio\" value=\"3-6 months\" \/>
          <span>3-6 months<\/span>
        <\/label>
        <label>
          <input name=\"WHEN_LAST_DIVE3\" type=\"radio\" value=\"6-12 months\" \/>
          <span>6-12 months<\/span>
        <\/label>
      <\/div>
    <\/div>
  <\/div>
  <!-- More people... -->
<\/div>

<div>
  <input type=\"submit\" value=\"Send\" \/>
<\/div><\/code><\/pre>\n","protected":false},"template":"","class_list":["post-17874607","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17874607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17874607\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=17874607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}