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>
Related
Basically, I want to make a site with a button that repeatedly asks user for input. However, one of the inputs that the site asks for involves a select field and depending on the select field, have a corresponding text field appear or dissapear(values none). My javascript utilizes a for loop as the user can repeatedly press the button to add more and more select fields( and corresponding text field).
Here is jsfiddle
Below is the example code of what I'm trying to do.
HTML
<div><select class="DISPLAYTYPE" id="QBox" data-fieldtype="P">
<option value = "text">TextBox</option>
<option value = "check">CheckBox</option>
<option value = "radio">Radio</option>
</select></div>
<input type="number" min="1" value="LENGTH" class="quantumBox" id="P">
JAVASCRIPT
var textBoxList = document.getElementsByClassName("DISPLAYTYPE");
for (var i=0; i<textBoxList.length;i++){
textBoxList[i].addEventListener('change', function(){
var subParam = textBoxList[i].options[textBoxList.selectedIndex].value;
if(subParam ="text"){
//make ONLY corresponding input box appear
}else{
//make ONLY corresponding input box dissapear
}
})
};
EDIT: This is the Structure
[table id="rootPlacement"]
//insert here
[/table]
[button/] <--This will make a duplicate of invisible html and place it under invisible root
//The invisible html stuff we want to duplicate into //insert here
Given your feedback about the HTML structure in the comments, you can use the following to achieve what you are trying to. Just look into
You are trying to get the selected value inside the change event for the drop-down by using var subParam = textBoxList[i].options[textBoxList.selectedIndex].value; rather than using textBoxList[i] you can use this so that i becomes var subParam = this.options[this.selectedIndex].value.
For showing hiding the inputs you can use the function findRoot() which takes the target element object i.e ``selectand finds a parent with the class namedrootPlacement` and returns the node and then you can iterate it's children to show the selected node and hide the rest.
See a demo below
var textBoxList = document.querySelectorAll(".DISPLAYTYPE");
for (var i = 0; i < textBoxList.length; i++) {
textBoxList[i].addEventListener('change', function() {
var selectedType = this.options[this.selectedIndex].value;
let rootPlacement = findRoot(this, 'rootPlacement');
let children = rootPlacement.children;
for (var c = 0; c < children.length; c++) {
let element = children[c];
let elementType = element.type;
let isInputElement = typeof elementType !== 'undefined';
if (isInputElement) {
if (elementType == selectedType) {
element.style.display = 'inline';
} else {
element.style.display = 'none';
}
}
}
});
};
function findRoot(el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
input {
display: none;
}
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox1" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="" class="quantumBox" id="P1">
<input type="checkbox" value="" class="quantumBox" id="q1">
<input type="radio" value="" class="quantumBox" id="r1">
</div>
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox2" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="LENGTH" class="quantumBox" id="P2">
<input type="checkbox" value="" class="quantumBox" id="q2">
<input type="radio" value="LENGTH" class="quantumBox" id="r2">
</div>
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox3" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="LENGTH" class="quantumBox" id="P3">
<input type="checkbox" value="" class="quantumBox" id="q3">
<input type="radio" value="LENGTH" class="quantumBox" id="r3">
</div>
<form action="order.php" method="post" name="myForm" id="dropdown" onsubmit="return(validate());">
<input list="From" name="From" autocomplete="off" type="text" placeholder="From Place">
<datalist id="From">
<option value="Stand">
<option value="Hospital">
</datalist>
</form>
Script Validation :
<script>
if (document.myForm.From.value == "") {
alert("Please select From Place.!");
return false;
}
</script>
If null then given me the error message :
Please select From Place.!
User's input is also printing... But i need Option Value to print only ie. "Stand","Hospital"...
I have also deleted type="text" but it didn't change anything.
You need to loop inside your datalist options when submiting :
HTML
<form>
<input list="datalist" id="input">
<datalist id="datalist">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<button onclick="myFunction()">Check</button>
<p id="result"></p>
JS
function myFunction() {
var options = document.getElementById("datalist").options;
var result = false;
for (var i = 0; i < options.length; i++) {
if(document.getElementById("input").value == options[i].value) {
result = true;
}
}
document.getElementById("result").innerHTML = "Validate : " + result + ".";
}
Then you can use the Boolean for your validation.
You can see the result on this fiddle.
I am new to JavaScript and I am trying to make an html page with JavaScript inside it.
The idea is that, when someone selects the value of option from the select, it should generate automatically the fields of firstName, lastName etc depending on the number which is selected. If one is selected then it should have one field of firstName, lastName and if two is selected then it should generate two fields dynamically.
<select id="noOfAuthor" multiple="multiple">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
If someone selects one then below there should be one code of
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
If we selects “2” then there should be two code asking
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
And so on and so forth.
I tried to write a code for doing this, but it is not working.
<html>
<head>
<title>Book Collection</title>
<script language="JavaScript">
function WBook(bookName, writer, yearPublished)
{
this.Title = bookName;
this.Author = writer;
this.CopyrightYear = yearPublished;
}
function showBook(oneBook)
{
var no = showChoices();
var i ;
for(i =0; i<no; i++)
{
document.frmBooks.txtTitle[i].value = oneBook.Title[i];
document.frmBooks.txtAuthor[i].value = oneBook.Author[i];
document.frmBooks.txtCopyrightYear[i].value = oneBook.CopyrightYear[i];
}
}
function displayCollection()
{
var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
showBook(aBook);
}
function showChoices(){
var noOfAuthor = document.getElementById("noOfAuthor");
var result = " You selected";
result += " \n";
for(i=0; i<noOfAuthor.length;i++){
currentOption = noOfAuthor[i];
if(currentOption.selected == true){
result += currentOption.value + "\n";
}
}
result += " \n";
alert(result);
return(result);
}
</Script>
</head>
<body>
<h1>Book Collection</h1>
<form name="frmBooks">
<input type="hidden" name="id" value="" required="true" /><br> <br>
<select id="noOfAuthor" >
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
<button type="button" onclick="showChoices()">Submit</button>
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
<p><input type="button" value="Show Collection" name="btnShow" onClick="displayCollection()">
</form>
</body>
</html>
You can solve it like this (jsFiddle demo):
<html>
<head>
<title>Book Collection</title>
<script language="JavaScript">
function WBook(bookName, writer, yearPublished)
{
this.Title = bookName;
this.Author = writer;
this.CopyrightYear = yearPublished;
}
function showBook(oneBook)
{
var no = showChoices();
var i ;
for(i =0; i<no; i++)
{
document.frmBooks.txtTitle[i].value = oneBook.Title[i];
document.frmBooks.txtAuthor[i].value = oneBook.Author[i];
document.frmBooks.txtCopyrightYear[i].value = oneBook.CopyrightYear[i];
}
}
function displayCollection()
{
var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
showBook(aBook);
}
function showChoices(){
var noOfAuthor = document.getElementById("noOfAuthor");
var result = " You selected";
result += " \n";
result += noOfAuthor.value
for(i=1; i <= noOfAuthor.length;i++){
if(i <= noOfAuthor.value){
document.getElementById("inputs" + i).style.display = 'block';
} else {
document.getElementById("inputs" + i).style.display = 'none';
}
}
result += " \n";
alert(result);
return(result);
}
</Script>
</head>
<body>
<h1>Book Collection</h1>
<form name="frmBooks">
<input type="hidden" name="id" value="" required="true" /><br> <br>
<select id="noOfAuthor" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button type="button" onclick="showChoices()">Submit</button>
<div id="inputs1">
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
</div>
<div id="inputs2" style="display:none">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
</div>
<div id="inputs3" style="display:none">
Title Name <input type="text" name="txtTitle3">
Author Name <input type="text" name="txtAuthor3" >
Copy right<input type="text" name="txtCopyrightYear3">
</div>
<div id="inputs4" style="display:none">
Title Name <input type="text" name="txtTitle4">
Author Name <input type="text" name="txtAuthor4" >
Copy right<input type="text" name="txtCopyrightYear4">
</div>
<div id="inputs5" style="display:none">
Title Name <input type="text" name="txtTitle5">
Author Name <input type="text" name="txtAuthor5" >
Copy right<input type="text" name="txtCopyrightYear5">
</div>
<p><input type="button" value="Show Collection" name="btnShow" onClick="displayCollection()">
</form>
</body>
</html>
very simple with jquery:
<select id="noOfAuthor" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="inputs"></div>
$( document ).ready(function() {
$("select#noOfAuthor > option").click(function() {
$( "#noOfAuthor" ).attr("disabled", true);
var howMuch = parseInt($( "#noOfAuthor" ).val());
for(i = 0; i < howMuch; i++) {
$( "#inputs" ).append('Title Name: <input type="text" name="txtTitle' + i + '"><br>Author Name: <input type="text" name="txtAuthor' + i + '"><br>Copy right: <input type="text" name="txtCopyrightYear' + i + '"><br><hr />');
}
});
});
So you get inputs as the selected number.
the Three first willl be:
name="txtTitle0"
name="txtAuthor0"
name="txtCopyrightYear0"
demo: http://jsfiddle.net/mxgbc/3/
I would generate the inputs and labels dynamically. This is a pure javascript example, without using jQuery. I can provide a jQuery solution if you need it.
Example http://jsfiddle.net/A62qA/1 // basic select menu
Example http://jsfiddle.net/A62qA/2/ // mutiple choice select menu
HTML
<select id="noOfAuthor" onchange="inputFunction(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="myContainer"></div>
JavaScript
function createInputs(i) {
var myContainer = document.getElementById("myContainer");
var titleName = document.createElement("input");
titleName.setAttribute('name', 'txtTitle1' + i);
var label = document.createElement("Label");
label.innerHTML = "Title Name";
myContainer.appendChild(label);
myContainer.appendChild(titleName);
var authorName = document.createElement("input");
authorName.setAttribute('name', 'txtAuthor1' + i);
var label = document.createElement("Label");
label.innerHTML = "Author Name";
myContainer.appendChild(label);
myContainer.appendChild(authorName);
var copyRight = document.createElement("input");
copyRight.setAttribute('name', 'txtCopyrightYear1' + i);
var label = document.createElement("Label");
label.innerHTML = "CopyRight";
myContainer.appendChild(label);
myContainer.appendChild(copyRight);
}
function inputFunction(y) {
var y = y.value;
var myContainer = document.getElementById("myContainer");
for (var i = 0; i < y; i++) {
createInputs(i);
}
}
My code isn't disabling the other fields. please help
i am trying to select either a participant or exhibitor.once the participant is selected the other fields must be disable.
the Html
<label> <span>Test:</span>
<select id="reg" name="reg" onkeyup="disableField()">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
the javascript
var disableField = function () {
var state = document.getElementById("reg").value === "Participant";
document.getElementById("test1").disabled = state;
document.getElementById("test2").disabled = state;
};
Do not use inline javascript. It makes your code messy and not reusable.
[Edit] This is a working example for you:
<html>
<head> <title></title></head>
<body>
<label> <span>Test:</span>
<select id="reg" name="reg">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
<script type="text/javascript">
//<!--
var obj = document.getElementById("reg");
obj.onchange = function(event){
if(this.value=="Male"){
document.getElementById("test1").disabled = 'disabled';
document.getElementById("test2").disabled = 'disabled';
}else{
document.getElementById("test1").disabled = '';
document.getElementById("test2").disabled = '';
}
}
//--></script>
</body>
</html>
[/edit]
Have fun and may the source be with you.
Firstly, use onchange:
<select id="reg" name="reg" onchange="disableField()">
Secondly:
Your option values are 'male' and 'female'. So use that to compare:
var state = document.getElementById("reg").value == "Male";
try this ....it is working
<script type="text/javascript">
function disableField() {
var state = document.getElementById("reg").value === "Participant";
if (state == false) {
document.getElementById("test1").style.visibility = "hidden";
document.getElementById("test2").style.visibility = "hidden";
}
};
</script>
Try this,
<label> <span>Test:</span>
<select id="reg" name="reg" onchange="disableField();">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
JS
function disableField() {
var val = document.getElementById("reg").value;
if(val == 'Male') {
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
} else {
document.getElementById("test1").disabled = false;
document.getElementById("test2").disabled = false;
}
}
Check value for Male not Participant
Here is the working code,
<html>
<head>
<script>
function disableField() {
alert('jdhsfg')
var val = document.getElementById("reg").value;
if(val == 'Male') {
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
} else {
document.getElementById("test1").disabled = false;
document.getElementById("test2").disabled = false;
}
}
</script>
</head>
<body>
<label> <span>Test:</span>
<select id="reg" name="reg" onchange="disableField();">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
</body>
</html>
Add an on change in the select list
<select id="reg" name="reg" onchange="SelectedIndexChanged(this)">
function SelectedIndexChanged(e){
var selectedValue= e.value;
//if Participant is selected
if(selectedValue == "Participant "){
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
}
}
so i have a table as follows:
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
on default, 'select layout' is what is displayed. on the click of a button, i need the select box to display 'custom'. i tried searching around SO, but I'm trying to do this without Jquery..
Try this... Its simple... Really Works..
<script type="text/javascript">
function fun()
{
document.getElementById("CellLayout").selectedIndex = 4;
}
</script>
<form name="f1">
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" >
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" onclick="fun()"/>
</form>
You can just change the selects value, like so :
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" value="change" onclick="change()" />
<script type="text/javascript">
function change() {
document.getElementById('CellLayout').value = 'custom';
}
</script>
FIDDLE
You can try it:
<select id="CellLayout" style="color:#000; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option value="0">select layout</option>
<option value="1">blinker</option>
<option value="2">glider</option>
<option value="3">flower</option>
<option value="4">custom</option>
</select>
<input id="btn" type="submit" value="setSelected">
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function(){
var layOut = document.getElementById('CellLayout');
for(var i = 0; i < layOut.length; i++){
if(layOut.options[i].value == '4'){
layOut.selectedIndex = i;
}
}
}
</script>
According to my understand of your question. May be following is your answer. Please check.
In html:
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" value="clickHere" onclick="javascript:call()"/>
In javascript:
function call() {
var textToFind = 'custom';
var dd = document.getElementById('CellLayout');
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectedIndex = i;
break;
}
}
}