HTML/Javascript - can't change style.display to none

Question

I'm trying for the first time to work with forms in HTML. But sadly, I have a problem that I'm unable to solve. I want to show specific form-rows at a specifically selected option. I can change the style to display: block, but a few form-rows are permanently displayed and I can change it to display: none to hide it.

Here a Video preview of the problem: https://www.youtube.com/watch?v=WmEKfAOR7A8

Or test it live here: https://bl4cklist.de/contact

My JS code for the display Thing:

function yesnoCheck() {

  // Allgemeine Fragen

  if (document.getElementById("yesCheck").selected) {
    document.getElementById("ifYes").style.display = "block";
    document.getElementById("ifYes1").style.display = "block";
    document.getElementById("ifYes2").style.display = "block";
    document.getElementById("ifYes3").style.display = "block";
    document.getElementById("ifYes4").style.display = "block";
    document.getElementById("ifYes5").style.display = "block";
    document.getElementById("formstart").scrollIntoView({
      behavior: 'smooth'
    });
  } else {
    document.getElementById("ifYes").style.display = "none";
    document.getElementById("ifYes1").style.display = "none";
    document.getElementById("ifYes2").style.display = "none";
    document.getElementById("ifYes3").style.display = "none";
    document.getElementById("ifYes4").style.display = "none";
    document.getElementById("ifYes5").style.display = "none";
  }

  // User-Report

  if (document.getElementById("yesCheck1").selected) {
    document.getElementById("ifYes").style.display = "none";
    document.getElementById("ifYes1").style.display = "none";
    document.getElementById("ifYes2").style.display = "none";
    document.getElementById("ifYes3").style.display = "none";
    document.getElementById("ifYes4").style.display = "none";
    document.getElementById("ifYes5").style.display = "none";
    document.getElementById("ifYes6").style.display = "block";
    document.getElementById("ifYes7").style.display = "block";
    document.getElementById("ifYes8").style.display = "block";
    document.getElementById("ifYes9").style.display = "block";
    document.getElementById("ifYes10").style.display = "block";
    document.getElementById("ifYes11").style.display = "block";
    document.getElementById("formstart").scrollIntoView({
      behavior: 'smooth'
    });
  } else {
    document.getElementById("ifYes6").style.display = "none";
    document.getElementById("ifYes7").style.display = "none";
    document.getElementById("ifYes8").style.display = "none";
    document.getElementById("ifYes9").style.display = "none";
    document.getElementById("ifYes10").style.display = "none";
    document.getElementById("ifYes11").style.display = "none";
  }

  // No Check

  if (document.getElementById("noCheck").selected) {
    document.getElementById("ifYes").style.display = "none";
    document.getElementById("ifYes1").style.display = "none";
    document.getElementById("ifYes2").style.display = "none";
    document.getElementById("ifYes3").style.display = "none";
    document.getElementById("ifYes4").style.display = "none";
    document.getElementById("ifYes5").style.display = "none";
  } else {
    document.getElementById("ifYes").style.display = "block";
    document.getElementById("ifYes1").style.display = "block";
    document.getElementById("ifYes2").style.display = "block";
    document.getElementById("ifYes3").style.display = "block";
    document.getElementById("ifYes4").style.display = "block";
    document.getElementById("ifYes5").style.display = "block";
  }
}

<div class="form-row">
  <div class="form-group col">
    <label class="mb-1 text-6"><img class="rounded" src="https://image.flaticon.com/icons/png/128/2222/2222355.png" height="30" width="30"> - Wie können wir dir helfen?</label>
    <div class="custom-select-1">

      <!-- Here is the JavaScript function started -->

      <select onchange="yesnoCheck(this);" class="form-control h-auto" name="city" required>
        <option id="noCheck" value="">Thema auswählen..</option>
        <option id="yesCheck" value="Allgemeine-Frage">📚 - Allgemeine Frage zu Bl4cklist</option>
        <option id="yesCheck1" value="User-Report">🚨 - Server-Mitglied verstößt gegen Regeln</option>
        <option id="yesCheck2" value="Entsperrungs-Antrag">🔐 - Mein Account wurde vom Server gesperrt</option>
      </select>
    </div>
  </div>
</div>

<!-- Allgemeine-Frage -->

<div class="form-row">
  <div class="form-group col-lg-6" id="ifYes" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Mein Name</label>
    <div class="position-relative">
      <i class="far fa-user-circle text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="text" value="" placeholder="Max Mustermann" maxlength="100" class="form-control text-3 h-auto py-2" name="name" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:97px;">
        <p>Trage ihn ein, damit wir dich persönlich ansprechen können.</p>
      </div>
    </div>
  </div>
  <div class="form-group col-lg-6" id="ifYes1" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Meine E-Mail Adresse</label>
    <div class="position-relative">
      <i class="far fa-paper-plane text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="email" value="" placeholder="[email protected]" maxlength="100" class="form-control text-3 h-auto py-2" name="email" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:175px;">
        <p>Trage hier deine E-Mail ein, damit wir dir antworten können.</p>
      </div>
    </div>
  </div>
</div>
<div class="form-row">
  <div class="form-group col-lg-6" id="ifYes2" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Überschrift</label>
    <div class="position-relative">
      <i class="far fa-edit text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="text" value="" placeholder="Frage zu eurem Support-Bot" maxlength="50" class="form-control text-3 h-auto py-2" name="subject" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:93px;">
        <p>Erkläre hier kurzgefasst worum es bei deinem Anliegen geht.</p>
      </div>
    </div>
  </div>
  <div class="form-group col-lg-6" id="ifYes3" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Thema deiner Frage</label>
    <div class="custom-select-1">
      <select class="form-control text-3 h-auto" name="city" maxlength="100" required>
        <option value="">Thema auswählen..</option>
        <option value="Webseite">Unsere Webseite</option>
        <option value="Discord-Bots">Unsere Discord-Bots</option>
        <option value="Discord-Server">Unser Discord-Server</option>
      </select>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes4" style="display: none;">
  <div class="form-group col">
    <label class="mb-1 text-4">Erkläre nun dein Anliegen..</label>
    <div class="position-relative">
      <i class="far fa-comment-dots text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <textarea maxlength="2000" rows="5" placeholder="Verfasse eine Nachricht.." class="form-control text-3 h-auto py-2" name="message" required style="padding:35px;"></textarea>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes5" style="display: none;">
  <div class="form-group col">
    <br />
    <input type="submit" name="finish1" value="Meine Frage abschicken" class="btn btn-primary btn-modern" data-loading-text="Laden..">
  </div>
</div>

<!-- User-Report -->

<div class="form-row">
  <div class="form-group col" id="ifYes6" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Mein Discord-Name
                                    <div class="help-tip" style="left:105px;"><p>Trage ihn ein, damit wir dich persönlich ansprechen können.</p></div>
                                </label>
    <input type="text" value="" placeholder="Max Mustermann" maxlength="100" class="form-control text-3 h-auto py-2" name="name" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes7" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Meine E-Mail Adresse
                                    <div class="help-tip" style="left:180px;"><p>Trage hier deine E-Mail ein, damit wir dir antworten können.</p></div>
                                </label>
    <input type="email" value="" placeholder="[email protected]" maxlength="100" class="form-control text-3 h-auto py-2" name="email" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes8" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Überschrift
                                    <div class="help-tip" style="left:105px;"><p>Erkläre hier kurzgefasst worum es bei deinem Anliegen geht.</p></div>
                                </label>
    <input type="text" value="" placeholder="Frage zu eurem Support-Bot" maxlength="50" class="form-control text-3 h-auto py-2" name="subject" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes9" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Thema deiner Frage</label>
    <div class="custom-select-1">
      <select class="form-control h-auto" name="city" maxlength="100" required>
        <option value="">Thema auswählen..</option>
        <option value="Webseite">Unsere Webseite</option>
        <option value="Discord-Bots">Unsere Discord-Bots</option>
        <option value="Discord-Server">Unser Discord-Server</option>
      </select>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes10" style="display: none;">
  <div class="form-group col">
    <label class="mb-1 text-4">Erkläre nun dein Anliegen..</label>
    <textarea maxlength="2000" rows="5" class="form-control text-3 h-auto py-2" name="message" required></textarea>
  </div>
</div>
<div class="form-row" id="ifYes11" style="display: none;">
  <div class="form-group col">
    <br />
    <input type="submit" name="finish1" value="Meine Frage abschicken" class="btn btn-primary btn-modern" data-loading-text="Laden..">
  </div>
</div>

When I look at the code "DRY" comes to my mind: "dont repeat yourself" ... — Carsten Massmann
– Carsten Massmann, Commented Apr 17, 2021 at 17:01
Hi! Please reduce the code in the question to a minimal reproducible example demonstrating the problem, using the Stack Snippet Barmar already started for you. More about Stack Snippets here. — T.J. Crowder
– T.J. Crowder, Commented Apr 17, 2021 at 17:02
Separately, I suggest using CSS classes, not manipulating the style of individual elements. The descendant selector is a powerful thing. — T.J. Crowder
– T.J. Crowder, Commented Apr 17, 2021 at 17:03
When I run your code it hides and shows different divs after selecting from the dropdown. I think the problem is with your if/then logic. You don't need 3 if/then, it should be if/else if/else if/else — Barmar
– Barmar, Commented Apr 17, 2021 at 17:08

Barmar · Accepted Answer · 2021-04-17 17:13:59Z

The problem is your logic.

When the user chooses the yesCheck option, you display all those DIVs. But then you also execute the else blocks for yesCheck1 and noCheck, which undoes some of its changes.

Since all the options are mutually exclusive, you should use else if to step through each choice, with a final else for the remaining choice.

function yesnoCheck() {

  // Allgemeine Fragen

  if (document.getElementById("yesCheck").selected) {
    document.getElementById("ifYes").style.display = "block";
    document.getElementById("ifYes1").style.display = "block";
    document.getElementById("ifYes2").style.display = "block";
    document.getElementById("ifYes3").style.display = "block";
    document.getElementById("ifYes4").style.display = "block";
    document.getElementById("ifYes5").style.display = "block";
    document.getElementById("formstart").scrollIntoView({
      behavior: 'smooth'
    });
  }

  // User-Report
  else if (document.getElementById("yesCheck1").selected) {
    document.getElementById("ifYes").style.display = "none";
    document.getElementById("ifYes1").style.display = "none";
    document.getElementById("ifYes2").style.display = "none";
    document.getElementById("ifYes3").style.display = "none";
    document.getElementById("ifYes4").style.display = "none";
    document.getElementById("ifYes5").style.display = "none";
    document.getElementById("ifYes6").style.display = "block";
    document.getElementById("ifYes7").style.display = "block";
    document.getElementById("ifYes8").style.display = "block";
    document.getElementById("ifYes9").style.display = "block";
    document.getElementById("ifYes10").style.display = "block";
    document.getElementById("ifYes11").style.display = "block";
    document.getElementById("formstart").scrollIntoView({
      behavior: 'smooth'
    });
  }

  // No Check
  else if (document.getElementById("noCheck").selected) {
    document.getElementById("ifYes").style.display = "none";
    document.getElementById("ifYes1").style.display = "none";
    document.getElementById("ifYes2").style.display = "none";
    document.getElementById("ifYes3").style.display = "none";
    document.getElementById("ifYes4").style.display = "none";
    document.getElementById("ifYes5").style.display = "none";
  }

  // Entsperrungs Antrag
  else {
    document.getElementById("ifYes").style.display = "block";
    document.getElementById("ifYes1").style.display = "block";
    document.getElementById("ifYes2").style.display = "block";
    document.getElementById("ifYes3").style.display = "block";
    document.getElementById("ifYes4").style.display = "block";
    document.getElementById("ifYes5").style.display = "block";
  }
}

<div class="form-row">
  <div class="form-group col">
    <label class="mb-1 text-6"><img class="rounded" src="https://image.flaticon.com/icons/png/128/2222/2222355.png" height="30" width="30"> - Wie können wir dir helfen?</label>
    <div class="custom-select-1">

      <!-- Here is the JavaScript function started -->

      <select onchange="yesnoCheck(this);" class="form-control h-auto" name="city" required>
        <option id="noCheck" value="">Thema auswählen..</option>
        <option id="yesCheck" value="Allgemeine-Frage">📚 - Allgemeine Frage zu Bl4cklist</option>
        <option id="yesCheck1" value="User-Report">🚨 - Server-Mitglied verstößt gegen Regeln</option>
        <option id="yesCheck2" value="Entsperrungs-Antrag">🔐 - Mein Account wurde vom Server gesperrt</option>
      </select>
    </div>
  </div>
</div>

<!-- Allgemeine-Frage -->

<div class="form-row">
  <div class="form-group col-lg-6" id="ifYes" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Mein Name</label>
    <div class="position-relative">
      <i class="far fa-user-circle text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="text" value="" placeholder="Max Mustermann" maxlength="100" class="form-control text-3 h-auto py-2" name="name" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:97px;">
        <p>Trage ihn ein, damit wir dich persönlich ansprechen können.</p>
      </div>
    </div>
  </div>
  <div class="form-group col-lg-6" id="ifYes1" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Meine E-Mail Adresse</label>
    <div class="position-relative">
      <i class="far fa-paper-plane text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="email" value="" placeholder="[email protected]" maxlength="100" class="form-control text-3 h-auto py-2" name="email" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:175px;">
        <p>Trage hier deine E-Mail ein, damit wir dir antworten können.</p>
      </div>
    </div>
  </div>
</div>
<div class="form-row">
  <div class="form-group col-lg-6" id="ifYes2" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Überschrift</label>
    <div class="position-relative">
      <i class="far fa-edit text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="text" value="" placeholder="Frage zu eurem Support-Bot" maxlength="50" class="form-control text-3 h-auto py-2" name="subject" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:93px;">
        <p>Erkläre hier kurzgefasst worum es bei deinem Anliegen geht.</p>
      </div>
    </div>
  </div>
  <div class="form-group col-lg-6" id="ifYes3" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Thema deiner Frage</label>
    <div class="custom-select-1">
      <select class="form-control text-3 h-auto" name="city" maxlength="100" required>
        <option value="">Thema auswählen..</option>
        <option value="Webseite">Unsere Webseite</option>
        <option value="Discord-Bots">Unsere Discord-Bots</option>
        <option value="Discord-Server">Unser Discord-Server</option>
      </select>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes4" style="display: none;">
  <div class="form-group col">
    <label class="mb-1 text-4">Erkläre nun dein Anliegen..</label>
    <div class="position-relative">
      <i class="far fa-comment-dots text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <textarea maxlength="2000" rows="5" placeholder="Verfasse eine Nachricht.." class="form-control text-3 h-auto py-2" name="message" required style="padding:35px;"></textarea>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes5" style="display: none;">
  <div class="form-group col">
    <br />
    <input type="submit" name="finish1" value="Meine Frage abschicken" class="btn btn-primary btn-modern" data-loading-text="Laden..">
  </div>
</div>

<!-- User-Report -->

<div class="form-row">
  <div class="form-group col" id="ifYes6" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Mein Discord-Name
                                    <div class="help-tip" style="left:105px;"><p>Trage ihn ein, damit wir dich persönlich ansprechen können.</p></div>
                                </label>
    <input type="text" value="" placeholder="Max Mustermann" maxlength="100" class="form-control text-3 h-auto py-2" name="name" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes7" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Meine E-Mail Adresse
                                    <div class="help-tip" style="left:180px;"><p>Trage hier deine E-Mail ein, damit wir dir antworten können.</p></div>
                                </label>
    <input type="email" value="" placeholder="[email protected]" maxlength="100" class="form-control text-3 h-auto py-2" name="email" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes8" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Überschrift
                                    <div class="help-tip" style="left:105px;"><p>Erkläre hier kurzgefasst worum es bei deinem Anliegen geht.</p></div>
                                </label>
    <input type="text" value="" placeholder="Frage zu eurem Support-Bot" maxlength="50" class="form-control text-3 h-auto py-2" name="subject" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes9" style="display: none;text-align: left;">
    <label class="mb-1 text-4">Thema deiner Frage</label>
    <div class="custom-select-1">
      <select class="form-control h-auto" name="city" maxlength="100" required>
        <option value="">Thema auswählen..</option>
        <option value="Webseite">Unsere Webseite</option>
        <option value="Discord-Bots">Unsere Discord-Bots</option>
        <option value="Discord-Server">Unser Discord-Server</option>
      </select>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes10" style="display: none;">
  <div class="form-group col">
    <label class="mb-1 text-4">Erkläre nun dein Anliegen..</label>
    <textarea maxlength="2000" rows="5" class="form-control text-3 h-auto py-2" name="message" required></textarea>
  </div>
</div>
<div class="form-row" id="ifYes11" style="display: none;">
  <div class="form-group col">
    <br />
    <input type="submit" name="finish1" value="Meine Frage abschicken" class="btn btn-primary btn-modern" data-loading-text="Laden..">
  </div>
</div>

yesCheck1 (User-Report) is now always displayed if i switch from "Thema auswählen.." to "Allgemeine-Frage" and than back to "Thema auswählen".
I don't know which DIVs are supposed to be shown in each case, I just copied those from your code. You're not updating the style of each one in all blocks. Fix those to do what you want.

Carsten Massmann · Accepted Answer · 2021-04-18 14:31:10Z

I did not touch your HTML (apart from removing the individual display:none style attributes) but shortened your script considerably. The information you should use to trigger actions is the value of your select element - not their id. These values can be "Allgemeine-Frage", User-Report,"" or "Entsperrungs-Antrag". For the last case I made up some elements to show as the information was missing in your snippet.

Now: depending on which selection was made I use a different CSS-selector for the document.querySelectorAll() call which will then make some of the further input fields visible again. As you can see: fewer repetitions and a clearer logic are the result.

function yesnoCheck(sel) {
  document.querySelectorAll(".show").forEach(d=>d.classList.remove("show"));
  document.getElementById("formstart").scrollIntoView({behavior:'smooth'});
  document.querySelectorAll(  
{ "Allgemeine-Frage"   :"#ifYes,#ifYes1,#ifYes2,#ifYes3,#ifYes4,#ifYes5",
  "User-Report"        :"#ifYes6,#ifYes7,#ifYes8,#ifYes9,#ifYes10,#ifYes11",
  "Entsperrungs-Antrag":"#ifYes,#ifYes1" }[sel.value]
  ).forEach(d=>d.classList.add("show"));
}

.show { display:block !important }
div[id^=ifYes] { display:none }

<p id="formstart" class="text-5 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="700">Fülle das untere Formular aus, um das Team zu kontaktieren.<br />Wir werden dir so schnell es geht professionell weiterhelfen.</p>
<div class="form-row">
  <div class="form-group col">
    <label class="mb-1 text-6"><img class="rounded" src="https://image.flaticon.com/icons/png/128/2222/2222355.png" height="30" width="30"> - Wie können wir dir helfen?</label>
    <div class="custom-select-1">

      <!-- Here is the JavaScript function started -->

      <select onchange="yesnoCheck(this);" class="form-control h-auto" name="city" required>
        <option id="noCheck" value="">Thema auswählen..</option>
        <option id="yesCheck" value="Allgemeine-Frage">📚 - Allgemeine Frage zu Bl4cklist</option>
        <option id="yesCheck1" value="User-Report">🚨 - Server-Mitglied verstößt gegen Regeln</option>
        <option id="yesCheck2" value="Entsperrungs-Antrag">🔐 - Mein Account wurde vom Server gesperrt</option>
      </select>
    </div>
  </div>
</div>

<!-- Allgemeine-Frage -->

<div class="form-row">
  <div class="form-group col-lg-6" id="ifYes" style="text-align: left;">
    <label class="mb-1 text-4">Mein Name</label>
    <div class="position-relative">
      <i class="far fa-user-circle text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="text" value="" placeholder="Max Mustermann" maxlength="100" class="form-control text-3 h-auto py-2" name="name" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:97px;">
        <p>Trage ihn ein, damit wir dich persönlich ansprechen können.</p>
      </div>
    </div>
  </div>
  <div class="form-group col-lg-6" id="ifYes1" style="text-align: left;">
    <label class="mb-1 text-4">Meine E-Mail Adresse</label>
    <div class="position-relative">
      <i class="far fa-paper-plane text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="email" value="" placeholder="[email protected]" maxlength="100" class="form-control text-3 h-auto py-2" name="email" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:175px;">
        <p>Trage hier deine E-Mail ein, damit wir dir antworten können.</p>
      </div>
    </div>
  </div>
</div>
<div class="form-row">
  <div class="form-group col-lg-6" id="ifYes2" style="text-align: left;">
    <label class="mb-1 text-4">Überschrift</label>
    <div class="position-relative">
      <i class="far fa-edit text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <input type="text" value="" placeholder="Frage zu eurem Support-Bot" maxlength="50" class="form-control text-3 h-auto py-2" name="subject" required style="padding:35px;">
      <div class="help-tip" style="top:-30px;left:93px;">
        <p>Erkläre hier kurzgefasst worum es bei deinem Anliegen geht.</p>
      </div>
    </div>
  </div>
  <div class="form-group col-lg-6" id="ifYes3" style="text-align: left;">
    <label class="mb-1 text-4">Thema deiner Frage</label>
    <div class="custom-select-1">
      <select class="form-control text-3 h-auto" name="city" maxlength="100" required>
        <option value="">Thema auswählen..</option>
        <option value="Webseite">Unsere Webseite</option>
        <option value="Discord-Bots">Unsere Discord-Bots</option>
        <option value="Discord-Server">Unser Discord-Server</option>
      </select>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes4" style="">
  <div class="form-group col">
    <label class="mb-1 text-4">Erkläre nun dein Anliegen..</label>
    <div class="position-relative">
      <i class="far fa-comment-dots text-color-primary text-3 position-absolute left-10 top-50pct transform3dy-n50"></i>
      <textarea maxlength="2000" rows="5" placeholder="Verfasse eine Nachricht.." class="form-control text-3 h-auto py-2" name="message" required style="padding:35px;"></textarea>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes5" style="">
  <div class="form-group col">
    <br />
    <input type="submit" name="finish1" value="Meine Frage abschicken" class="btn btn-primary btn-modern" data-loading-text="Laden..">
  </div>
</div>

<!-- User-Report -->

<div class="form-row">
  <div class="form-group col" id="ifYes6" style="text-align: left;">
    <label class="mb-1 text-4">Mein Discord-Name
                                    <div class="help-tip" style="left:105px;"><p>Trage ihn ein, damit wir dich persönlich ansprechen können.</p></div>
                                </label>
    <input type="text" value="" placeholder="Max Mustermann" maxlength="100" class="form-control text-3 h-auto py-2" name="name" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes7" style="text-align: left;">
    <label class="mb-1 text-4">Meine E-Mail Adresse
                                    <div class="help-tip" style="left:180px;"><p>Trage hier deine E-Mail ein, damit wir dir antworten können.</p></div>
                                </label>
    <input type="email" value="" placeholder="[email protected]" maxlength="100" class="form-control text-3 h-auto py-2" name="email" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes8" style="text-align: left;">
    <label class="mb-1 text-4">Überschrift
                                    <div class="help-tip" style="left:105px;"><p>Erkläre hier kurzgefasst worum es bei deinem Anliegen geht.</p></div>
                                </label>
    <input type="text" value="" placeholder="Frage zu eurem Support-Bot" maxlength="50" class="form-control text-3 h-auto py-2" name="subject" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col" id="ifYes9" style="text-align: left;">
    <label class="mb-1 text-4">Thema deiner Frage</label>
    <div class="custom-select-1">
      <select class="form-control h-auto" name="city" maxlength="100" required>
        <option value="">Thema auswählen..</option>
        <option value="Webseite">Unsere Webseite</option>
        <option value="Discord-Bots">Unsere Discord-Bots</option>
        <option value="Discord-Server">Unser Discord-Server</option>
      </select>
    </div>
  </div>
</div>
<div class="form-row" id="ifYes10" style="">
  <div class="form-group col">
    <label class="mb-1 text-4">Erkläre nun dein Anliegen..</label>
    <textarea maxlength="2000" rows="5" class="form-control text-3 h-auto py-2" name="message" required></textarea>
  </div>
</div>
<div class="form-row" id="ifYes11" style="">
  <div class="form-group col">
    <br />
    <input type="submit" name="finish1" value="Meine Frage abschicken" class="btn btn-primary btn-modern" data-loading-text="Laden..">
  </div>
</div>

Thanks! Btw, you forgot to add the smooth scrolling to the javascript code.
Well, you didn't provide the <p id="formstart"> in your question code but I grabbed it now from your page and put it into my answer for completeness. ;-)
Small another question, how can i create a website redirect to the "Entbannungs-Antrag" option?

Collectives™ on Stack Overflow

HTML/Javascript - can't change style.display to none

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related