html convert radio button list into dropdown - javascript

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>

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>

Related

How to find the first input or select or radiobutton or checkbox in a DIV

I have a HTML with DIV's containing all possible input types i.e. text, select, radio btn or checkbox.
how can i write jQuery selector which will always select the first input element in a type
<div id="testID">
<input id="txt" type="text">
<input id ="rdbtn" type="radio">
<input id="chkbox" type="checkbox">
<select id="slt">
<option value=1>Good Morning</option>
<option value=2>Hello</option>
<option value=3>Hi</option>
</select>
</div>
So the DIV's DOM structure can change.
I have tried
jQuery('#testID select').first()
or
jQuery('#testID input ').first()
But how can i write a selector which will select the first input type irrespective of changing DOM structure
To get the first input field from the specify container, one needs to find the :input as the :input selector basically selects all form controls. Just in case you wants to avoid hidden fields, you can use :not() selector. which will filter the elements as per the query.
Refer this example:
var firstInput = $('#testID').find(':input')[0];
console.log(firstInput);
var firstNonHiddenInput = $('#testID').find(':input:not([type=hidden])')[0];
console.log(firstNonHiddenInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="testID">
<input id="txt_hidden" type="hidden">
<input id="txt" type="text">
<input id="rdbtn" type="radio">
<input id="chkbox" type="checkbox">
<select id="slt">
<option value=1>Good Morning</option>
<option value=2>Hello</option>
<option value=3>Hi</option>
</select>
</div>
You can do:
jQuery('#testID input[type=text]:eq(0)')
jQuery('#testID select:eq(0)')

How to bring on second condition input form when selected dropdown item in PHP

Task:
To create a dropdown list for option values:"Name1...Name2...Name3...Others". Hence, when a user were to click on the option 'Others', it will generate an additional form fields for the user to enter and they are: "Name, Rego No., Address".
What has been done:
I have created the following dropdown list as shown:
<p>
<!--Input select box with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails">
<option value ="0" selected = "selected"> Select Name..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
Hence, the dropdown list is able to be shown. Furthermore, I have also created the html version for the 3 additional fields as shown below:
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorSearchNameResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="Rego No." id="Rego No." value="Reg No." title="Reg No." class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
....(Identical for "Address" field)
Issue:
At this point, I am stuck at how to call the additional 3 fields when users select 'Others' from the dropdown list. I have tried to use the "if..else" condition but am stuck when I tried to input the above code within if statement.
Hence, could anyone please help? Thanks.
code edit:
<div>
<p>
<!--Input selectbox with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails" onchange = "return val(this.value);">
<option value ="0" selected = "selected"> Select Agency..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
<!-- Set Conditional check, if user clicks Others, direct to input field: Name, Registration Number, Address-->
<div id = "extradiv" style ="display:none">
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorNameCompanyResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="RegistrationNum" id="RegistrationNum" value="Registration Num" title="Registration Num" class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
<p>
<input type="text" name="Address" id="Address" value="Address" title="Address" class="defaultValue required signupinput_txt" tabindex="9" />
<div id="searchAddressResultsContainer" class="hide searchResultsContainer"></div>
<div id="errorSearchAddressResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
</div>
</div>
<script>
function val(x)
{
if (x =="Others" )
{
document.getElementById("extradiv").style.display ="block";
}else
{
document.getElementById("extradiv").style.display = "none";
}
}
</script>
Use Jquery, put those 3 extra field in a div with id #extradiv and set its style as display:none to keep is hidden on load.
<div id="extradiv" style="display:none">
<!-- 3 extra fields -->
</div>
<script type="text/javascript">
$('#NameDetails').on('change',function(){
$('#extradiv").hide();
var changeVal = $("#NameDetails").val();
if(changeVal == "Others){
$("#extradiv").show();
});
</script>
You have to use javascript or jquery.
Just wrap your additional form elements under div and give it id e.g other_ele and also made that div display:none by default using css.
Just try that code below i have used javascript for this
First on your select tag use onchange like:
<select name ="Name" id="NameDetails" onchange="return val(this.value);">
This onchange will call val function
And writ your script like that
<script>
function val(x)
{
if(x == "Others")
{
document.getElementById("other_ele").style.display = "block";
}
else
{
document.getElementById("other_ele").style.display = "none";
}
}
</script>
Note other_ele is id of your div in which you have wrapped your additional form elements.
Hope this will work for you

Internet Explorer: Jquery unselects radio button after button is selected

I have listener for a set of radio buttons (radio group). Using IE and a radiobutton is selected, it makes a database call to populate a select. However, when a radio button is selected, the code runs fine but then it unselects the selected radio button. Doesn't happen on Firefox or Chrome.
Unfortunately, IE is office standard so I'm stuck with it. I can fix the problem by added javascript code to re-select the radio button, but I'd like to know why it does it in first place.
The jquery:
$('body').on("change", "input[type=radio]", function () {
var orgId = $('input[name=rdoGroup1]:checked').val();
$.get('AJAXServlet', {formType: 'getSearchList', type: orgId}, function (responseJson) {
var $select = $('#selSearch');
$select.find('option').remove();
$.each(responseJson, function (key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
});
return false;
});
The HTML:
<fieldset>
<legend style="color: lightblue;"> Search </legend>
<input type="radio" id="organization" name="rdoGroup1" value="organization" checked/>Organization
<input type="radio" id="department" name="rdoGroup1" value="department" />Department
<input type="radio" id="office" name="rdoGroup1" value="office" />Office
<input type="radio" id="rdoName" name="rdoGroup1" value="name" />Name
<br><br>
<select id="selSearch" name="selSearch" value="" style="width: 250px;">
<option value="1">LAW ENFORCEMENT</option>
<option value="2">FACILITIES & MAINTENANCE</option>
<option value="3">PUBLIC WORKS</option>
<option value="4">SECURITY</option>
<option value="5">EXTERNAL AGENCIES</option>
</select>
<button onclick="doSearch()">Search</button>
<br><br>
</fieldset>
return false at the end of an event handler prevents the default action of the event. Apparently IE considers selecting the radio button to be its default action. So remove this from the handler.

Disable select box and enable textbox using one checkbox with JavaScript

I'm am fairly new to JavaScript; I have been googling all day for this but i only found how to enable and disable one textbox using one checkbox.
Here is my code
JavaScript
function enable_text(status){
status=!status;
document.sr2.other_text.disabled = status;
}
HTML
<form name=sr2 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">
Others
<input type=text name=other_text>
</form>
Note: the code I posted is only for a textbox that when uncheck in checkbox it will be enabled.
My question is how do you disable select tag and enable a textbox after unchecking a checkbox?
Add an id to your text box then just put the below onclick of your checkbox instead of the function call.
<form name=sr2 method=post>
<input type="checkbox" name=others onclick= "document.getElementById('id_of_txtbox').disabled=this.checked;">Others
<input type=text name=other_text>
Here's the HTML
<input type="text" id="txt" disabled="disabled"/>
<select name="sel" id="sel">
<option value="test1">Test 1</option>
</select>
<input type="checkbox" name="vehicle" value="Car" checked="checked" onclick="enableText(this.checked)">Uncheck to Disable Select and Enable Text
And the JavaScript is
function enableText(checked){
if(!checked){
document.getElementById('sel').disabled = true;
document.getElementById('txt').disabled = false;
}
else{
document.getElementById('sel').disabled = false;
document.getElementById('txt').disabled = true;
}
}
Select is disabled and text is enabled on uncheking the checkbox and vice versa. Hopefully that helps.
Based on your question, are you trying to present a dropdown but then allow them to enter other values not in the dropdown?
If so, here is another way to approach it:
HTML:
<select name="RenewalTerm" id="RenewalTerm">
<option value="12">12 Month</option>
<option value="24">24 Month</option>
<option value="36">36 Month</option>
<option value="Other">Other</option>
</select>
<span id="RenewalTermOtherFields">
<label labelfor="RenewalTermManual" >Enter Renewal Term: </label>
<input type="text" name="RenewalTermManual" id="RenewalTermManual" />
</span>
JavaScript/jQuery:
$(document).ready(function() {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
$('#RenewalTerm').change(function() {
var selectedItem = $("select option:selected").val();
if (selectedItem !== 'Other') {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
}
else
{
$('#RenewalTermManual').val('');
$('#RenewalTermOtherFields').show();
}
});
});
See It In Action!: http://eat-sleep-code.com/#/javascript/dropdown-with-other-field
This will allow you to select "other" from the list, and when you do it will automatically display a textbox for free-form entry.

JQuery populate form depending on select option selected

I am trying to add some form content depending on the option selected by a user.
For example if the user selects form 1 option the form is populated with different content that if the user selects option 2
<select>
<option>Form 1</option>
<option>Form 2</option>
</select>
<form>
Here we get either form 1 content or form 2 content depending on the select option selected by user.
</form>
//Form 1 content
<input type="text" value="something" />
<input type hidden="something here" />
//Form 2 content
<input type="text" value="something else here" />
<input type hidden="something else here" />
How can I do this using jquery?
Try this: http://jsfiddle.net/QUbEE/1/
$('select').change(function () {
if ($('option:selected', this).val() == 1) {
//$('form').hide();
$('#form-1').html($('<input />').attr({
'id': 'textBox1',
'value': 'Something is here'
}));
} else {
$('#form-1').html($('<input />').attr({
'id': 'textBox2',
'value': 'Something ELSE is here'
}));
}
});
Create elems depends on the change event and then just replace the html of the form with the new input with new values.
As you mentioned in your comment that the content can be hard-coded then you may write both the forms and place that forms in different divs and toggle the visibility of the div depending upon the selection made from the drop-down list
For example, say your form 1 is in div1
<div id="div1" class="formDiv">
<input type="text" id="form1" value="something" />
<input type hidden="something here" />
</div>
And your form2 is in div2
<div id="div2" class="formDiv">
<input type="text" id="form2" value="something" />
<input type hidden="something here" />
</div>
In your CSS hide both the div (using class -- as example)
.formDiv {
display: none;
}
Say your drop-down looks like this
<select id="selectForm">
<option value="div1">Form 1</option>
<option value="div2">Form 2</option>
</select>
Now when the user select from the drop-down list at that point change the visibility of the divs
$('#selectForm').on('change',function(){
$('.formDiv').hide();
var formID = $('#selectForm').val();
$(formID).css('display', 'block');
});
This is just an example, you can give your own IDs and CLASSes as per the feasibility and efficiency.
Hope this helps
I would suggest you to keep it with two separated forms. And leave them visible! So then with javascript you can hide both forms and show the relevant one. This way if the browser does not support javascript the forms will still be usable:
<select id="toggle-forms">
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
<form id="form-1" class="form-to-toggle" acvtion="" method="">
<input type="text" value="something" />
<input type hidden="something here" />
<input type="submit" value="submit form 1"/>
</form>
<form id="form-2" class="form-to-toggle" acvtion="" method="">
<input type="text" value="something" />
<input type hidden="something here" />
<input type="submit" value="submit form 2"/>
</form>
<script>
$('#toggle-forms').on('change', function() {
$('.form-to-toggle').hide();
$('#form-'+this.value).show();
}).change();
</script>
See it in action: http://jsbin.com/iwocid/1
Something like this? When you chose option form 2 you will add testing to the input in form 2
<select>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
//Form 1 content
<input type="text" id="form1" value="something" />
<input type hidden="something here" />
$('select').on('change',function(){
$('input#form'+this.value).val('testing');
});
Add an id to form. THen use document.getElementById('idname').innerHTML to fill value
I would suggest this(as discussed with u)
<select id='this'>
<option value="Form_1">Form 1</option>
<option value="Form_2">Form 2</option>
</select>
<form id='Form_1' style='display:none'>
form1 content
</form>
<form id='Form_2' style='display:none'>
form2 content
</form>
and js
$(document).ready(function() {
$('#this').change(function () {
var form = $('#this').val();
$('#'+form).show();
});
});

Categories