Need help in the following snippet to get the value
Unable to work as find of the value is different
<html>
<head>
<script type="text/javascript">
var element = document.getElementById('grdgjj');
if (value == 'hfhkk')
element.style.display = 'block';
}
</script>
</head>
<body>
<form name="hfhj">
<div class="form-group">
<label for="Bsnsjs">trst</label>
<div class="controls">
<select required
class="form-control"
name="hdhsksks"
If you expect to get the value of input[type=text] when specificRegion option is selected, then what you should do is:
WhenOnChange event fired, check if specificRegion option is selected or not.
If yes, get the value of input[type=text].
<html>
<head>
<script type="text/javascript">
function specific_region(select) {
var element = document.getElementById('others');
var value = select.options[select.selectedIndex].text;
if (value == 'Specific Region'){
element.style.display = 'block';
var text = document.getElementById('others').value;
alert("Region: '" + text + "'");
}
else{
element.style.display = 'none';
alert(select.value);
}
}
</script>
</head>
<body>
<form name="buildStart">
<div class="form-group">
<label for="which_region">Region</label>
<div class="controls">
<select required
class="form-control"
name="region"
cam-variable-name="which_region"
cam-variable-type="String"
onchange="specific_region(this);">
<option value="management">Management</option>
<option value="specificRegion">Specific Region</option>
</select>
<br>
<input class="form-control"
id="others"
name="which_region"
style='display:none;'/>
</div>
</div>
</form>
You can obtain the text of an option field through its text property.
const select = document.querySelector('select');
console.log(select.options[0].text)
console.log(select.options[1].text)
<form name="buildStart">
<select>
<option value="management">Management</option>
<option value="specificRegion">Specific Region</option>
</select>
</form>
Related
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>
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>
presently stuck in situation. trying to create a form where one can dynamically add and remove div elements where necessary,so far have been a to DYNAMICALLY ADD, problem is if i try to REMOVE div,only the last created gets to delete whilst others remain(excluding the parent div)KINDLY ASSIST.
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="box">
<div id='div' style="background: #99CCFF; height: 100px; width:300px" >
<p>Degree Level: <select id="dropdown">
<option value="Doctorate Degree">Doctorate Degree</option>
<option value="Masters">Masters</option>
<option value="Bachelors Degree">Bachelors Degree</option>
<option value="SSCE">SSCE</option>
</select></p>
<label for="firstname">School Name</label>
<input type="text" placeholder="Your Role"">
<label for="from">From</label>
<input type="text" id="from" name="from">
<br>
<label for="to">to</label>
<input type="text" id="to" name="to">
</div>
</div>
<div>
<button id="submit1">Add new div</button>
<input type="button" value="Remove Element"
onClick="removeElement('box','div');">
</div>
</body>
<script>
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
var counter = 1;
submit1.onclick = function () {
var new_field = template.cloneNode(true);
new_field.id = new_field.id + counter++
console.log(new_field.id)
box.appendChild(new_field);
return false;
};
</script>
<script>
function removeElement(boxDiv, divDiv){
if (divDiv == boxDiv) {
alert("The parent div cannot be removed.");
}
else if (document.getElementById(divDiv)) {
var div = document.getElementById(divDiv);
var box = document.getElementById(boxDiv);
box.removeChild(div);
}
else {
alert("Child div has already been removed or does not exist.");
return false;
}
}
You are passing the string div to your remove element function which will only remove the first div.
You can find all the children elements and then remove the last child
Building on your previous code, see the snippet below
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
console.log(template);
var counter = 1;
submit1=document.getElementById("submit1");
submit1.onclick = function () {
var new_field = template.cloneNode(true);
new_field.id = new_field.id + counter++
console.log(new_field.id)
box.appendChild(new_field);
return false;
};
function removeElement(boxDiv){
var box = document.getElementById(boxDiv);
if(box.children){
console.log(box.children);
box.children[box.children.length-1].outerHTML="";
}
}
<div id="box">
<div id='div' style="background: #99CCFF; height: 100px; width:300px" >
<p>Degree Level: <select id="dropdown">
<option value="Doctorate Degree">Doctorate Degree</option>
<option value="Masters">Masters</option>
<option value="Bachelors Degree">Bachelors Degree</option>
<option value="SSCE">SSCE</option>
</select></p>
<label for="firstname">School Name</label>
<input type="text" placeholder="Your Role"">
<label for="from">From</label>
<input type="text" id="from" name="from">
<br>
<label for="to">to</label>
<input type="text" id="to" name="to">
</div>
</div>
<div>
<button id="submit1">Add new div</button>
<input type="button" value="Remove Element"
onClick="removeElement('box');">
</div>
It might be because js thinks you're only selecting the last one when doing
var div = document.getElementById(divDiv);
Try doing a loop until document.getElementById(divDiv) is undefined
I added a field for text input between the 2 Drop downs if Option number 3 is selected, the text box will appear.
This new text box should get numbers from the User and add new text fields under the Element for options.
For example: if the user adds the number 3 in the text box the radio button created, 3 new text boxes will show up under the Element row and look like this:
Option 1 _____________
Option 2 _____________
Option 3 _____________
// Funkcija za pravljenje Elemenata
var i = 0;
var a = 1;
function mojaFunkcija() {
var type1 = document.getElementById('type1').value;
var type2 = document.getElementById('type2').value;
var question = document.getElementById('question').value;
var counter = 'Element';
counter+= a;
var prviElement=document.createElement('span');
prviElement.textContent= counter + ':' +' ';
document.body.appendChild(prviElement);
var pitanje= document.createElement('span');
var unos='unos';
unos += i;
pitanje.id=unos;
pitanje.textContent=question + ' ';
document.body.appendChild(pitanje);
var tip1 = document.createElement("input");
var element='element';
element += i;
tip1.id=element;
if (type1=='textbox') {
tip1.type=type2
} else {
tip1.type=type1
}
document.body.appendChild(tip1);
var linija1= document.createElement("br");
document.body.appendChild(linija1);
var linija2= document.createElement("br");
document.body.appendChild(linija2);
i++;
a++;
}
function AddTextBox(elm) {
var v = elm.value;
var iCounter = elm.id.replace('type1', '');
if (v == 'radio') {
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.id = 'txtSecond' + iCounter;
elm.parentNode.insertBefore(textbox, elm.nextSibling);
} else {
//Ovaj kod ce da izbrise Textbox u slucaju da se izabere druga opcija.
var rmv = document.getElementById('txtSecond' + iCounter);
if (rmv != undefined) {
rmv.remove();
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="pepo.css">
<meta charset="UTF-8">
<script src="basa.js"></script>
<title>OnlineForms</title>
</head>
<body>
<!--Ovaj kod je za Main Page-->
<Main class="kocka">
<div align="left">
<input type="button" class="dropbtn" value="Administration" onClick="window.location.reload();return false;"/>
<button class="dropbtn" id="getAllButton">Forms</button>
</div>
<br>
<div align="left">
<input type="number" id="key" class="dropbtn" Placeholder="Type the key value"/>
<button class="dropbtn" id="getButton"> Search </button>
<br>
<br>
</div>
</Main>
<!--Ovaj kod je za Elemente-->
<div id="element" class="hide">
<h1>Element <input type="text" class="dropbtn" id="question" value="" Placeholder="Type your question here"/>
<select title="ddmenu" class="dropbtn" id="type1" onChange="AddTextBox(this)">
<option selected disabled hidden value="Please select">Please select</option>
<option value="textbox">textbox</option>
<option value="checkbox">checkbox</option>
<option value="radio">radio button</option>
</select>
<select title="ddmenu" class="dropbtn" id="type2">
<option selected disabled hidden value="Please select">Please select</option>
<option value="none">none</option>
<option value="mandatory">mandatory</option>
<option value="number">numeric</option>
</select>
</h1>
<input type="button" id="adddugme" class="dropbtn2" value="Add" onclick="mojaFunkcija()"/>
<br>
<br>
<button id="addButton" class='dropbtn'>Save</button>
</div>
<br>
<br>
<div id="status"></div>
<br>
<div id="status2"></div>
</body>
</html>
The issue is that you are executing the code only one time.
Put it inside a loop.
Here, I made a loop to execute the same code x times where x is the number user entered in the form
Check the snippet
var i = 0;
var a = 1;
function mojaFunkcija() {
var type1 = document.getElementById('type1').value;
var type2 = document.getElementById('type2').value;
var question = document.getElementById('question').value;
var i=0;
while(i<question){
var counter = 'Element';
counter+= a;
var prviElement=document.createElement('span');
prviElement.textContent= counter + ':' +' ';
document.body.appendChild(prviElement);
var pitanje= document.createElement('span');
var unos='unos';
unos += i;
pitanje.id=unos;
pitanje.textContent=(i+1) + ' ';
document.body.appendChild(pitanje);
var tip1 = document.createElement("input");
var element='element';
element += i;
tip1.id=element;
if (type1=='textbox') {
tip1.type=type2
} else {
tip1.type=type1
}
document.body.appendChild(tip1);
var linija1= document.createElement("br");
document.body.appendChild(linija1);
var linija2= document.createElement("br");
document.body.appendChild(linija2);
i++;
a++;
}
}
function AddTextBox(elm) {
var v = elm.value;
var iCounter = elm.id.replace('type1', '');
if (v == 'radio') {
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.id = 'txtSecond' + iCounter;
elm.parentNode.insertBefore(textbox, elm.nextSibling);
} else {
//Ovaj kod ce da izbrise Textbox u slucaju da se izabere druga opcija.
var rmv = document.getElementById('txtSecond' + iCounter);
if (rmv != undefined) {
rmv.remove();
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="pepo.css">
<meta charset="UTF-8">
<script src="basa.js"></script>
<title>OnlineForms</title>
</head>
<body>
<!--Ovaj kod je za Main Page-->
<Main class="kocka">
<div align="left">
<input type="button" class="dropbtn" value="Administration" onClick="window.location.reload();return false;"/>
<button class="dropbtn" id="getAllButton">Forms</button>
</div>
<br>
<div align="left">
<input type="number" id="key" class="dropbtn" Placeholder="Type the key value"/>
<button class="dropbtn" id="getButton"> Search </button>
<br>
<br>
</div>
</Main>
<!--Ovaj kod je za Elemente-->
<div id="element" class="hide">
<h1>Element <input type="text" class="dropbtn" id="question" value="" Placeholder="Type your question here"/>
<select title="ddmenu" class="dropbtn" id="type1" onChange="AddTextBox(this)">
<option selected disabled hidden value="Please select">Please select</option>
<option value="textbox">textbox</option>
<option value="checkbox">checkbox</option>
<option value="radio">radio button</option>
</select>
<select title="ddmenu" class="dropbtn" id="type2">
<option selected disabled hidden value="Please select">Please select</option>
<option value="none">none</option>
<option value="mandatory">mandatory</option>
<option value="number">numeric</option>
</select>
</h1>
<input type="button" id="adddugme" class="dropbtn2" value="Add" onclick="mojaFunkcija()"/>
<br>
<br>
<button id="addButton" class='dropbtn'>Save</button>
</div>
<br>
<br>
<div id="status"></div>
<br>
<div id="status2"></div>
</body>
</html>
I think I understand what you're trying to achieve. It seems you're already able to reference the inputbox you want the value from because you're removing it in your AddTextBox function. In which case you can use similar code to loop depending on that value. Something like this:
var cnt = document.getElementById('txtSecond' + iCounter);
if (cnt != undefined && Number.isInteger(parseInt(cnt.value))) {
// loop to create options
}
Read about the Conditional (Ternary) Operator
then simplify your js:
option ? option1 : option2
as for the display, I would use:
if (option === 'option1'){
$('option2).hide() // or show
}
a little jquery in there, and so forth.
I want to trigger an event when user focus on the select element.
I cant edit the body code. So am trying to achieve it through JS in head oly.
Its appreciable if I can add attribute to my select element even from Javascript in header tag.
I want alert to be shown when user clicks on select element. Help.
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("CheckForm");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("t1");
temp1.value = "Task";
}
if(document.getElementByd("t2").focus)
{
alert("hello");
}
}
</script>
</head>
<body>
<form name="CheckForm" id="CheckForm">
t1: <input type="text" id="t1" name="t1"/>
t2: <select id="t2">
<option></option>
<option>1</option>
<option>2</option>
</select>
t3: <input type="text" id="t3" name="t3"/>
</form>
</body>
</html>
Try this:
document.getElementById("t2").setAttribute("onclick", "alert()");
try the following code
var att=document.createAttribute("onclick");
att.value="yourFunction()";
document.getElementById("t2").setAttributeNode(att);
function yourFunction(){
// your js code
}
use this, alert message will come when select box gets focus
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("CheckForm");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("t1");
temp1.value = "Task";
}
if(document.getElementById("t2").focus)
{
alert("hello");
}
document.getElementById("t2").setAttribute("onfocus", "selectHiglight()");
}
var selectHiglight=function(){
alert('select get hilghited');
};
</script>
</head>
<body>
<form name="CheckForm" id="CheckForm">
t1: <input type="text" id="t1" name="t1"/>
t2: <select id="t2">
<option></option>
<option>1</option>
<option>2</option>
</select>
t3: <input type="text" id="t3" name="t3"/>
</form>
</body>
</html>