使用按钮在表单中切换Divs-无需按钮即可提交表单

Question

标题或多或少描述了我的问题。

我可以使div切换按钮单击...，但随后每次单击按钮都将提交表单。 我读过，在按钮上添加'type =“ button”'可以缓解这种情况，但事实并非如此。

我正在使用它来切换div：

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

按钮看起来像这样：

<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>

这就是整个过程： http : //jsfiddle.net/crossbeats/owek6t54/

Answer 1

该代码在stackoverflow代码段中有效。 可能会给我jsfiddle javascript导入带来一些问题，因为如果您在标记中的HTML文件底部添加函数，那么它将起作用。 您的代码是正确的。

 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>