<script type="text/javascript">
function myfunction() {
if (document.getElementById('myform').value == "yes") {
document.getElementById('yesinput').style.display = '';
} else {
document.getElementById('yesinput').style.display = 'none';
}
}
</script>
<select name="myform" id="myform" onchange="myfunction()">
<option selected="selected">please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div id="yesinput" style="display:none">
<input name="input" type="text" />
</div>
<div id="noinput" style="display:none">
<input name="input" type="text" />
</div>
Help ya. How to make if we select No will have another input field below the id="noinput".
Now it's working if we select Yes. let me know
function myfunction() {
if (document.getElementById('myform').selectedIndex == 0) {
document.getElementById('noinput').style.display = 'none';
document.getElementById('yesinput').style.display = 'inline';
} else {
document.getElementById('noinput').style.display = 'inline';
document.getElementById('yesinput').style.display = 'none';
}
}
You can construct a new Element and append it to the DOM via Javascript. An example:
var newInput = document.createElement("input");
newInput.setAttribute("id", "newElement");
newInput.setAttribute("type", "text");
document.body.appendChild(newInput);
Related
How to show the form field (input type) in the when I clicked "7th" from the select menu.
your html code should be like
<select id="select">
<option value="6th">6Th</option>
<option value="7th">7Th</option>
</select>
<input type="text" id="textbox" name="textbox"/>
and by using jQuery show textbox like
$( document ).ready(function() {
$('#textbox').hide();
});
$('select').on('change', function() {
if(this.value == '7th'){
$('#textbox').show();
}
});
if you do not want to rely on jquery this is a javascript example.
<head>
<script>
window.onload = function(){
var dropdown = document.getElementById("example");
var textbox = document.getElementById("textbox");
dropdown.addEventListener("change", function() {
if(dropdown.value == 7){
textbox.style.display = "block";
}else{
textbox.style.display = "none";
}
});
}
</script>
</head>
<body>
<select id="example">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="7"> 7 </option>
</select>
<input id="textbox" type="text" style="display:none;">
</body>
I want to validate a textfield when a relating dropdown is selected.
usually it should be allowed to submit null but when its relating drop menu is selected null should not be allowed.
<select>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
Lets say i select red from the dropdown
<input name="red" id="red" type="text">
should be required, while others like <input name="blue" id="blue" type="text"><input name="green" id="green" type="text"> can be sent as null and vice versa.
The text field should serve as a full detail for the option selected so, it should correspend.
Is there a way to handle this with javascript?
<html>
<head>
<script>
window.addEventListener('load',function(){ SimpleVal.init(); });
var SimpleVal = {};
SimpleVal.init = function(){
this.form = document.getElementById("myForm");
this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
let sel = this.form.elements.namedItem("select");
this.form.addEventListener("change",function(){
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
if(sel.value){
this.form.elements.namedItem(sel.value).disabled = false;
if(this.form.elements.namedItem(sel.value).value) this.form.elements.namedItem("submit").disabled = false;
}
}.bind(this));
};
</script>
</head>
<body>
<form id='myForm'>
<select name='select'>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name='red' type='text'/>
<input name='blue' type='text'/>
<input name='green' type='text'/>
<input name='submit' type='submit'/>
</form>
</body>
</html>
https://jsfiddle.net/d0ep6z16/
https://jsfiddle.net/yce3Ljpf/1/
<select id="colors">
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name="blue" id="red" type="text" class="color-input">
<input name="blue" id="blue" type="text" class="color-input">
<input name="green" id="green" type="text" class="color-input">
<script>
document.getElementById('colors').addEventListener("change", function() {
if (this.value.length) {
var inputs = document.getElementsByClassName("color-input");
for(var i = 0; i < inputs.length; i++) {
inputs.item(i).removeAttribute('required');
}
document.getElementById(this.value).setAttribute('required', 'required');
}
});
</script>
OK so I've laid this out so you can see what's happening:
<select id="colourSelect" onchange="val()">
<option value="nothing">Please Choose:</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<br><br>
<input type="text" id="colourTextInput" size="50" onkeyup="clearMe()">
<br><br>
<button type="submit">Submit Button</button>
<script>
function val() {
d = document.getElementById("colourSelect").value;
if(d !== "nothing")
{
document.getElementById("colourTextInput").value = d;
}
else
{
document.getElementById('colourTextInput').value = "";
}
}
function clearMe() {
selectBox = document.getElementById("colourSelect");
selectBox.selectedIndex = null;
}
</script>
When the value of the dropdown is changed the value in the text box is set to the same as the dropdown. If they then go to the text field and try to change the colour, it defaults the dropdown back to its default setting, meaning that you can only ever have one or the other.
It could be made cleaner by simply clearing the text field when the dropdown is selected etc, but it gives you something to work with.
https://jsfiddle.net/cx1x2txu/
I modified this and got it right. Thanks all
<html><html>
<head>
<script>
window.addEventListener('load',function(){ SimpleVal.init(); });
var SimpleVal = {};
SimpleVal.init = function(){
this.form = document.getElementById("myForm");
this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
let sel = this.form.elements.namedItem("select");
this.form.addEventListener("change",function(){
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
if(sel.value){
this.form.elements.namedItem(sel.value).disabled = false;
if(this.form.elements.namedItem(sel.value).value) this.form.elements.namedItem("submit").disabled = false;
}
}.bind(this));
};
</script>
</head>
<body>
<form id='myForm'>
<select name='select'>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name='red' type='text'/>
<input name='blue' type='text'/>
<input name='green' type='text'/>
<input name='submit' type='submit'/>
</form>
</body>
</html>
I have a page with dropdownbox with 2 values,and if I select one value I should get three textboxes and if I SELECT OTHER VALUE i Should get different textbox.how to do this by using javascript?
Please help me ...
Regards,
Dhanya Raj
function select_value(valueSelect)
{
if(valueSelect){
value1 = document.getElementById("one").value;
value2 = document.getElementById("two").value;
if(value1 == valueSelect.value){
document.getElementById("three_text_boxes").style.display = "block";
document.getElementById("one_text_box").style.display = "none";
}
else if(value2 == valueSelect.value) {
document.getElementById("one_text_box").style.display = "block";
document.getElementById("three_text_boxes").style.display = "none";
}
}
else{
return false;
}
}
#three_text_boxes , #one_text_box{
display:none;
}
<select onchange="select_value(this);">
<option id="zero" value="0">None</option>
<option id ="one" value="1">one</option>
<option id="two" value="2">two</option>
</select>
<div id="three_text_boxes" >
<input type="text">
<input type="text">
<input type="text">
</div>
<div id="one_text_box" >
<input type="text">
</div>
Is this the same that you are looking for?
Hope this helps.
I'm trying to show or hide the div based on the option selected. When Customer is selected, it should show retCustDetails and when Trade is selected it should show tradeCustDetails.
Please let me know what I'm missing on the codes below.
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change()">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
JS
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected === '1'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
There were few minor mistakes in your code, I have corrected it to make it work -
<body>
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change(this)">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails" style="display:none">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
<script>
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected == 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
</script>
</body>
You are using visibility:hidden in your html but in your js your are changing the display property.
Change visibility:hidden to display:none.
Use this as change funtion's parameter like onchange="change(this)"
And JS function change to following.
function change(obj) {
var selectBox = obj.value;
var retCustDetails = document.getElementById('retCustDetails');
var tradeCustDetails = document.getElementById('tradeCustDetails');
if(selectBox == 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
This is an alternative method. This too works. Cheers !
<script>
jQuery(function($) {
$('#show').change(function(){
var val = $(this).val();
if( val == 'ret') {
$('#retCustDetails').show();
$('#tradeCustDetails').hide();
} else if(val == 'trd') {
$('#tradeCustDetails').show();
$('#retCustDetails').hide();
} else {
$('#tradeCustDetails').hide();
$('#retCustDetails').hide();
}
});
});
</script>
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails" style="display:none">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
pass the this as argument to the change() method. Also change the if condition as like below
if(selected === 'ret'){
//...
}
because you get the selected value, it give either "ret" or "trd"
Change the tradeCustDetails visibility: hidden to display: none
Try this code.
function change(obj) {
//alert(obj);
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected === 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change(this)">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
Hope this will help you.
For some reason the code below it is not working correctly. Unless I'm being quite stupid with my JavaScript I can't see what's going wrong besides the onclick events not firing on the <option>s.
function showOther() {
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
function hideOther() {
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
#other {
display: none;
}
#otherBr {
display: none;
}
<select name="" id="drop_down">
<option value="choose" onclick="hideOther();">Please choose</option>
<option value="Allure" onclick="hideOther();">Allure</option>
<option value="Elle" onclick="hideOther();">Elle</option>
<option value="In-Style" onclick="hideOther();">In-Style</option>
<option value="other" id="otherOption" onclick="showOther();">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />
Add this function to your JS:
function showHideOther(){
if (document.getElementById('drop_down').value == 'other') {
showOther();
} else {
hideOther();
}
}
And change your select element like this:
<select name="" id="drop_down" onchange="showHideOther();">
<option value="choose">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle">Elle</option>
<option value="In-Style">In-Style</option>
<option value="other">Other</option>
</select>
function showHideOther() {
if (document.getElementById('drop_down').value == 'other') {
showOther();
} else {
hideOther();
}
}
function showOther() {
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
function hideOther() {
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
#other {
display: none;
}
#otherBr {
display: none;
}
<select name="" id="drop_down" onchange="showHideOther();">
<option value="choose">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle">Elle</option>
<option value="In-Style">In-Style</option>
<option value="other">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />
An answer with JS only, not jQuery:
onclick event in option tag is just recognized by Firefox. If you need a solution that works on all browsers such as IE or Chrome you can use onchange event on your "Select" element.
HTML :
<select name="" id="drop_down" onchange="showHideOther(this.value);">
<option value="choose" ">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle" >Elle</option>
<option value="In-Style" >In-Style</option>
<option value="other" id="otherOption">Other</option>
</select>
JS defined in the html head section as script:
function showHideOther(value){
alert(value);
if (value==='other'){
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
else{
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
}
JSFiddle sample working fine: http://jsfiddle.net/amontellano/gLML3/14/
I hope it helps.
DEMO
var dropdown = document.getElementById('drop_down');
dropdown.onchange = function() {
var selected = dropdown.options[dropdown.selectedIndex].value;
switch(selected) {
case 'other':
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
break;
default:
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
break;
}
}
just add these function to your code:
$('#drop_down').on('change', function(){
($(this).val() == 'other') ? showOther() : hideOther();
});
se here: http://jsfiddle.net/gLML3/7/