If a user selects a certain option value in one select field, how do you then make a text field hidden, s it will not be needed. This must be done before the form is submitted?
For example in the following select field, a user select chooses value='a' then how would this text field become hidden:
<select name="form" id="aForm">
<option value="a">choice1</option>
<option value="b">choice2</option>
<option value="c">choice3</option>
</select>
<input type="text" style="width:285px" name="textField" id="textField"/>
$("#aForm").on("change", function() {
if ($(this).val() == "a")
$("#textField").hide();
else
$("#textField").show();
});
Here is also a jsfiddle
I assumed that you will show the textfield for any other value than a.
If you're using plain JavaScript and not jQuery
function hideTF() {
var s = document.getElementById("aForm");
document.getElementById("textField").style.display
= (s.selectedIndex > 0 && s.options[s.selectedIndex] == 'a'
? "none" : "block");
}
var s = document.getElementById("aForm");
if (s.attachEvent)
s.attachEvent("onchange", hideTF);
else
s.addEventListener("change", hideTF, false);
You can use a variation of this:
var selection = aForm.selectedIndex,
field = document.getElementById('textField');
if ( selection === x ) {
field.style.display = "block"; // or visibility = "hidden"
}
This should be enclosed in an .onchange event. aForm.selectedIndex is the index of the corresponding <option> element that is selected.
Related
I am wanting to get a text box to appear when a either NINO or CRN is selected in the drop down box.
My problem is that the text box seems to always appear and then when I select Unknown it disappears, I would prefer it to only appear when the drop down options are the option.
This is my code:
var select = document.getElementById('NINOCRN'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == "NINO";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
//attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
National Insurance, CRN, Unknown
<select id="NINOCRN" required onchange="showDiv(this)">
<option value="select" disabled selected>Please Select</option>
<option value="NINO">National Insurance Number (NINO)</option>
<option value="CRN">Child Reference Number (CRN)</option>
<option value="Unknown">Unknown NINO/CRN</option>
</select>
<br>
<br>
<br>
<div id="hidden_div">
<input type="text" name="NINO" required>
<br>
<br>
</div>
Can anyone help me?
hide the input first, then show/hide based on your selection.
var select = document.getElementById('NINOCRN'),
onChange = function(event) {
var val = this.options[this.selectedIndex].value;
var shown = val === "NINO" || val === "CRN";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
//attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
check the fiddle
I have a drop down select box and input text box. Select box display my categories and its look like this:
<select id="category" name="category">
<option value="">Please select...</option>
<option value="1">Category-1</option>
<option value="2">Category-2</option>
<option value="3">Category-3</option>
<option value="4">Other</option>
</select>
Input text box is like this:
<input type="text" id="otherCategory" name="otherCategory" value="" style="display: none;">
My question is. when an user select only "Other" from dropdown then I need to populate the input text.
I tried it something like this:
$(document).ready(function() {
$('#category').change(function() {
var myValue = $(this).val();
var myText = $("#category :selected").text();
if (myText != '' AND myText == "Other") {
$("#otherCategory").show();
}
});
});
But I couldn't get it to work. Can anybody tell how I figure this out.
NOTE: my dropdown select populating dynamically.
Thank you.
You are missing && in if condition. Also, your condition
myText != '' is redundant and not required.
And you need to hide the input when selection changed.
$(document).ready(function () {
$('#category').on('change', function () {
var myValue = $(this).val();
var myText = $.trim($("#category :selected").text()).toLowerCase(); // Trim spaces and convert to lowercase for comparison
$("#otherCategory").toggle(myText === 'other');
});
});
Demo: https://jsfiddle.net/tusharj/8ykfmtyt/1/
You need to use && instead of AND
Live Demo
if (myText != '' && myText === "Other") {
$("#otherCategory").show();
}
You can further optimize it by hiding with option other then 'other' is selcted.
You do not need to check if it is not empty when you are comparing it with string 'other' so I removed that condition from if statement.
Live Demo
$('#category').change(function () {
$(this).find(":selected").text() === "Other" ?
$("#otherCategory").show() : $("#otherCategory").hide();
});
Try this Demo, if user selects other option showing input field else hiding.
$(document).ready(function() {
$('#category').change(function() {
var myValue = $(this).val();
var myText = $("#category :selected").text();
if (myText == "Other") {
$("#otherCategory").show();
}
else{
$("#otherCategory").hide();
}
});
});
I have an HTML form that adds parameters to an URL. I only want the extra parameter added if a certain option is selected in the same form. So let's say I want to add the parameter "addedParameter=1" to the URL if "Commercial" is selected, otherwise I don't want the parameter to appear at all (other wise I get no results for "House" and "Land") Please let me know what I can do.
<select id="pt" value="pt" name="pt" onChange="addParameter()">
<option value="" name="">Select</option>
<option value="1" name="1">House</option>
<option value="2" name="2">Commercial</option>
<option value="3" name="3">Land</option>
</select>
<input type="hidden" id="add" name="" value="1">
function addParameter(){
if(pt.selectedIndex == 1)
document.getElementById("add").name = "addedParameter";
}
I'd suggest that, rather than adding/removing the element based on a condition you should, instead, make use of the disabled attribute (only non-disabled elements are considered 'successful' and, therefore only non-disabled elements will have their names/values submitted):
function addParameter () {
var sel = document.getElementById('pt'),
input = document.getElementById('add');
input.disabled = sel.selectedIndex != 2;
}
document.getElementById('pt').onchange = addParameter;
JS Fiddle demo.
Note, in the demo I've removed the type="hidden" attribute-value, in order to visibly demonstrate the effect, but that's not required for this approach to work. Also, the conditional input has the disabled="disabled" attribute set by default (so if the form is submitted prior to this select being affected by the user it'll still not be accidentally submitted).
You could do it clearer by using jQuery. When html definitions are not enough, I prefer to create and delete the (input) nodes all by dynamic javascript. The two ways you are discussing (changing by select event or by adding a submit event handler) also works with that :
function addParameter() {
if ($('#pt').val() == "2") $('<input/>', { id: 'id_optionalParam', name: 'optionalParam', value: '1234', type: 'hidden' }).appendTo('#TheForm');
else $('#id_optionalParam').remove();
}
<input type="hidden" id="add" name="addedParameter" value="1">
function addParameter(){
if(pt.selectedIndex != 1)
input = document.getElementById("add")
parent = input.parentNode
parent.removeChild(input)
}
This will remove the input when the additionalParameter is not set, otherwise it won't get changed.
Edit: alternative solution:
function addParameter(){
if(pt.selectedIndex == 1) {
document.getElementById("add").name = "addedParameter";
} else {
document.getElementById("add").name = "";
}
}
Also see the docs for removeChild
I think that the best approach in this situation is to attach an event handler to the submit event of the form. Do what you need and then submit the form. Adding the input in the html and removing it after that is not so flexible.
<script>
window.onload = function() {
var form = document.getElementById("theform"),
select = document.getElementById("pt");
form.addEventListener("submit", function(event) {
event.preventDefault();
if(select.value == 2) {
var element = document.createElement("INPUT");
element.setAttribute("type", "hidden");
element.setAttribute("name", "addedParameter");
element.setAttribute("value", "1");
form.appendChild(element);
}
form.submit();
});
}
</script>
<form method="get" id="theform">
<select id="pt" value="pt" name="pt" onChange="addParameter()">
<option value="" name="">Select</option>
<option value="1" name="1">House</option>
<option value="2" name="2">Commercial</option>
<option value="3" name="3">Land</option>
</select>
<input type="submit" />
</form>
You can add extra parameter by adding an extra fidden field fo the form when needed option is selected, and remove it otherwise:
function addParameter(){
var addedParameterField = document.getElementById("addedParameter");
if (pt.selectedIndex != 1) {
if (addedParameterField) {
addedParameterField.parentNode.removeChild(addedParameterField);
}
} else {
if (!addedParameterField) {
var addedParameterField = document.createElement("input");
addedParameterField.type = "hidden";
addedParameterField.name = "addedParameter";
addedParameterField.value = "1";
container = document.getElementById('myform');
container.appendChild(addedParameterField);
}
}
}
I need to be able to hide an image that appears when clicking on an option within a select field ONLY if the value="" (nothing inside quotes). If the value="some_url" inside the option, then I want the image to show.
I have used the following code to SHOW the image when an option is clicked. But when using onClick, it shows the image even if the option value="".
Here is the Javascript I'm using:
function showImage() {
document.getElementById('openimg').style.display = 'block';
Here is the html:
<select name="" >
<option value="url" onclick="showImage();">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
I only inserted one onClick command inside one option, just to show that it works. It seems I need an if statement to "show if" or "hide if" along with the onClick command within each option.
this is how I would do it:
<script type="text/javascript">
function showImage()
{
var choice = document.getElementById('myDropDown').value;
if(choice.length > 0)
{
document.getElementById('openimg').style.display = 'block';
}
else
{
document.getElementById('openimg').style.display = 'none';
}
}
</script>
<select id="myDropDown" onchange="showImage()">
<option value="url">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
Um, are you asking how to use an if or how to determine what is selected?
First of all, use onchange event in the dropdown.
This is the LONGHAND way of doing it for illustration purposes.
function onChange(){
var mySelect = document.getElementById("my-select");
var selectedValue = "";
for( var i = 0; i < mySelect.length;i++){
if( mySelect[i].selected)
selectedValue = mySelect[i].value;
}
if( selectedValue == "whatever")
{
//do something
}
if( selectedValue == "ugh")
// do something else
}
I have a list of option inside select list, also I have textfield that contain the option value when selected.
i would like to make the textfield disable as default and when i'm selecting one of the options - the textfield will be enable.
Can someone direct me to a simiar example?
thanks
$(function() {
var $select = $('#idForSelectBox'),
$textarea = $('#idForTextarea'),
status;
$select.bind('change', function() {
// If the value of the select box matches "Whatever you want"
// set status to '', else set status to 'disabled'
status = ( $(this).val() === 'Whatever you want' ) ? '' : 'disabled';
$textarea.attr('disabled', status);
});
});
Here is an example using plain JavaScript jsfiddle:
HTML:
<select id='myselect'>
<option value='none'>none</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<input type='text' value='' name='mytext' id='mytext' disabled />
<button value='add' id='addbtn' name='addbtn'>add</button>
We started by disabled the input textfield.
var myselect = document.getElementById('myselect');
function createOption() {
var currentText = document.getElementById('mytext').value;
var objOption = document.createElement("option");
objOption.text = currentText;
objOption.value = currentText;
//myselect.add(objOption);
myselect.options.add(objOption);
}
document.getElementById('addbtn').onclick = createOption;
myselect.onchange = function() {
var mytextfield = document.getElementById('mytext');
if (myselect.value == 'none'){
mytextfield.value = '';
mytextfield.disabled = true;
}else {
mytextfield.value = myselect.value;
mytextfield.disabled = false;
}
}
Using the example on the previous post we basically add an onchange state to the select tag so when an option is selected we set the textfield's value to what is currently selected, and then basically set the textfield's disable to false. Thus, enable the textfield when an option is selected. Additionally, i added an option called 'none' so when user selects none it'll diable the textfield.