I want to get the value from the datalist and display it in the textarea.
Therefor i used the script "selectProgram".
But why is there an additional input textfield when i use the select tags?
When i remove "select" the input field dissapears.
I just want the datalist appearing with the values inside.
<!DOCTYPE HTML><html>
<head>
</head>
<body>
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" list="programList">
<select datalist id="programList" onchange="selectProgram()">
<option value="432,325,511">Kopfweh</option>
<option value="1000,45,1">Halsschmerzen</option>
<option value="54,61,10">Grippe</option>
<option value="20,30,50">Asthma</option>
<option value="65,663,123">Entgiftung</option>
</datalist>
</select>
<script>
function selectProgram() {
var programList = document.getElementById("programList");
document.getElementById("text").value = programList.options[programList.selectedIndex].value;
}
</script>
</body>
</html>
Option tags can be in select tags OR datalist tags. Therefor you don't need both. When you take the datalist you can grab the wanted value directly from the input.
Working example:
function selectProgram() {
document.getElementById("text").value = document.getElementById("list_input").value;
}
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList" onchange="selectProgram()">
<datalist id="programList">
<option value="432,325,511">Kopfweh</option>
<option value="1000,45,1">Halsschmerzen</option>
<option value="54,61,10">Grippe</option>
<option value="20,30,50">Asthma</option>
<option value="65,663,123">Entgiftung</option>
</datalist>
If you only want to see the option descriptions and the numerical values to be hidden you can save them as data attributes. You can grab these with the ordinary value as selector.
Working example:
function selectProgram() {
var input_value = document.getElementById("list_input").value;
var selected_option = document.querySelector('option[value=' + input_value + ']');
document.getElementById("text").value = selected_option.dataset.value;
}
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList" onchange="selectProgram()">
<datalist id="programList">
<option data-value="432,325,511" value="Kopfweh">
<option data-value="1000,45,1" value="Halsschmerzen">
<option data-value="54,61,10" value="Grippe">
<option data-value="20,30,50" value="Asthma">
<option data-value="65,663,123" value="Entgiftung">
</datalist>
You can reset the input with onclick and a second function, that sets the value of the input to an empty string: document.getElementById("list_input").value = ''; If you wants to reset the textarea too then reset their value also in the second function: document.getElementById("text").value = '';
function selectProgram() {
var input_value = document.getElementById("list_input").value;
var selected_option = document.querySelector('option[value=' + input_value + ']');
document.getElementById("text").value = selected_option.dataset.value;
}
function resetInput() {
document.getElementById("list_input").value = '';
document.getElementById("text").value = '';
}
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList" onchange="selectProgram()" onclick="resetInput()">
<datalist id="programList">
<option data-value="432,325,511" value="Kopfweh">
<option data-value="1000,45,1" value="Halsschmerzen">
<option data-value="54,61,10" value="Grippe">
<option data-value="20,30,50" value="Asthma">
<option data-value="65,663,123" value="Entgiftung">
</datalist>
Furthermore you can place the event listeners onchange and onclick directly in the script. In that case you can easily add even more listeners like keyup for example to catch the Escape key.
Working example:
var list_input = document.getElementById("list_input");
function selectProgram() {
var selected_option = document.querySelector('option[value=' + list_input.value + ']');
document.getElementById("text").value = selected_option.dataset.value;
}
function resetInput() {
list_input.value = '';
document.getElementById("text").value = '';
}
list_input.addEventListener('change', selectProgram);
list_input.addEventListener('click', resetInput);
list_input.addEventListener('keyup', function(e) {
if (e.key == 'Escape') {
resetInput();
}
});
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList">
<datalist id="programList">
<option data-value="432,325,511" value="Kopfweh">
<option data-value="1000,45,1" value="Halsschmerzen">
<option data-value="54,61,10" value="Grippe">
<option data-value="20,30,50" value="Asthma">
<option data-value="65,663,123" value="Entgiftung">
</datalist>
I want it exactly like this example just that the values are copied to the textarea with the script.
Because with this example you can use the input field as a seach bar :)
<!DOCTYPE HTML><html>
<head>
</head>
<body>
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input list="programList">
<datalist id="programList" onchange="selectProgram()">
<option value="432,325,511">Kopfweh</option>
<option value="1000,45,1">Halsschmerzen</option>
<option value="54,61,10">Grippe</option>
<option value="20,30,50">Asthma</option>
<option value="65,663,123">Entgiftung</option>
</datalist>
<script>
function selectProgram() {
var programList = document.getElementById("programList");
document.getElementById("text").value = programList.options[programList.selectedIndex].value;
}
</script>
</body>
</html>
Related
Hello i would like to add function to my form when i select one option then some inputs of my form are disabled i tried to do this in jquery but something is not working.Could u help me wit this?
There is a example form:
<div class="col-4">
<label>Enabled </label>
<select name="stato" id="stato" class="form-control">
<option value="Text1">Text1</option>
<option value="Text2">Text2</option>
<option value="Text3">Text3</option>
<option value="Text4">Text4</option>
</select>
</div>
<div class="col-4" >
<label>Disabled when choose option in select</label>
<input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>
and function in jquery
$(function() {
$('#data_consegna').prop('disabled', true);
$('#stato option').each(function() {
if ($(this).is('selected')) {
$('#data_consegna').prop('enabled', true);
} else {
$('#data_consegna').prop('enabled', false);
}
});
});
enter code here
$(function() {
//Triggering change event handler on element #stato
$('#stato').change(function() {
var value = $(this).val(); //Getting selected value from #stato
if (value == "") {
$('.common_disable').prop('disabled', false); //If value is empty then disable another field
} else {
$('.common_disable').prop('disabled', true); //Else enable another field
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-4">
<label>Enabled </label>
<select name="stato" id="stato" class="form-control">
<option value="">Select One</option>
<option value="Text1">Text1</option>
<option value="Text2">Text2</option>
<option value="Text3">Text3</option>
<option value="Text4">Text4</option>
</select>
</div>
<div class="col-4" >
<label>Disabled when choose option in select</label><br>
<input id="data_consegna" type="text" class="form-control common_disable" name="data_consegna" placeholder="Data Consegna" /><br>
<input id="data_consegna2" type="text" class="form-control common_disable" name="data_consegna2" placeholder="Data Consegna2" /><br>
<input id="data_consegna3" type="text" class="form-control common_disable" name="data_consegna3" placeholder="Data Consegna3" /><br>
</div>
Please check above solution. It will enable input box at initial level. when you select one value, then it will disable input box.
I am using a very easy (but functional for my needs) Javascript script to validate input fields.
Here my main code:
<script language = "javascript">
function manage(txt) {
var bt = document.getElementById('send');
if (txt.value && txt2.value && txt3.value != '') {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
</script>
Here are my fields
<input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onkeyup="manage(this)">
<input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onkeyup="manage(this)">
<input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onkeyup="manage(this)">
and here my Submit button:
<input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>
What this does is to leave the submit button disabled until all fields have some value entered and works absolutely fine, however I also have a new and additional select option being:
<select name="Countries">
<option value="">Select Country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
......
</select>
I've tried to apply the following changes:
<script language = "javascript">
function manage(txt) {
var bt = document.getElementById('send');
if (txt.value && txt2.value && txt3.value && txt4.value != '') {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
</script>
<select name="Countries" id="txt4" onkeyup="manage(this)">
<option value="">Select Country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
......
</select>
However it does not seem to work. Some expert advise would be greatly appreciated. Thank you very much.
The proper form is
if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='')
You don't want to set the onkyeup event, but onchange. More universal event is oninput.
You should also check the required form elements tag attribute, which can provide you similar functionality without javascript. See here.
First of all, listening keyup event on your select will work only in case if select was changed by the keyboard. In case if it was changed by mouse, your event won't be fired. Better to listen onchange
On another hand, you should check the emptiness of all text fields, as you do for txt4.value!='':
if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='') {
...
}
Now it will work.
function manage(txt) {
var bt = document.getElementById('send');
if ( txt.value != '' && txt2.value != '' && txt3.value != '' && txt4.value != '' ) {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
<input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onkeyup="manage(this)">
<input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onkeyup="manage(this)">
<input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onkeyup="manage(this)">
<select name="Countries" id="txt4" onchange="manage(this)">
<option value="">Select Country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
</select>
<input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>
I have done this type of functionality before. So I'm sharing my code here.
HTML Code
<form method="Post" class="form">
<input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onblur="manage(this)">
<input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onblur="manage(this)">
<input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onblur="manage(this)">
<select name="Countries" id="txt4" onchange="manage(this)" class="input">
<option value="">Select Country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
</select>
<input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>
</form>
Javascript Code:
<script>
function manage($e){
var input = document.getElementsByClassName("input");
var status=false;
for(var i=0;i<input.length;i++){
if(input[i].value.trim()!='' && input[i].value.trim()!=null && input[i].value.trim()!=undefined){
status = true;
} else {
status = false;
break;
}
}
console.log(status);
if(status===true){
var email = document.getElementById("txt3").value;
if(!(/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.trim()))){console.log('1');
document.getElementById('send').disabled = true;
} else {console.log('2');
document.getElementById('send').disabled = false;
}
} else {
document.getElementById('send').disabled = true;
}
}
</script>
There are many ways to resolve this type of functionality but for this case, I have used the above code to achieve the goal. If you have any queries, please let me know. Thanks.
I have a textarea element that is not displayed. If the user selects "Other" option in the select element, the textarea should show, but it is not showing with the below code.
The following is my select element :
<select class="form-control" name="feed" id="feed" value="" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other" onclick="showHide(this)"
>Other feedback (free text)</option
>
</select>
The following is my textarea element :
<div class="form-group">
<label for="fb_text"></label>
<textarea
class="form-control"
name="fb_text"
id="fb_text"
rows="5"
placeholder="Describe yourself here..."
value=""
style="width:540px;display:none"
></textarea>
</div>
The following is my JS :
function showHide(elm) {
var Fbtext = document.getElementById("fb_text");
if (document.getElementById("feed").value == "Other") {
Fbtext.classList.remove("hide");
}
}
You can pass value from select using onchangeevent to your function and check if that value is equals to Others if yes display textarea else hide it. Working example :
function showHide(elm) {
if (elm == "Other") {
//display textbox
document.getElementById('fb_text').style.display = "block";
} else {
//hide textbox
document.getElementById('fb_text').style.display = "none";
}
}
<select class="form-control" name="feed" id="feed" value="" onchange="showHide(this.value)" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other">Other feedback (free text)</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea class="form-control" name="fb_text" id="fb_text" rows="5" placeholder="Describe yourself here..." value="" style="width:540px;display:none"></textarea>
</div>
Add change event to the select element, see if the selected option is 'Other', hide the text area else show.
const textareaEle = document.querySelector('textarea');
document.querySelector('select').addEventListener('change', function() {
textareaEle.style.display = (this.value == 'Other') ? 'block' : 'none';
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control" name="feed" id="feed" value="" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other">Other feedback (free text)</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea class="form-control hide" name="fb_text" id="fb_text" rows="5" placeholder="Describe yourself here..." value="" style="width:540px;"></textarea>
</div>
I have not checked but I understand in your code you try to remove a class (hide) that you have not assigned, because you hide the textarea with the attribute style
Please try this example, I understand in your example you use bootstrap, for demonstration I have added hide
const feed = document.querySelector('#feed');
const fbtext = document.querySelector('#fb_text');
feed.addEventListener('change', handleChange);
function handleChange(event) {
const value = event.target.value;
if (value === 'Other') {
fbtext.classList.remove('hide');
return false;
}
fbtext.classList.add('hide');
}
.hide {
display: none;
}
<select
class="form-control"
name="feed"
id="feed"
value=""
style="width:540px"
>
<option selected="selected" disabled="true">Please select</option>
<option value="Excellent" id="Excellent"> Excellent</option>
<option value="Other" id="Other">Other</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea
class="form-control hide"
name="fb_text"
id="fb_text"
rows="5"
placeholder="Describe yourself here..."
></textarea>
</div>
I am trying to figure out the best way to show and hide fields that are being reused. Cleaning up the code so that I do not repeat myself "DRY". Will someone please assist me in the best practices of doing so?
What I have is a select that allows the user to choose from two different reports.
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreport" value="checklistreport" >Checklist Stats</option>
<option id ="locationreport" value="locationreport" >Location Stats</option>
</select>
Then each report have a lot of similar fields. How can I have them use the same fields but hide/show the differences and go to the correct form "action" based which report is chosen.
Location Report
<form name="generatereport" method="post" action="_location_queries.cfm">
<select name="Location" id="loc" multiple="multiple" required size="9">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="10" readonly></textarea>
<br /><br />
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
<br /><br />
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Continue" />
</form>
<script type="text/javascript">
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
</script>
Checklist Report
<form name="generatereport" method="post" action="_checklists_queries.cfm">
<select name="Location" id="loc" multiple="multiple" required size="8">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="7" readonly></textarea>
<br /><br />
<cfquery name="GetActiveEmps" datasource="tco_associates">
SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
WHERE assoc_status = 'ACTIVE'
and assoc_last NOT LIKE 'Test%'
and len(assoc_last) > 0
ORDER BY assoc_last
</cfquery>
<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="8">
<cfoutput query="GetActiveEmps">
<option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
</cfoutput>
</select>
<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>
<textarea id="selected1" rows="7" readonly></textarea>
<br /><br />
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
<br /><br />
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Continue" />
</form>
<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');
document.getElementById('add1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = true;
}
reflectChange1();
});
document.getElementById('rem1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = false;
}
reflectChange1();
});
document.getElementById('EmployeeName').addEventListener('change', reflectChange1);
function reflectChange1() {
document.getElementById('selected1').value = '';
for ( var i=0; i<opts1.length; i++ ) {
if(opts1[i].selected)
document.getElementById('selected1').value += opts1[i].text+'\n';
}
}
// End JS for Showing Chosen Associates in textarea
</script>
Many of these fields are the same is there a way i can just have one set and show them if either option is chosen and not have two different sets?
This is what I have tried:
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
<option id ="locationreports" value="locationreports" >Location Stats</option>
</select>
<script>
$(document).on('change', '#reporttype', function() {
var value = $(this).val();
//var checklistreport = $("#checklistreport");
//var locationreport = $("#locationreport");
var location = $("#location");
var employeelist = $("#employeelist");
var chosendates = $("#chosendates");
var formattype = $("#formattype");
var submitbtn = $("#submitbtn");
if (value == "checklistreports") {
//checklistreport.show();
//locationreport.hide();
location.show();
employeelist.show();
chosendates.show();
formattype.show();
submitbtn.show();
} else if (value == "locationreports") {
//checklistreport.hide();
//locationreport.show();
location.show();
employeelist.hide();
chosendates.show();
formattype.show();
submitbtn.show();
} else {
//checklistreport.hide();
//locationreport.hide();
location.hide();
employeelist.hide();
chosendates.hide();
formattype.hide();
submitbtn.hide();
}
});
</script>
<br /><br />
<!--<div id="locationreport" style="display: none;">-->
<form name="generatereport" method="post" action="_location_queries.cfm">
<!--<div id="checklistreport" style="display: none;">-->
<form name="generatereport" method="post" action="_checklists_queries.cfm">
</form>
<div id="location" style="display: none;">
<select name="Location" id="loc" multiple="multiple" required size="9">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="10" readonly></textarea>
</div>
<br /><br />
<div id="employeelist" style="display: none;">
<cfquery name="GetActiveEmps" datasource="tco_associates">
SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
WHERE assoc_status = 'ACTIVE'
and assoc_last NOT LIKE 'Test%'
and len(assoc_last) > 0
ORDER BY assoc_last
</cfquery>
<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="9">
<cfoutput query="GetActiveEmps">
<option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
</cfoutput>
</select>
<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>
<textarea id="selected1" rows="10" readonly></textarea>
</div>
<br /><br />
<div id="chosendates" style="display: none;">
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
</div>
<br /><br />
<div id="formattype" style="display: none;">
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
</div>
<br /><br />
<div id="submitbtn" style="display: none;">
<input type="submit" name="submit" value="Continue" />
</div>
</form>
<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');
document.getElementById('add1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = true;
}
reflectChange1();
});
document.getElementById('rem1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = false;
}
reflectChange1();
});
document.getElementById('EmployeeName').addEventListener('change', reflectChange1);
function reflectChange1() {
document.getElementById('selected1').value = '';
for ( var i=0; i<opts1.length; i++ ) {
if(opts1[i].selected)
document.getElementById('selected1').value += opts1[i].text+'\n';
}
}
// End JS for Showing Chosen Associates in textarea
</script>
Not sure how I choose which action for the form. Depending on which report is chosen.
https://jsfiddle.net/bobrierton/o2gxgz9r/10018/
You have a few options here:
Option #1:
Always show the "common" inputs, and only hide the inputs that are conditional upon selection, that way your code is cleaner because you only have to manage the conditional elements (not all of them as you are doing now)
Option #2:
Use CF includes to hold your "common" elements, and "conditional" elements, combining them where necessary to build the correct list.
Option #3:
Use JavaScript to hold your "common" elements, and "conditional" elements, and render the composed list based on your conditions.
var location = $('select[name=Location]');
// This lists could hold anything you want, jQuery elements
// references, strings, etc.
var lists = {
common: ['a', 'b', 'c'],
locationreports: ['location #1', 'location #2'],
checklistreports: ['checklist #1', 'checklist #2']
};
$('#reporttype').on('change', function() {
var value = $(this).val();
// Grab a copy of the common list to begin with
var options = [].concat(lists.common);
// Now combine the conditional options
if (value === "checklistreports" || value === "locationreports") {
options = options.concat(lists[value]);
}
// Now you have a complete list of options to show based
// your conditions, so now you can just show them all, or
// do whatever you want with this new list.
location.empty();
options.forEach(function($element) {
// Do something with the list
location.append('<option value="' + $element + '">' + $element + '</option>');
})
There are lots of other options, but between using and combining includes, or composing objects together you should be able to customize a nice DRY workflow.
So I'm trying to change a select box's style if the value is not changed ie. the user has not selected anything. That yesnoCheck is a function which shows an additional input field if the choice "other" is selected. I don't think it affects this form validation though. This same kind of validation works fine with an input field but it won't work with a select box.
I've also treid selectedIndex == 0 but it doesn't work either.
HTML:
<form name="myForm" method="post" action="" onsubmit="return(validate());">
<label for="lastname">Sukunimesi:</label>
<input type="text" id="lastname" name="lastname" /><br />
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
<input type="submit" value="Submit" />
</form>
JS:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").selected) {
document.getElementById("ifYes").style.display = "block";
}
else document.getElementById("ifYes").style.display = "none";
}
function validate() {
if (document.myForm.lastname.value.length < 3) {
document.getElementById("lastname").className = "required";
return false;
}
if (document.myForm.car.value == "none") {
document.getElementById("car").className = "required";
return false;
}
alert ("Everything is fine!");
}
</script>
Your code works check your form name and make sure your form exists before the script is run.
function check(){
if (document.myForm.car.value == "none") {
document.getElementById("car").style.border = "1px solid #900";
document.getElementById("car").style.backgroundColor = "#ff9";
return false;
}
}
<form name="myForm">
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
</form>
<button onclick="check()">Run script</button>
So the solution was to delete return false; from the function.