function otherShow() {
var textarea = document.getElementById("hideme");
var x = document.forms.myForm.other_trade.value;
if (x == "other") {
textarea.style.display = 'block';
}else {
textarea.style.display = 'none';
}
}
This is my JavaScript code that is supposed to hide the text area that holds the ID=hideme and the action is triggered onchange="otherShow();"
<select name="trade" required="required" class="inputbox" id="trade" onchange="otherShow();">
<option value="" selected="selected"> Select one... </option>
<option value="" disabled="disabled"> ---------------------- </option>
<option value="General Labourer">Option1</option>
.......
</select>
The above is the Select and below is the Textarea
<textarea cols="36" rows="6" class="inputbox" id="hideme" name="other_trade"></textarea>
In the end of the Select i have a
<option value="Other"> Other </other>
I want to show the Text area when the Other is selected. Please help I think the loginc is correct but it just do not work when I change it to some value it hides the text area, but do not change it...
the name of the select box is trade not other_trade:
var x = document.forms.myForm.trade.value;
or :
var x = this.value;
instead of :
var x = document.forms.myForm.other_trade.value;
Here is how I would do it
window.onload=function() {
document.getElementById("trade").onchange=function() {
var textarea = this.form.other_trade;
textarea.style.display=(this.value=="Other")?"block":"none";
}
}
Replace other to Other in your javascript show/hide condition, because it's compare case sensative
Related
Im trying to loop through multiple text and select boxes in a form and validate they have been answered.
I have used the following code to loop through the text boxes but can work out how to do something similar on the select boxes.
<form name="Form1"></form>
<label>Question 1</lable>
<input type="text" class="required" name="question1">
<label>Question 2</lable>
<select class="required" name="question3">
<option value="0">a</option>
<option value="1">b</option>
<option value="2">c</option>
<option value="3">d</option>
</select>
<button role="button"id="Go">Go</button>';
</form>
<script>
(function (){
$('#Go').on('click', function(e){
e.preventDefault();
genericValidationText('form[name="Form1"]');
genericValidationSelect('form[name="Form1"]');
});
}());
function genericValidationText (formName) {
document.forms.noValidate = true;
var notValid;
// PERFORM GENERIC CHECKS
// INPUT form fields
$(formName + ' *').filter(':input').each(function(){
var formElement = formName + ' input[name="'+ (this.name) + '"]' ;
performValidation(formElement);
});
function performValidation(formElement){
if ($(formElement).hasClass('required')) {
notValid = false;
if (!($.trim($(formElement).val()))){
notValid = true;
};
if (notValid === true) {
showErrorMessage(formElement);
};
};
}
}
function genericValidationSelect (formName) {
?????
}
</script>
You can validate <select> elements in much that same way as <input /> elements, by examining the result of the select element's .val().
Something to keep in mind is that the <select> will have a value by default (that corresponds to the <option> that is initially visible to the user in the browser). This will in effect cause validation on the <select> to pass (even when a selection option hasn't been explicitly picked by the user).
To address this, consider adding a default <option> to the <select> like this:
<option selected disabled>Please select something</option>
Adding this option means that validation on the <select> will fail until the user has actually engaged with the <select> by picking a valid option (after which, validation on the select will pass):
(function() {
/* Consider using submit on form, rather than a click event
listener on the Go button */
$('form[name="Form1"]').submit(function(e) {
e.preventDefault();
/* Exclude call to genericValidationText() for
this snippet to simplify it
genericValidationText('form[name="Form1"]');
*/
genericValidationSelect('form[name="Form1"]');
});
}());
function genericValidationSelect(formName) {
let notValid = false;
/* Iterate each select in the form */
$('select', formName).each(function() {
/* Check value in similar way. If null value,
then consider the select invalid */
var selectedOption = $(this).val();
if (selectedOption === null) {
notValid = true;
}
});
if(notValid) {
alert('Please select an option');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Fixed : remove closing form tag -->
<form name="Form1">
<!-- Fixed : typo -->
<label>Question 1</label>
<input type="text" class="required" name="question1">
<label>Question 2</lable>
<select class="required" name="question3">
<!-- Added default "no value option" to demonstrate validation -->
<option selected disabled>Please select something</option>
<option value="0">a</option>
<option value="1">b</option>
<option value="2">c</option>
<option value="3">d</option>
</select>
<button role="button"id="Go">Go</button>
</form>
Hope this helps!
The following should work:
const changeEventHandler = e => {
const value = e.target.options[e.target.selectedIndex].value;
console.log(value); //Validate value...
}
const select = document.querySelector('select[name=question3]').onchange = changeEventHandler;
I am clearing session on onchange but it's not working. I am having a text field, what I want is when something is filled on text filed and when I select test from select the data on text field which I filed earlier should be removed. For this I am using sessionStorage.clear(); but it's not working.
My codes are here
function SesRes() {
var x = document.getElementById("abc").value;
if(x == "test") {
sessionStorage.clear();
}
}
<input type="text" value="">
<select id="abc" onchange="SesRes()">
<option value="xyz">xyz</option>
<option value="test">test</option>
</select>
No this is not the right way if you want to remove the data from your text input field.
Do something like:
<script>
function SesRes() {
var x = document.getElementById("abc").value;
if(x == "test") {
document.getElementById("textField").value = "";
}
}
</script>
<input type="text" id="textField" value="">
<select id="abc" onchange="SesRes()">
<option value="xyz">xyz</option>
<option value="test">test</option>
</select>
Currently in my code I have one drop-down menu. This drop-down menu has three options the user can pick from. Complete needs to have a text-box appear if it is selected. Abandon needs to have a drop-down menu to show up. Then Transfer works the same way. A drop-down menu needs to appear for it as well.
My HTML code for the first drop-down:
<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>
My HTML code for the Text-box that needs to appear with Complete picked from first drop-down menu
<input type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>
My HTML code for the drop-down that needs to appear with abandon picked from first drop-down menu
<select name="Reason" id="ReasonDD" style="display:none;" required>
<option value="">Reason:</option>
<option value="NoShow">No Show</option>
<option value="Unfixable">Unfixable</option>
<option value="other">Other</option>
</select>
Then lastly my JavaScript code I have that is doing some of these tasks. But when I select something else from the first drop-down menu after something has already been picked it will show both the new text-box or the new drop-down menu together. I need help getting both of them to show up by themselves and clear the old selected action.
function showHide()
{
var val = document.getElementById("ActionDD").value;
if(val == "complete")
document.getElementById("REMtextBox").style.display = 'inline-block';
else if(val == "abondon")
document.getElementById("ReasonDD").style.display = 'inline-block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'inline-block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'inline-block';
}
Here is a simple solution:
You can add a empty div with an ID below your selection and change the innerHTML of that div with your HTML you want to show based on the selection the user makes.
I edited your existing code so you can see what I mean:
function showHide() {
var val = document.getElementById("ActionDD").value;
var remTextBox = document.getElementById("REMtextBox");
var reasonDD = document.getElementById("ReasonDD");
var thirdTextBoxId = document.getElementById("ThirdTextBoxId");
var fourthTextBox = document.getElementById("FourthTextBoxId");
var result = document.getElementById("result");
var remTextBoxHTML = '<input type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10"/>';
var reasonDDHTML = '<select name="Reason" required><option value="">Reason:</option><option value="NoShow">No Show</option><option value="Unfixable">Unfixable</option><option value="other">Other</option></select>';
if(val == "complete") {
result.innerHTML = remTextBoxHTML;
} else if(val == "abandon") {
result.innerHTML = reasonDDHTML;
} else if(val == "C") {
result.innerHTML = '';
} else if(val == "D") {
result.innerHTML = '';
} else {
result.innerHTML = '';
}
}
<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>
<div id="result">
</div>
You can give all your hidden elements class and in showHide function first hide all elements and then show the one you want.
so your js code will be
showHide = function()
{
var showHideItems = document.getElementsByClassName('hidden-items');
for(var i =0;i<showHideItems.length;i++){
showHideItems[i].style.display = 'none';
}
var val = document.getElementById("ActionDD").value;
if(val == "complete")
document.getElementById("REMtextBox").style.display = 'inline-block';
else if(val == "abandon")
document.getElementById("ReasonDD").style.display = 'inline-block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'inline-block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'inline-block';
}
and your html will be
<select name="Action" id="ActionDD" required onchange="showHide()">
<option value="">Action:</option>
<option value="complete">Complete</option>
<option value="abandon">Abandon</option>
<option value="transfer">Transfer</option>
</select>
<input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" maxlength="10" style="display:none;"/>
<select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;" required>
<option value="">Reason:</option>
<option value="NoShow">No Show</option>
<option value="Unfixable">Unfixable</option>
<option value="other">Other</option>
</select>
here is working jsfiddle for you code https://jsfiddle.net/jpj42ojz/
I have been researching how to copy a a text field value into a drop down menu and have only been seeing how to accomplish the opposite. Can somebody help me tweak this code so it will copy the shipping city value (text field) into the billing city (drop down)?
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<P>
<script type="text/javascript">
<!--
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.billingname.value = f.shippingname.value;
f.billingcity.value = f.shippingcity.value;
}
}
// -->
</script>
<TABLE BORDER=1><TR><TD BGCOLOR="eeeeee">
<b>Mailing Address</b>
<br><br>
<form>
Name:
<input type="text" name="shippingname">
<br>
City:
<input type="text" name="shippingcity">
<br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<P>
<b>Billing Address</b>
<br><br>
Name:
<input type="text" name="billingname">
<br>
City:
<select name="billingcity">
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
</select>
</form>
</TD></TR></TABLE>
</body>
</html>
It's a little messy, but here's my attempt at what you seem to want:
function FillBilling(f) {
if (f.billingtoo.checked === true && f.shippingcity.value) {
f.billingname.value = f.shippingname.value;
var found = false;
for (var i = 0; i < f.billingcity.options.length; i++) {
if (f.billingcity.options[i].value.toLowerCase() === f.shippingcity.value.toLowerCase()) {
f.billingcity.selectedIndex = i;
found = true;
break;
}
}
if (!found) {
var extraOption = f.billingcity.getAttribute("data-extra-option");
if (extraOption) {
f.billingcity.options[f.billingcity.options.length - 1].text = f.shippingcity.value;
f.billingcity.options[f.billingcity.options.length - 1].value = f.shippingcity.value;
} else {
var newOption = new Option(f.shippingcity.value, f.shippingcity.value);
f.billingcity.setAttribute("data-extra-option", "true");
f.billingcity.appendChild(newOption);
f.billingcity.selectedIndex = f.billingcity.options.length - 1;
}
} else {
if (f.billingcity.getAttribute("data-extra-option")) {
f.billingcity.removeChild(f.billingcity.options[f.billingcity.options.length - 1]);
f.billingcity.selectedIndex = 0;
}
}
} else {
if (f.billingcity.getAttribute("data-extra-option")) {
f.billingcity.removeChild(f.billingcity.options[f.billingcity.options.length - 1]);
f.billingcity.selectedIndex = 0;
}
}
}
DEMO: http://jsfiddle.net/J8YrU/1/
This function is now called both for the checkbox being clicked and the Shipping City textbox value being changed.
What this function does is this:
If the text that's typed in the textbox matches an existing dropdown option, it selects that value
If the text that's typed in the textbox doesn't match an existing dropdown option, it will append a new option to the end with the user's input, and select it
If the text that's typed in the textbox doesn't match an existing dropdown option but there's already a new, custom option added in (from the last bullet), it just updates its text/value.
So test it, try these things:
Type in "City 3" in the textbox
Type in "asdf" in the textbox
Type in "asdf3" in the textbox
Type in "City 2" in the textbox
You can check the state of the dropdown after each thing you try and see what's happening to it. Also, you can toggle the checkbox at any point to test as well.
To add a value to a select element, you need to add an option element with appropriate text and value properties. So you might do:
var select = f.billingcity;
// Create a new option element, passing values for the text and value proprties
var option = new Option(f.shippingcity.value, f.shippingcity.value);
// Append the option to the select
select.appendChild(option);
// Make the new option the selected option
option.selected = true;
You need to make use of ID, and document.getElementById effectively in order to get the proper form elements and re-assign the values in the dropbox/select when the button is clicked.
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<P>
<script type="text/javascript">
<!--
function FillBilling(f) {
if(f.billingtoo.checked == true) {
document.getElementById("billingname").value = document.getElementById("shippingname").value;
var optn = document.createElement("OPTION");
optn.text = document.getElementById("shippingcity").value;;
optn.value = document.getElementById("shippingcity").value;;;
document.getElementById("billingcity").options.add(optn);
}
}
// -->
</script>
<TABLE BORDER=1><TR><TD BGCOLOR="eeeeee">
<b>Mailing Address</b>
<br><br>
<form>
Name:
<input type="text" name="shippingname" id="shippingname">
<br>
City:
<input type="text" name="shippingcity" id="shippingcity">
<br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<P>
<b>Billing Address</b>
<br><br>
Name:
<input type="text" name="billingname" id="billingname">
<br>
City:
<select id="billingcity" name="billingcity">
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
</select>
</form>
</TD></TR></TABLE>
</body>
</html>
In order to change the select value as opposed to adding, you would use:
document.getElementById("billingcity").value=document.getElementById("shippingcity").value;
I would recommend including jquery
and then doing something like this:
function FillBilling(f) {
if(f.billingtoo.checked == true) {
var $firstCity = $('select option:first-child');
$firstCity.attr('text', f.shippingcity.value);
$firstCity.attr('value', f.shippingcity.value);
}
This should update the first option of select to the city user enters
Also as another user suggested it'd be better practice to give the select some id (for example selectIdentificator), and then update the above code like this
var $firstCity = $('#selectIdentificator option:first-child');
I have a work code for one select field with other option, that displays a text box when other is selected. However, I'm having trouble writing the code for 2 select boxes on the same page.
Here is my script.
function toggleField(val) {
var o = document.getElementById('other');
(val == 'Other') ? o.style.display = 'block': o.style.display = 'none';
}
<SELECT NAME="i_skate" SIZE="1" ONCHANGE="toggleField(this.value);">
<OPTION VALUE="Just a Fan">Just a Fan</OPTION>
<OPTION VALUE="Everyday">Everyday</OPTION>
<OPTION VALUE="Few times a Week">Few times a Week Week
</OPTION>
<OPTION VALUE="Few times a Month">Few times a Month Month
</OPTION>
<OPTION VALUE="Other">Other</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="other" ID="other" STYLE="display: none;" SIZE="20">
</TD>
<TD WIDTH="10" ALIGN="LEFT"></TD>
<TD WIDTH="110" ALIGN="LEFT" VALIGN="TOP">
<SELECT NAME="my-style" SIZE="1" ONCHANGE="toggleField(this.value);">
<OPTION VALUE="Street Skate">Street Skate</OPTION>
<OPTION VALUE="Downhill">Downhill</OPTION>
<OPTION VALUE="Freestyle">Freestyle</OPTION>
<OPTION VALUE="Pools-Bowls">Pools-Bowls</OPTION>
<OPTION VALUE="Vert Halfpipe">Vert Halfpipe</OPTION>
<OPTION VALUE="Park">Park</OPTION>
<OPTION VALUE="Mini Ramp">Mini Ramp</OPTION>
<OPTION VALUE="Other1">Other1</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="other1" ID="other1" STYLE="display: none;" SIZE="20">
What am I missing?
If I'm understanding you correctly, you want to just have your second SELECT tag display the second INPUT box when "Other1" is selected, just like the first one does for "Other".
You are really close, but your Javascript needs some adjusting. You are currently testing for the changed element of "Other", and then altering the display for the object o which is a reference to the element with id of "other". You will need to expand on this logic to include your new select box (with option of "Other1") and the corresponding INPUT box.
So, you might need to do something like...
<SCRIPT TYPE="text/javascript">
function toggleField(val) {
var o = document.getElementById('other');
var o1 = document.getElementById('other1');
(val == 'Other')? o.style.display = 'block' : o.style.display = 'none';
(val == 'Other1')? o1.style.display = 'block' : o1.style.display = 'none';
}
</SCRIPT>
That will expand the same functionality from the first SELECT to the second.