I am trying to make a HTML form with a preset dropdown. The form is meant to be used frequently, so the preset menu is supposed to help the user choose common input options.
I cannot find any tutorials on how to do this anywhere, so I was hoping someone could point me in the right direction. I do not want to use any external libraries, if possible.
By a preset dropdown, I mean something like this:
var lastPreset = "preset1";
function previousPreset(element) {
lastPreset = element.value;
}
function updatePresets(element) {
var old = document.getElementById(lastPreset);
if (old) {
old.style.display = "none";
for (var i = 0; i < old.childNodes.length; i++) {
old.childNodes[i].required = false;
}
}
var preset = element.value;
var div = document.getElementById(preset);
if (div) {
div.style.display = "block";
for (var i = 0; i < div.childNodes.length; i++) {
div.childNodes[i].required = true;
}
}
lastPreset = preset;
}
function submitted() {
console.log("Submitted!");
return false;
}
#preset2, #preset3 {
display: none;
}
<form onsubmit="return submitted();">
<select onchange="updatePresets(this);" onfocus="previousPreset(this);">
<option selected value="preset1">Preset 1</option>
<option value="preset2">Preset 2</option>
<option value="preset3">Preset 3</option>
</select>
<div id="preset1">
<textarea required placeholder="Sample Text"></textarea>
</div>
<div id="preset2">
<input type="text">
</div>
<div id="preset3">
<input type="file">
</div>
<input type="submit" value="Submit">
</form>
This is just a hacky mess I made in a few minutes to show the sort of behaviour that I am trying to achieve. I am just looking for any tutorials or guides on how to do this sort of thing. It seems like someone would have tried this before.
Thanks for any responses!
I found out a far better method involving classes from looking at similar answers:
function updatePresets(element) {
var presets = document.getElementsByClassName("presets");
var div = document.getElementById(element.value);
for (var i = 0; i < presets.length; i++) {
var preset = presets[i];
preset.style.display = div === preset ? "block" : "none";
for (var j = 0; j < preset.childNodes.length; j++) {
preset.childNodes[j].required = div === preset;
}
}
}
function submitted() {
console.log("Submitted!");
return false;
}
#preset2, #preset3 {
display: none;
}
<form onsubmit="return submitted();">
<select onchange="updatePresets(this);">
<option selected value="preset1">Preset 1</option>
<option value="preset2">Preset 2</option>
<option value="preset3">Preset 3</option>
</select>
<div id="preset1" class="presets">
<textarea required placeholder="Sample Text"></textarea>
</div>
<div id="preset2" class="presets">
<input type="text">
</div>
<div id="preset3" class="presets">
<input type="file">
</div>
<input type="submit" value="Submit">
</form>
Related
I am trying to show the FILE DIV if the user selects the doctor value in the select statement. I know the if statement works because I also print the value in the console which works perfectly fine. I toggle my divs in the same exact manner in my other webpages so I'm not understanding what's going on with this one in particular.
function viewFile(){
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if(type === 'doctor') {
file.style.display = "block";
console.log(type);
}
}
.hidden{
display : none;
}
<div>
<select id="accountType" name="type" class="form-control" onchange="viewFile()">
<option required>Account Type</option>
<option value="doctor" name="doctor" id="doctor">Doctor</option>
<option value="regular" name="regular" id="reg">Regular Account</option>
</select>
</div>
<div class="hidden file" id="doclicense">
<input type="file" name="license" />
<input type="submit"/>
</div>
****************************************EDIT-WORKAROUND**********************
Since my code refused to work, I added a line of code with 'head' being the title and not a real value. Thanks to everyone who contributed. I took out the hidden class altogether but when I add it, it still doesn't work correctly.
function viewDocFile() {
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if (type === 'regular' || type === 'head') {
file.style.display = "none";
console.log(type);
} else {
file.style.display = "block";
console.log(type);
}
}
***************************FINAL-EDIT************************
Kept the original code, but added the CSS inline.
<div class="form-group col-md-6" id="doclicense" style="display:none;">
Works perfectly now.
Here is an example of how this code should be written (even if there are still horrors)
// declare them here and not in a function where they will be redone each time the function is called
const
file_IHM = document.querySelector('#doclicense')
,
type_IHM = document.querySelector('#accountType') // and not with .value ...!
;
type_IHM.onchange = function()
{
file_IHM.style.display = (this.value==='doctor')?"block":"none";
console.log('type_IHM.value', this.value );
}
#doclicense { display : none; }
<div>
<select id="accountType" name="type" class="form-control" > <!-- let the js in the js part -->
<option required>Account Type</option>
<option value="doctor" id="doctor" >Doctor</option>
<option value="regular" id="regular" >Regular Account</option>
</select>
</div>
<div class="file-class" id="doclicense"> <!-- do not use class="hidden... -->
<input type="file" name="license" />
<input type="submit" /> <!-- there is no form anywhere... why don't you use <button> ?? -->
</div>
If that what your code really looks like, did you add your js in a <script></script> tag?
Or do you want to toggle the hide and show of the div?
if so this answer may help
<select id="accountType" name="type" class="form-control" onchange="viewFile()"><option required>Account Type</option>
<option value="doctor" name="doctor" id="doctor">Doctor</option>
<option value="regular" name="regular" id="reg">Regular Account</option>
</select>
</div>
<div class="hidden file" id="doclicense">
<input type="file" name="license" />
<input type="submit"/>
</div>
<script>
function viewFile(){
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if(type === 'doctor') {
file.style.display = "block";
console.log(type);
}else{
file.style.display = "none";
console.log(type);
}
}
</script>
I am trying to retain div on exiting a page and am not very sure how to go about this, I am aware that I can achieve this using localStorage but cannot figure out how, here is the script
<script type="text/javascript">
function ShowHideDiv() {
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = ddlPassport.value == "Y" ? "block" : "none";
var ddlPassport = document.getElementById("ddlPassport");
var dvPassports = document.getElementById("dvPassports");
dvPassports.style.display = ddlPassport.value == "N" ? "block" : "none";
}
</script>
<span>Do you have Passport?</span>
<select id = "ddlPassport" onchange = "ShowHideDiv()">
<option value="N">No</option>
<option value="Y">Yes</option>
</select>
<!--<hr />-->
<div id="dvPassport" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
<div id="dvPassports" style="display: none">
Other Number:
<input type="text" id="txtPassportNumbers" />
</div>
thank you very much for your help!
In the beforeunload of the window object, set whatever you like into localStorage.
Also, it's better to use CSS classes than to apply individual style properties.
window.addEventListener("DOMContentLoaded", function(){
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
var dvPassports = document.getElementById("dvPassports");
var passNum = document.getElementById("txtPassportNumber");
var passNums = document.getElementById("txtPassportNubmers");
ddlPassport.addEventListener("change", ShowHideDiv);
// Restore prior saved data:
if(localStorage.getItem("passportNumber")){
passNum.value = localStorage.getItem("passportNumber");
ShowHideDiv();
} else if(localStorage.getItem("passportNumbers")) {
passNums.value = localStorage.getItem("passportNumbers");
ShowHideDiv();
}
var numElement = null;
function ShowHideDiv() {
if(this.value === "y"){
dvPassport.classList.remove("hidden");
dvPassports.classList.add("hidden");
numElement = dvPassport;
} else if(this.value === "n") {
dvPassport.classList.add("hidden");
dvPassports.classList.remove("hidden");
numElement = dvPassports;
} else {
dvPassport.classList.add("hidden");
dvPassports.classList.add("hidden");
}
}
// As the user is leaving the page, store the text value:
window.addEventListener("beforeunload", function(){
if(numElement === dvPassport){
localStorage.setItem("passportNumber", passNum.value);
} else if(numElement === dvPassports) {
localStorage.setItem("passportNumbers", passNums.value);
}
});
});
.hidden { display:none; }
<span>Do you have Passport?</span>
<select id = "ddlPassport">
<option value="">--- Select ---</option>
<option value="n">No</option>
<option value="y">Yes</option>
</select>
<div id="dvPassport" class="hidden">
Passport Number:
<input type="text" id="txtPassportNumber">
</div>
<div id="dvPassports" class="hidden">
Other Number:
<input type="text" id="txtPassportNumbers">
</div>
I am trying to show and hide certain div based on selected text in drop down list. The option in drop-down list is generated by getting id from certain class name. I thought of using looping of an array in javascript but am unsure how to do so. Sorry that i may sound unclear of what i wanted to do as i am lost and unsure how to do them.
My Codes:
JavaScript:
var elements = document.body.getElementsByClassName("headline-bar");
window.onload = function() {
var year = document.getElementById("year");
for (i=0;i<elements.length;i++)
{
var Entry = document.createElement("option");
Entry.text = elements[i].textContent;
year.add(Entry ,null);
}
}
Html:
<form>
<select id="year">
<option>All</option>
</select>
<input type="submit" value="Submit">
</form>
<form action="#" id="release_year" method="post" >
<div class="release_holder" id="2015" style="margin-bottom: 20px">
<div class="headline-bar">2015</div>
<div class="content">hello there</div>
</div>
<div class="release_holder" id="2014" style="margin-bottom: 20px">
<div class="headline-bar">2014</div>
<div class="content">hello there</div>
</div>
</form>
JavaScript Loop array that i thought of using:
var selectedText = yearSelect.options[yearSelect.selectedIndex].text;
var classList = document.getElementByClassName('press_release_holder').id.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
if (classList[i] === 'selectedText') {
//do something
}
}
Easier solution would to use querySelectorAll considering the condition of All option.
Use change listener for select-input.
var elements = document.body.getElementsByClassName("headline-bar");
var year = document.getElementById("year");
for (i = 0; i < elements.length; i++) {
var Entry = document.createElement("option");
Entry.text = elements[i].textContent;
year.add(Entry, null);
}
function showHide(elem) {
var val = elem.value;
if (val == 'All') {
[].forEach.call(document.querySelectorAll('.release_holder'), function(el) {
el.style.display = 'block';
});
} else {
[].forEach.call(document.querySelectorAll('.release_holder'), function(el) {
el.style.display = 'none';
});
document.querySelector('[id="' + val + '"]').style.display = '';
}
}
<form>
<select id="year" onchange='showHide(this)'>
<option>All</option>
</select>
<input type="submit" value="Submit">
</form>
<form action="#" id="release_year" method="post">
<div class="release_holder" id="2015" style="margin-bottom: 20px">
<div class="headline-bar">2015</div>
<div class="content">hello there</div>
</div>
<div class="release_holder" id="2014" style="margin-bottom: 20px">
<div class="headline-bar">2014</div>
<div class="content">hello there</div>
</div>
</form>
Fiddle Demo
You can use the onchange event in your drop down to fire your code:
<select onchange="myFunction()">
http://www.w3schools.com/jsref/event_onchange.asp
Then once myFunction() is fired, you get the selected text and set the CSS manually, as with this answer:
https://stackoverflow.com/a/21070237/5882767
use this on change function
<select onchange="myChangeFunction()">
function myChangeFunction(){
if( $('#year').val() == 'yourSelectedOption'){
$('.className').hide(); // use javascript function for hide show of element
}
}
Do the values of the dropdown list correspond to the year? i.e. the id of the div tag you want to hide.
If so, you can try the following:
var optionList = document.getElementById("year");
var selectedText = optionList.options[optionList .selectedIndex].value;
//hide the div with the id = selectedText
document.getElementById(selectedText).style.display = 'none';
In my HTML form, there are 2 textbox and one dropdown.
While loading the page, dropdown should not be editable(ie: disabled)
After filling all the textbox,the dropdown should be editable.
Please give an idea to solve this in javascript.
Try like this
HTML
<input type="text" id="text1" onblur="myFunction()">
<input type="text" id="text2" onblur="myFunction()">
<select id="select1" disabled>
<option>value</option>
</select>
Javascript
function myFunction() {
if (document.getElementById("text1").value.length > 0 && document.getElementById("text2").value.length > 0) {
document.getElementById("select1").disabled = false;
} else {
document.getElementById("select1").disabled = true;
}
}
Check both input elements value whenever keyup event is fired. If both the input elements have no inputs then disable the select element. Else enable it. Try this way,
javaScript :
function SetControlState(){
for(var i = 0; i < inputs.length; i++){
if(inputs[i].value.length == 0){
selectddl.disabled = true;
break;
} else{
selectddl.disabled = false;
}
}
}
var selectddl = document.getElementById("dropdl");
var inputs = document.getElementsByTagName('input');
var isEnabled = false;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].id == 'first' || inputs[i].id == 'second'){
inputs[i].onkeyup = function(){
SetControlState();
};
}
}
HTML :
<select name="ddl" id="dropdl" disabled="true">
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" id="first"/>
<input type="text" id="second"/>
jsFiddle
I have a page where, depending on whether the value of a combobox is false (no), an input box should be hidden and a fieldset disabled. When the combobox's value changes to true (yes), the form should show the input box and enable the fieldset.
This is what I have so far:
<html>
<head>
<title>combo</title>
<script language="javascript">
function ToggleDisplay(Section, boolHide) {
if (boolHide == true) {
Section.style.display = "none";
}
else {
Section.style.display = "";
}
}
function disableElement(element, boolHide)
{
var input =
document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled",boolHide);
}
}
function hideShowElement(CurrentSection, OtherSection, DisableSection)
{
var sectionVal = CurrentSection.value;
if (sectionVal == 0) {
ToggleDisplay(OtherSection, true);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "true");
}
else {
ToggleDisplay(OtherSection, false);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "false");
}
}
</script>
</head>
<body>
<form name="testForm" action="" method="post">
Show Hidden Text? <select name="cmbYN"
onchange="hideShowElement(this, MyDIV, 'OptionGrp1');">
<option value="0" selected="selected"></option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<div id="MyDIV" style="display: none">
My Hidden Text: <input name="Text1" type="text" />
<br>
</div>
<fieldset id="OptionGrp1" name="Group1">
Option Group<br><br>
Option 1<input name="Radio1" type="radio" checked>
Option 2<input name="Radio1" type="radio">
</fieldset>
</form>
</body>
</html>
This is hiding the input box and disabling the fieldset, but not re-enabling them.
You should change the display back to what it was before, normally block.
if (boolHide){
Section.style.display = "none";
}else {
Section.style.display = "block";
}
Also for the disabled, the proper way is setting the disabled attribute to disabled and removing it afterwards:
for(var i = 0; i < input.length; i++)
{
if(boolHide){
input[i].setAttribute("disabled", "disabled");
}else{
input[i].removeAttribute("disabled");
}
}