Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>xar's answer has some sweet functionality, but it doesn't accomplish the original goal of replacing the value of #i_n_r_reason with the value of #other_reason when "Other" is selected. I put it all together below.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; google.load("jquery", "1.4.4"); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ //initially hide the textbox $("#other_reason").hide(); $('#i_n_r_reason').change(function() { if($(this).find('option:selected').val() == "Other"){ $("#other_reason").show(); }else{ $("#other_reason").hide(); } }); $("#other_reason").keyup(function(ev){ var othersOption = $('#i_n_r_reason').find('option:selected'); if(othersOption.val() == "Other") { ev.preventDefault(); //change the selected drop down text $(othersOption).html($("#other_reason").val()); } }); $('#form_id').submit(function() { var othersOption = $('#i_n_r_reason').find('option:selected'); if(othersOption.val() == "Other") { // replace select value with text field value othersOption.val($("#other_reason").val()); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="http://www.perfectweb.com/resources/post.php" id="form_id" method="post"&gt; &lt;fieldset id="workers_comp_info"&gt; &lt;p&gt; &lt;label for="i_n_r_reason"&gt;Reason why Workers Comp Insurance is not required:&lt;/label&gt; &lt;select name="i_n_r_reason" id="i_n_r_reason"&gt; &lt;option value="No employees"&gt;No employees&lt;/option&gt; &lt;option value="1-2 employees"&gt;1-2 employees&lt;/option&gt; &lt;option value="Other"&gt;Other(Specify reason)&lt;/option&gt; &lt;/select&gt; &lt;input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" /&gt; &lt;/p&gt; &lt;/fieldset&gt; &lt;input id="form_submit" type="submit" value="submit" /&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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