I'm trying to get the form to display the text field after a dropdown option is chosen.
So when the option other is chosen, the input field will be displayed and become required.
function chooseOther()
{
var option = document.getElementById("inputJob");
if (option == 'Other'){
var field = document.getElementById("inputOtherJob");
field.style.display = 'inline';
}
}
<p> What is your profession? </p>
<select id="inputJob" name="inputJob" onchange = 'chooseOther()'>
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Other">Other</option>
</select>
<input id = "inputOtherJob" name = "inputOtherJob" style = 'display: none'>
Use if(option.value == 'Other'), you must compare option.value not option because option is the instanceof HTMLElement so you must get its value.
function chooseOther()
{
var option = document.getElementById("inputJob");
if (option.value == 'Other'){
var field = document.getElementById("inputOtherJob");
field.style.display = 'inline';
}
}
<p> What is your profession? </p>
<select id="inputJob" name="inputJob" onchange = 'chooseOther()'>
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Other">Other</option>
</select>
<input id = "inputOtherJob" name = "inputOtherJob" style = 'display: none'>
Here's a quick fix. Primarily you want to test against option.value == 'Other' rather than option == 'Other'
<select id="inputJob" name="inputJob" onchange='chooseOther()'>
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Other">Other</option>
</select>
<input id="inputOtherJob" name="inputOtherJob" style='display: none'>
<script>
function chooseOther() {
var option = document.getElementById("inputJob");
if (option.value == 'Other') {
var field = document.getElementById("inputOtherJob");
field.setAttribute("style","display:inline");
}
}
</script>
option.selectedOptions[0].text for displaying the selected text.
Use attribute required to make it required.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required
Related
Tried to create an Others option in a drop down menu, which by doing so, activates a textbox to type in.
However, my current method of doing this causes the remaining options to be invisible when clicked, and the textbox does not appear when the Others option is clicked.
function disappear(val) {
var textbox = document.getElementById('issue');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
you are selecting the wrong element
var textbox=document.getElementById('textbox');
function disappear(val){
var textbox=document.getElementById('textbox');
if(val=='other'){
textbox.style.display='block';
}
else{
textbox.style.display='none';
}
}
#textbox{
width:90px;
height:60px;
background-color:red;
display:none;
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
that's how you must do it:
var textbox=document.getElementById('textbox');
You're really close! The only thing left is to change the id in the document.getElementById to the correct element and add the input field with the styling.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<input id="textbox" type="text" style="display: none;">
Should your textbox actually be a textarea element? Note: if it's meant to be a div it won't appear on the page (unless you style it) because its content is empty.
Use CSS to initialise the textbox display to none.
In the function you've picked up the select element with your query, and not the textbox element which is why the options are disappearing when you set the display to none. Maybe add an additional check to see if the style is set to block before you set the display to none.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
if (textbox.style.display === 'block') {
textbox.style.display = 'none';
}
}
}
#textbox { display: none; }
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<textarea id="textbox"></textarea>
My problem is on how to make the second drop-down display once my first dropdown value selected is Courier
First the user must check the checkbox to show the first drop-down and this is my code
<p> <input type="checkbox" id="contract" class="icheckbox_flat-green" onclick="myFunctionCons()"> Contract </p>
Once checked, this contract via dropdown (first dropdown) will be visible
<select id="contractvia" style="display:none" class="form-control">
<option value="0">Via..</option>
<option value="1">Email</option>
<option value="2">FB Messenger</option>
<option value="3">Courier</option>
<option value="4">Others..</option>
</select>
My goal is to display this second dropdown once the contractvia's selected option is Courier
<select id="contractCourier" style="display:none" class="form-control">
<option value="">Courier</option>
<option value="scanned">Scanned</option>
<option value="net">Original</option>
<option value="mouth">Photocopy</option>
</select>
My first task to show the first dropdown once the checkbox is checked is achieved using this code, but it doesn't work for displaying the second dropdown once first dropdown's selected option is 'Courier'
<script>
function myFunctionCons() {
var con = document.getElementById("contract");
var conv = document.getElementById("contractvia");
var conc = document.getElementById("contractCourier");
if (con.checked == true) {
conv.style.display = "block";
} else {
conv.style.display = "none";
}
if ($("#contractvia").val() == 3)
conc.style.display = "block";
else
conc.style.display = "none";
}
</script>
Please check this in Vanilla Javascript
var con = document.getElementById("contract");
var conv = document.getElementById("contractvia");
var conc = document.getElementById("contractCourier");
//On checkbox return first select
con.addEventListener('click', myFunctionCons );
//if value of option is 3 show next select
conv.addEventListener('change', showSecondSelect );
function showSecondSelect() {
//3 is the index of courier
if (conv.selectedIndex == 3) {
conc.style.display = "block";
} else {
conc.style.display = "none";
}
}
function myFunctionCons() {
if (con.checked == true) {
conv.style.display = "block";
} else {
conv.style.display = "none";
}
}
#contractvia,
#contractCourier {
display: none;
}
<p><input type="checkbox" id="contract" class="icheckbox_flat-green">Contract</p>
<select id="contractvia" class="form-control">
<option value="0">Via..</option>
<option value="1">Email</option>
<option value="2">FB Messenger</option>
<option value="3">Courier</option>
<option value="4">Others..</option>
</select>
<select id="contractCourier" class="form-control">
<option value="Courier">Courier</option>
<option value="scanned">Scanned</option>
<option value="net">Original</option>
<option value="mouth">Photocopy</option>
</select>
I have a form with dropbox with a few options.
I want to change a paragraph according to the selected value in the dropbox, i.e. the selected value will replace the paragraph.
For ex. I have:
<select name="howmanyno1" size=1>
<option value=2 selected>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>
//somewhere below
<p>number</p>`
I need the text "number" be replaced after selecting a value from the dropbox, with the value selected (2,3,4 or 5).
How should I do this?
Thanks.
<select onchange="myFunction()" name="howmanyno1" id="mySelect">
<option value=2 selected>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>
<p id="demo">number</p>`
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
<select name="howmanyno1" id="selectDiv" size=1 onchange="changePara()">
<option value=2 selected>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>
//somewhere below
<p id="changed">number</p>
js code
function changePara(){
var val = document.getElementById("selectDiv").value;
if(val == 2){
document.getElementById("changed").innerHTML = "something";
}
else if(val == 3){
document.getElementById("changed").innerHTML = "something else";
}
// and so on
}
A jQuery based solution
Add an id to your <p> element
<p id="para">number</p>
Use jQuery to select the <select> box
let select = $('select[name="howmanyno1"]')
Create a function for updating the text in <p>
let updateText = function(e) {
$('#para').text("Selected item: " + select.val())
}
And then make the select box listen to the change event
select.on('change', updateText)
I hope this solution will be usefull
var textBlocks = new Array(
'Select from the list to change this box',
'Text block two',
'Text block three');
function changeText(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("display").innerHTML=textBlocks[ind];
}
</head><body>
<select id="dropDown" onChange="changeText('dropDown');">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select><br>
<div id="display">Select from the list to change this box</div>
</body></html>
How to display error messgae using javascript or jquery only when both the feilds are empty. For example a user can either enter Zipcode or select a state from dropdown. If the user doesnot select any one of those then the error should be displayed.
You can get the value of the elements by document.getElementById("id").value
function Validate() {
var zip = document.getElementById("zip").value;
var state = document.getElementById("state").value;
if(zip == "" && state == 0) {
document.getElementById("error").innerHTML = "Error message";
}
else {
document.getElementById("error").innerHTML = "";
}
}
<input type="text" id="zip">
<select id="state">
<option value="0">Select a state</option>
<option value="State 1">State 1</option>
<option value="State 2">State 2</option>
<option value="State 3">State 3</option>
<option value="State 4">State 4</option>
</select>
<p id="error"></p>
<button onclick="Validate()">Submit</button>
Note : You can disable an element when the other is selected using document.getElementById("id").disabled = true;
I want a drop down element where user can select from available options or select enter value option which in turn allows to enter value.
I specifically want that user can enter value only when they select "Enter a value " option.
Here is what I have tried so far.
HTML-
<div class="ginput_container">
<select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<input type="text" value="None" class="holder" >
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
} else {
x.find('.holder').val(x.find('option:selected').text());
}
});
JS fiddle
however it wont work properly if i click the enter value option again.
I think there are many plugins that do what you want but if you want to create your own, it's a basic and simple solution.
You can create a select and a textbox with display:none like this:
<select id="ddlDropDownList">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="-1">Enter Value</option>
</select>
<input id="txtTextBox" type="text" />
<style>
#txtTextBox{
display:none;
}
</style>
then try this JQuery:
$("#ddlDropDownList").change(function(){
if($(this).val() == '-1'){
$("#txtTextBox").fadeIn();
}else{
$("#txtTextBox").fadeOut();
}
});
Check JSFiddle Demo
I have forked your JSFiddle to http://jsfiddle.net/pwdst/4ymtmf7b/1/ which I hope does what you wanted to achieve.
HTML-
<div class="ginput_container">
<label for="input_1_4">Select option</label>
<select class="medium gfield_select" id="input_1_4" name="input_4" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<div>
<label class="hidden-label" for="input_1_4_other">Other value</label>
<input class="holder" id="input_1_4_other" disabled="disabled" name="input_1_4_other" placeholder="None" type="text" />
</div>
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var $this = jQuery(this);
var val = $this.val();
var holder = $this.parent().find('.holder');
if (val === "*"){
holder.val('');
holder.removeAttr('disabled');
holder.focus();
} else {
holder.val(this.options[this.selectedIndex].text);
holder.attr('disabled', 'disabled');
}
});
When the "Enter value" option is chosen then the input box is enabled, value set to an empty string, and it is focused. If another option is chosen then the text input is disabled again, and the text value from the select list is used.
Thanks guys
I guess i have found my answer
HTML-
<div class="ginput_container">
<select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<input type="text" value="None" class="holder" >
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
jQuery(this).val("0"); // Change select value to None.
} else {
x.find('.holder').val(x.find('option:selected').text());
x.find('.holder').prop('disabled',true);
}
});
JS FIDDLE