Databases
StackOverflow2013
Postsdbo
PODisable an input field if second input (most current) field is filled
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisable an input field if second input (most current) field is filled
    text
    copied!<p>I'm very new to javascript. I read this link and tried to customize it but it is not working: <a href="https://stackoverflow.com/questions/6771281/disable-an-input-field-if-second-input-field-is-filled">Disable an input field if second input field is filled</a> </p> <p>I want to allow people to toggle between two options-city and zipcode. I want to enable whatever field they chose last and disable the other. For example, if they are on the zipcode tab and press the submit button, whatever input it is in the zipcode gets submitted and not the city &amp; vice versa.</p> <p>The html is:</p> <pre><code>&lt;ul class="tabs"&gt; &lt;li&gt;&lt;a class="border-radius top med" href="#city"&gt;City&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="border-radius top med" href="#zipcode"&gt;Zipcode&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="city"&gt;&lt;label class="IDX-advancedText"&gt;City&lt;/label&gt; &lt;select id="aht-home-city" name="city[]" class="IDX-select " autocomplete="off"&gt; &lt;option value="2115"&gt;Austin&lt;/option&gt; &lt;option value="2718"&gt;Bartlett&lt;/option&gt; &lt;/div&gt; &lt;div id="zipcode"&gt;&lt;label class="IDX-advancedText"&gt;Zipcode&lt;/label&gt; &lt;input class="IDX-advancedBox IDX-advWildText" id="IDX-aw_zipcode" type="text" maxlength="255" name="aw_zipcode" value="" /&gt;&lt;/div&gt; </code></pre> <p>The script is:</p> <pre><code>var dis1 = document.getElementById("city"); dis1.onchange = function () { if (this.value != "" || this.value.length &gt; 0) { document.getElementById("zipcode").disabled = true; } } var dis2 = document.getElementById("zipcode"); dis1.onchange = function () { if (this.value != "" || this.value.length &gt; 0) { document.getElementById("city").disabled = true; } } </code></pre> <p>Any help is very much appreciated! The website is <a href="http://austinhometeam.staging.wpengine.com/joyce-newsletter/" rel="nofollow noreferrer">http://austinhometeam.staging.wpengine.com/joyce-newsletter/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload