html convert radio button list into dropdown

Question

I have converted my radio button list in the second fieldset to a dropdown menu. However, I want to pass either the value from the first fieldset which itself is a radio button, or from the selected value of the dropdown menu from the second fieldset. by default my radio button in the first fieldset is checked but when I select from dropdown menu, it doesn't uncheck the radio from first fieldset. My goal is to pass only one value from these, either radio button value or one of the selected values from dropdown. You will see my previous radio buttons in the second fieldset, they are commented. but it worked! So how to change the code to work the way it should: i.e. either of the selected value pass: either from radio button or dropdown? if radio button then disable dropdown and vice versa.

<table>
    <td>
    <fieldset id="field1" >
        <legend>Radio</legend>  
            <label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myradio' checked>Upload</label>

            <div id='uploadFile'>
                    <input type="file" name="file" id="file" />
            </div>


    </fieldset>
    </td>
    <td>
    <fieldset id="field2" > 

    <!--        
                <div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption1' onClick=''>1</label></div>
                <div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption2' onClick=''>2</label></div>
                <div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption3' onClick=''>3</label></div>
                <div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption4' onClick=''>4</label></div>
     -->
                <select class="mychoice" class='mychoice'>
                    <option Name ='mychoice' class='mychoice' value="myoption1">1</option>
                    <option Name ='mychoice' class='mychoice' value="myoption2">2</option>
                    <option Name ='mychoice' class='mychoice' value="myoption3">3</option>
                    <option Name ='mychoice' class='mychoice' value="myoption4">4</option>              
                </select>
    </fieldset>
    </td>
</table>

getjackx getjackx · Accepted Answer · 2016-12-15T11:33:56

First of all don't use a single radio button when you want to check for a yes/no value. Use a checkbox instead. you don't actually need either of these inputs as you could simply handle the event from your uploadFile input.

Second, the id attribute of your <fieldset>s must be unique (see this link). That means you cannot reuse UserChoice as id for all the <fieldset>s and the <select> element. By the way you should really look up the HTML syntax as there are few mistakes your browser silently fixes.

Let's sanctonize your HTML

<fieldset id="DefaultUserChoice">
<legend>Radio</legend>  
    <label for="mychoice">Upload</label>
    <input type="checkbox" id="CheckboxUserChoice" name ="mychoice" class="mychoice" value="mycheckbox" checked="checked">
    <div id="uploadFile">
            <input type="file" name="file" id="file">
    </div>
</fieldset>
<fieldset id="AnotherUserChoice"> 
        <select class="mychoice" id="SelectUserChoice">
            <option value="myoption1">1</option>
            <option value="myoption2">2</option>
            <option value="myoption3">3</option>
            <option value="myoption4">4</option>                
        </select>
</fieldset>

I'd assume that you use javascript though it is missing from your question (sorry cannot write comments yet). In case you don't use it, you should start using it. What you want to achieve cannot be done with HTML alone.

You can now start to use the new id's to check which user input you want to use. The javascript code would look something like this:

// Handle the checkbox unchecking
document.getElementById("SelectUserChoice").onchange = function(event) {
    // Disable the checkbox when the select element changes
}

function validateUserInput() {
    if(document.getElementById("CheckboxUserChoice").checked == true) {
        // Use the checkbox value
    } else {
        // Use the select value
    }
}

Edit:

A very simple example. The checkbox is no very useful and nothing happens when you uncheck it by yourself.

mySelectedValue.innerText = "mycheckbox";

SelectUserChoice.onchange = function(event) {
  // Disable the checkbox when the select element changes
  CheckboxUserChoice.checked = false;
  mySelectedValue.innerText = event.target.value;
}

CheckboxUserChoice.onchange = function(event) {
  mySelectedValue.innerText = event.target.value;
}

<body>
  <fieldset id="DefaultUserChoice">
    <legend>Radio</legend>
    <label for="mychoice">Upload</label>
    <input type="checkbox" id="CheckboxUserChoice" name="mychoice" class="mychoice" value="mycheckbox" checked="checked">
    <div id="uploadFile">
      <input type="file" name="file" id="file">
    </div>
  </fieldset>
  <fieldset id="AnotherUserChoice">
    <select class="mychoice" id="SelectUserChoice">
      <option value="dontUseMe">-Select a value-</option>
      <option value="myoption1">1</option>
      <option value="myoption2">2</option>
      <option value="myoption3">3</option>
      <option value="myoption4">4</option>
    </select>
  </fieldset>
  <p>Value to be used: <span id="mySelectedValue">none</span>
  </p>
</body>

html convert radio button list into dropdown

1 Answers