Toggle Divs in a Form with Buttons - WIthout the Buttons Submitting the Form

Question

The title more-or-less describes my issue.

I can get the divs to toggle on button click...but then every button click submits the form. I've read that adding a 'type="button"' to the button alleviates that, but it doesn't.

I'm using this to toggle the divs:

function togglediv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}

And the buttons look like this:

<button type="button" onclick="togglediv('stocking')" class="fusion-button button-default button-large">Stocking/Non-Stocking</button>
<button type="button" onclick="togglediv('address')" class="fusion-button button-default button-large">Address</button>
<button type="button" onclick="togglediv('phone')" class="fusion-button button-default button-large">Phone Number</button>
<button type="button" onclick="togglediv('website')" class="fusion-button button-default button-large">Dealer Website</button>

Here's the whole thing: http://jsfiddle.net/crossbeats/owek6t54/

Answer 1

The code is working in stackoverflow snippet. Might me some issue with jsfiddle javascript import because If You add your function at the bottom of the HTML file in tag then It'll work. Your code is correct.

 function togglediv(id) { var div = document.getElementById("stocking"); div.style.display = div.style.display == "none" ? "block" : "none"; } 

 <form action="https://docs.google.com/forms/d/1J12Y6xfoiylpwkO53RgPK_Z7zZpwEp6gyuy4J2Oqk5A/formResponse" method="POST" id="ss-form" target="_self" onsubmit="submitted=true;"> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-item-required ss-select"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_670683565"><div class="ss-q-title">Distributor <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label> <span class="ss-required-asterisk" aria-hidden="true">*</span></div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <select name="entry.670683565" id="entry_670683565" aria-label="Distributor" aria-required="true" required class="form-control"><option value=""></option> <option value="EWI">EWI</option> <option value="GC Duke">GC Duke</option> <option value="KPM">KPM</option> <option value="OWI">OWI</option> <option value="PACE">PACE</option></select> </div></div></div> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-item-required ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_777900997"><div class="ss-q-title">Dealer&#39;s Full Name <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label> <span class="ss-required-asterisk" aria-hidden="true">*</span></div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.777900997" value="" class="ss-q-short form-control" id="entry_777900997" dir="auto" aria-label="Dealer&#39;s Full Name " aria-required="true" required="" title=""> <div class="error-message" id="646587772_errorMessage"></div> </div></div></div> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-item-required ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_991155156"><div class="ss-q-title">Your Name <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label> <span class="ss-required-asterisk" aria-hidden="true">*</span></div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.991155156" value="" class="ss-q-short form-control" id="entry_991155156" dir="auto" aria-label="Your Name " aria-required="true" required="" title=""> <div class="error-message" id="99132747_errorMessage"></div> </div></div></div> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-item-required ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_564013658"><div class="ss-q-title">Your Contact Phone Number <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label> <span class="ss-required-asterisk" aria-hidden="true">*</span></div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.564013658" value="" class="ss-q-short form-control" id="entry_564013658" dir="auto" aria-label="Your Contact Phone Number " aria-required="true" required="" title=""> <div class="error-message" id="1043488974_errorMessage"></div> </div></div></div> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-item-required ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_384036897"><div class="ss-q-title">Your Contact Email Address <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label> <span class="ss-required-asterisk" aria-hidden="true">*</span></div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.384036897" value="" class="ss-q-short form-control" id="entry_384036897" dir="auto" aria-label="Your Contact Email Address " aria-required="true" required="" title=""> <div class="error-message" id="884967134_errorMessage"></div> </div></div></div> <hr> <h3>What Information Would You Like to Change?</h3> <button type="button" onclick="togglediv('stocking')" class="fusion-button button-default button-large">Stocking/Non-Stocking</button> <button type="button" onclick="togglediv('address')" class="fusion-button button-default button-large">Address</button> <button type="button" onclick="togglediv('phone')" class="fusion-button button-default button-large">Phone Number</button> <button type="button" onclick="togglediv('website')" class="fusion-button button-default button-large">Dealer Website</button> <div id="stocking" style="display:none;"> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-select"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_425770693"><div class="ss-q-title">Stocking or Non-Stocking </div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <select name="entry.425770693" id="entry_425770693" aria-label="Stocking or Non-Stocking" class="form-control"><option value=""></option> <option value="Stocking">Stocking</option> <option value="Non-Stocking">Non-Stocking</option></select> </div></div></div> <hr> </div> <div id="address" style="display:none;"> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_1539858681"><div class="ss-q-title">Street Address </div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.1539858681" value="" class="ss-q-short form-control" id="entry_1539858681" dir="auto" aria-label="Street Address " title=""> <div class="error-message" id="1068082097_errorMessage"></div> </div></div></div> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_656801113"><div class="ss-q-title">City </div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.656801113" value="" class="ss-q-short form-control" id="entry_656801113" dir="auto" aria-label="City " title=""> <div class="error-message" id="1742000190_errorMessage"></div> </div></div></div> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-select"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_2062628675"><div class="ss-q-title">State </div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <select name="entry.2062628675" id="entry_2062628675" aria-label="State" class="form-control"><option value=""></option> <option value="AL">AL</option> <option value="AK">AK</option> <option value="AZ">AZ</option> <option value="AR">AR</option> <option value="CA">CA</option> <option value="CO">CO</option> <option value="CT">CT</option> <option value="DE">DE</option> <option value="FL">FL</option> <option value="GA">GA</option> <option value="HI">HI</option> <option value="ID">ID</option> <option value="IL">IL</option> <option value="IN">IN</option> <option value="IA">IA</option> <option value="KS">KS</option> <option value="KY">KY</option> <option value="LA">LA</option> <option value="ME">ME</option> <option value="MD">MD</option> <option value="MA">MA</option> <option value="MI">MI</option> <option value="MN">MN</option> <option value="MS">MS</option> <option value="MO">MO</option> <option value="MT">MT</option> <option value="NE">NE</option> <option value="NV">NV</option> <option value="NH">NH</option> <option value="NJ">NJ</option> <option value="NM">NM</option> <option value="NY">NY</option> <option value="NC">NC</option> <option value="ND">ND</option> <option value="OH">OH</option> <option value="OK">OK</option> <option value="OR">OR</option> <option value="PA">PA</option> <option value="RI">RI</option> <option value="SC">SC</option> <option value="SD">SD</option> <option value="TN">TN</option> <option value="TX">TX</option> <option value="UT">UT</option> <option value="VT">VT</option> <option value="VA">VA</option> <option value="WA">WA</option> <option value="WV">WV</option> <option value="WI">WI</option> <option value="WY">WY</option></select> </div></div></div> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_1350649558"><div class="ss-q-title">Zip Code </div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.1350649558" value="" class="ss-q-short form-control" id="entry_1350649558" dir="auto" aria-label="Zip Code " title=""> <div class="error-message" id="815877722_errorMessage"></div> </div></div></div> <hr> </div> <div id="phone" style="display:none;"> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_295675520"><div class="ss-q-title">Phone Number </div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.295675520" value="" class="ss-q-short form-control" id="entry_295675520" dir="auto" aria-label="Phone Number " title=""> <div class="error-message" id="1895260138_errorMessage"></div> </div></div></div> <hr> </div> <div id="website" style="display:none;"> <div class="ss-form-question errorbox-good" role="listitem"> <div dir="auto" class="ss-item ss-text"><div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_1075621702"><div class="ss-q-title">Dealer Website </div> <div class="ss-q-help ss-secondary-text" dir="auto"></div></label> <input type="text" name="entry.1075621702" value="" class="ss-q-short form-control" id="entry_1075621702" dir="auto" aria-label="Dealer Website " title=""> <div class="error-message" id="1835818998_errorMessage"></div> </div></div></div> <hr> </div> <input type="hidden" name="draftResponse" value="[,,&quot;-2745162411652655215&quot;]"> <input type="hidden" name="pageHistory" value="0"> <input type="hidden" name="fbzx" value="-2745162411652655215"> <br /><br /> <input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action fusion-button button-default button-large" style="float:right;"> </form>