Question

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

我可以通过按钮点击来切换div ...但是每次点击按钮都会提交表单。我已经读过添加＆＃39; type =＆＃34;按钮＆＃34;＆＃39;按钮减轻了这一点，但它没有。

我用它来切换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 import来解决一些问题，因为如果你在标签中的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>

使用按钮切换表单中的Div - 无需提交表单的按钮

1 个答案: