Three things: select box 1, input box, select box 2.
Based on the selections in select box 1 (drop down list 1), I want either input box to be visible or select box 2 to be visible, but not both.
Any help would be great :) I am populating the options in select box 2 based on the choice in select box 1, but sometimes the user's choice entitles them to enter anything as the input, instead of just choosing from a list of values.
Does anyone know how I can hide/show or add/remove these elements from the page? Would it be more-or-less the same if I had it create a new input box or select box 2 every time the selection changes, and just destroy the last one?
Based on some other questions I notice that I can change the style:none like here
StackOverflow> Replacing a dropdown menu with a text menu
is this the most desirable way to go about this?
I'm still learning the basics of js / DOM so any help (and explanation) would be greatly appreciated!
<select name='field' id='field' size='1' onchange='checkthis(this);'>
<option>please select something</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<input type='text' id='text1' name='text1' value='' />
<select name='field2' id='field2' size='1'>
<option>please select something</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<input type='button' id='button' value='Click Me' />
<script language='javascript' type='text/javascript'>
function checkthis(fld) {
switch (fld.selectedIndex) {
case 0:
document.getElementById("text1").style.display = "none";
document.getElementById("field2").style.display = "block";
break;
case 1:
document.getElementById("text1").style.display = "block";
document.getElementById("field2").style.display = "block";
break;
case 2:
document.getElementById("text1").style.display = "block";
document.getElementById("field2").style.display = "none";
break;
case 3:
document.getElementById("text1").style.display = "none";
document.getElementById("field2").style.display = "none";
break;
}
}
</script>
This will hide an element:
style="display:none;"
This will show an element:
style="display:block;"
You can handle the onchange event with a javascript function that will determine which element to hide or show, then change the style for the appropriate element.
BTW, this sort of work is MUCH easier when using JQuery. (But it does shield you from learning some parts of the DOM, if that was your real goal.)
You could also use CSS classes to achieve the same goals, which works better if you want to change many style properties at once. (JQuery would use the addClass, removeClass, or toggleClass functions.)
TOTALLY DIFFERENT APPROACH:
Maybe what you really want is a hybrid textbox / dropdown, called an autosuggest textbox. It would let you select a value, while also allowing free typing when needed.
Related
<select asp-for="ProductFilter.BrandId"
asp-items="#(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
<option>Chose one</option>
</select>
<button type="button" onclick="clearRadioButtons()" class="btn btn-outline-info mt-3">Clear</button>
I have some list items and 1 default item which is "Chose One" and what i want is when i click Clear button just make select list choosen value "Chose One" how can i do this with javascript? Thanks For helping!
For example i got A,B,C,D in options and of course default Chose one and when someone chose C and after click "Clear" button i want to make it "Chose One" back.
Add empty value to the default option and add an id to the select element:
<select id="brand-select" asp-for="ProductFilter.BrandId" asp-items="#(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
<option value="">Chose one</option>
</select>
Then select default option like this:
function clearRadioButtons() {
var selectElement = document.getElementById("brand-select");
selectElement.value = "";
}
To fulfill your requirements I'll propose two solutions that should (or at least one of them) work for you.
Option 1: Default Form Behavior (let the browser do the trick for you)
For this situation I'd rather use the reset button type of the form element. The button[type="reset"] resets all* the form fields to their original values when the browser loaded the page.
Here's an example, you may choose an option from the list and then click on "Reset" to revert the list to its original state.
<form>
<select>
<option value="" selected>Choose</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<button type="reset">Reset</button>
</form>
all:* keep in mind, the button[type="reset"] will try to reset all the form fields to their original values and not only your select element.
Note: in the above example, i intentianally set the option with the text "Choose" as selected using the selected attribute in order for that option to be selected no matter what its position in the select element.
Option 1: JavaScript Workaround
In case the first solution cannot be used, here's a solution that relies on JavaScript to do the trick.
The idea here is to set a default option by specifying an ID for it (so we can easily retrieve it by JavaScript) and an Event Listener on the button that resets the list.
const list = document.getElementById('list'),
defaultOption = document.getElementById('default-option'),
resetBtn = document.getElementById('reset-list');
// listen for "click" events on the "Reset" button
resetBtn.addEventListener('click', e => {
/**
* the below line is required only when you use a link (for example) instead of a button or the button type is different from "[type=button]".
/* The role of that line is to prevent the default behavior of the clicked element. In case of a link, the line prevents the unwanted jump on the page as the browser tries to follow the link and it scrolls the page all the way to the top (or simply follows the link if an "href" attribute is set on the "a" tag).
*/
e.preventDefault();
// reset the list
defaultOption.selected = !0;
});
<select id="list">
<option value="" id="default-option" selected>Choose</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<button type="button" id="reset-list">Reset</button>
I recommend using the selected attribute on the option you want to be reselected once the "Reset" button is clicked.
I'm trying to create a "How did you find us form element" and I'm having some jQuery trouble. The user selects from a list of options, one of which is "other". When selected other a text box that allows them to be more specific. In an effort to make this more user friendly that input is hidden when another option is displayed. I've got the jQuery working to show and hide the text input as the user changes the option but I would like it to clear any text in the text box in the event the user selects other, fills something in, then selects another option.
<label for="pcFindUs">How did you hear about us?</label>
<select name="pcFindUs" id="pcFindUs" onChange="getval();">
<option value="No Answer">Select One</option>
<option value="Internet Search">Internet search</option>
<option value="Internet Advertisement">Internet ad</option>
<option value="Soclail Media">Social media </option>
<option value="Unknown">I don't remember</option>
<option value="other">Other</option>
</select><br/>
<div id="pcHiddenOtherSpecify" style="display:none;">
<label for="pcFindUsSpecify">(Please Specify): </label><input type="text" value="" id="pcFindUsSpecify" name="pcFindUsSpecify" maxlength="50">
</div>
<script>
function getval(){
var values = $('#pcFindUs :selected').val();
if (values == "other"){
$("#pcHiddenOtherSpecify").css("display","block");
}else{
$("#pcHiddenOtherSpecify").attr("value","");
$("#pcHiddenOtherSpecify").css("display","none");
}
}
</script>
The pcHiddenOtherSpecify div containing the additional input appears and disappears just fine, but the value of #pcHiddenOtherSpecify still has whatever the user entered.
I've also tried
$("#pcHiddenOtherSpecify").val("");
With no luck. Any ideas what I may be doing wrong here?
You are trying to change the value of a div element, not an input. Try this:
$("#pcFindUsSpecify").val("");
Wrong ID
$("#pcFindUsSpecify").val("");
try
$("#pcFindUsSpecify").val("");
check it out
http://codepen.io/JcBurleson/pen/MKBBWq
I am trying to figure out how to populate other tags with a specific text after selecting from a drop down.
So if the drop down and another drop down below it the following should happen. When you choose "A" from dropDown1, dropDown2 should populate with "You chose A". If you choose "B" dropDown2 should say "You chose B". Same goes for "C"
Here is a sample code below.
<html>
<body>
<form>
<select id="dropDown1">
<option value = "A">A</option>
<option value = "B">B</option>
<option value = "C">C</option>
</select>
<select id="dropDown2">
<option value="You chose A">You chose A</option>
<option value="You chose B">You chose B</option>
<option value="You chose C">You chose C</option>
</select>
</form>
</body>
</html>
Any help would be greatly appreciated. If you could show some code that be awesome or if you could point me in the right direction where I can find the answer that be awesome to.
For predefined values like what you have, you can use the following jQuery/JavaScript code:
$(function() {
$('#dropDown1').change(function(){
$('#dropDown2').val('You chose ' + this.value);
});
});
JS Fiddle here: http://jsfiddle.net/vleong2332/82w7p0a6/
Here is the example to change dropDown1 when dropDown2 changes.
http://jsfiddle.net/vleong2332/82w7p0a6/1/
Here is another option, scaled down from some development I've done. A bit more flexible but also more complex. Pay attention to how the items are tagged with data-* attributes to decide what is hidden and shown. http://jsbin.com/siyexumulu/1/
I know there's questions like this in here, but I couldn't find an answer that would work for me.
What I want is to show form "default" is certain options are selected (In this case everything but "Ban Appeal" or "Ban Appeal (Spanish)", and I want form "unban" to be displayed only if Ban Appeal, or Ban Appeal (Spanish) is selected the shortest and easiest way possible.
I know it's possible with JQuery or Javascript
Here's my code:
<select>
<option value="Ban Appeal" selected="selected"><-- Choose Topic --></option>
<option value="Ban Appeal">Ban Appeal</option>
<option value="Ban Appeal (Spanish)">Ban Appeal (Spanish)</option>
<option value="Bug Report">Bug Report</option>
<option value="Hacker Report">Hacker Report</option>
<option value="Staff Application">Staff Application</option>
<option value="Staff Complaint">Staff Complaint</option>
<option value="English">English</option>
<option value="Spanish">Spanish</option>
<option value="Suggestion">Suggestion</option>
</select>
<form name="default" id="default" style="display:none"> <!-- Template for every option but Unban/Spanish Unban -->
<table>
<!-- Leaving out everything in here because it's a lot -->
</table>
</form>
<form name="unban" id="unban" style="display:none"> <!-- Template for unban/Spanish unban -->
<table>
<tr>
<!-- Leaving out everything in here because it's a lot. -->
</tr>
</table>
</form>
With jQuery you can add a function when the select is changed. Then, check which value it has and show or hide the forms accordingly, like this:
$(document).ready(function(){ // you probably have a document-ready function already
$('select').change(function(){ // onchange event
switch ($(this).val()) { // check the value
case 'no-select':
$('form').hide();
break;
case 'Ban Appeal':
case 'Ban Appeal (Spanish)':
$('form#unban').show();
$('form#default').hide();
break;
default:
$('form#default').show();
$('form#unban').hide();
}
}).trigger('change'); // trigger the change event to make it work
// directly when the DOM is loaded
});
You should consider giving the select an id as well and use it in the JavaScript; otherwise extra selects in the other forms will cause problems.
I hope it's clear how to extend this little snippet if later you want to add more forms or options.
Just a little shorter even previous answer works as expected:
$(function(){
$('select').on('change', function(){
var indexAppeal = !this.value.indexOf('Ban Appeal');
$('#default').toggle(indexAppeal);
$('#unban').toggle(!indexAppeal);
}).change();
});
I am using the follwoing jQuery to show/hide an 'Other' title field on page:
$('label[for=customerTitleOther], #customerTitleOther').hide();
$('.jTitle').change(function() {
if($(this).val() != 'Other') {
$('label[for=customerTitleOther], .jOther').hide();
}
else {
$('label[for=customerTitleOther], .jOther').show();
}
});
The field & associated label are hidden by default. However, the application i am building has scope for multiple entries on the same page so there may be multiple other fields like. Any ideas on how to extend the jQuery to cope with any number of 'Other' fields on page?
Well, it's not trivial, but what I've implemented is a "toggleOnSwitch" mechanism. Fragments of the page are annotated with the class name "toggleOnSwitch" and another class that tells what <option>, checkbox, or radio button determines visibility. The event handlers attached to the "toggler" elements (that is, the <options> or input fields) add or remove a particular class from the "toggled" elements, and (when switched "off" make sure that input fields are marked as "disabled" and a couple of other book-keeping tasks like that.
One trick is that when the "toggler" element is something like an <option> or a radio button input, when one element is toggled "off" the code has to check to see whether another element is toggled "on". That's because there's no event logged when one radio button loses the "checked" setting because another one has been clicked.
I've been thinking about posting my code for this, but it'd have to be cleaned up a little and stripped of one or two specialized hacks for my own application. Also, I'd want to make it use John Resig's "metadata" plugin instead of the cheesy version I did myself (before I knew "metadata.js" is available).
To answer my own question:
$(".jTitle").change(function(){
//set the select value
var val = $(this).val();
if(val != "Other") {
$(this).nextAll('.jOther').hide();
} else {
$(this).nextAll('.jOther').show();
}
})
With the HTML being:
<td>
<select id="titleDepend1" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="otherDepend1" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
</td>
So all the following elements with class jOther will be shown onChange.