I have this HTML code:
<select id="ITAAServerList" name="ITAAServerList" style="visibility:visible">
<option ServerName="SERVER01" IPAddress="192.168.46.1" StartPageName="SERVER01_Start.html">SERVER01</option>
<option ServerName="SERVER02" IPAddress="192.168.46.2" StartPageName="SERVER02_Start.html">SERVER02</option>
<option ServerName="SERVER03" IPAddress="192.168.46.3" StartPageName="SERVER03_Start.html">SERVER02</option>
</select>
<button type="submit" name="oNext" id="oNext" onclick ="OnClickNext()" class="item cursor-pointer login-button">LOGIN</button>
...
<script type="text/javascript" src="onclicknext.js"></script>
And this JS code:
function OnClickNext() {
var oITAAServer = document.getElementById('ITAAServerList').options[this.selectedIndex].getAttribute('StartPageName');
alert(oITAAServer);
};
I can't get StartPageName attribute from the dropdown menu. Help?
You're almost there - you just need to do .selectedIndex against the <select> element instead of against this.
function OnClickNext() {
var selectElement = document.getElementById('ITAAServerList');
var selectedOption = selectElement.options[ selectElement.selectedIndex ]; //not this.selectedIndex
var oITAAServer = selectedOption.getAttribute('StartPageName');
alert(oITAAServer);
};
<select id="ITAAServerList" name="ITAAServerList" style="visibility:visible">
<option ServerName="SERVER01" IPAddress="192.168.46.1" StartPageName="SERVER01_Start.html">SERVER01</option>
<option ServerName="SERVER02" IPAddress="192.168.46.2" StartPageName="SERVER02_Start.html">SERVER02</option>
<option ServerName="SERVER03" IPAddress="192.168.46.3" StartPageName="SERVER03_Start.html">SERVER03</option>
</select>
<button type="submit" name="oNext" id="oNext" onclick ="OnClickNext()" class="item cursor-pointer login-button">LOGIN</button>
Related
Is there an onclick javascript function which would allow me to toggle between two options in a select input, using a button?
<html>
<head>
</head>
<body>
<button id="flavorBtn" class="flavorBtn">Toggle Flavors</button><br><br>
<select name="flavor" id="selectField">
<option value="Vanilla">Vanilla</option>
<option Value="Chocolate">Chocolate</option>
</select>
</body>
</html>
const select = document.querySelector('#selectField')
document.querySelector('#flavorBtn').addEventListener('click', () => {
select.selectedIndex = (select.selectedIndex + 1) % select.options.length
})
<button id="flavorBtn" class="flavorBtn">Toggle Flavors</button><br><br>
<select name="flavor" id="selectField">
<option value="Vanilla">Vanilla</option>
<option Value="Chocolate">Chocolate</option>
</select>
I try to make dynamic inputs, I give labels attribute contenteditable="ture" because if I want to edit content other time, I give for attribute in label and name attribute in input this textContent(label)
function addInput() {
let options = `
<select class="select1">
<option value="">--</option>
<option value="number">number</option>
<option value="text">text</option>
<option value="date">date</option>
<option value="datetime-local">datetime-local</option>
<option value="file">file</option>
<option value="tel">tel</option>
<option value="time">time</option>
<option value="url">url</option>
<option value="month">month</option>
<option value="range">range</option>
<option value="color">color</option>
</select>
<input class="input1" type="text">
<button class="button1">create</button>
`;
document.querySelector('.choose').innerHTML = options;
let button1 = document.querySelector('.button1');
button1.addEventListener('click', function(e) {
e.preventDefault
let select1 = document.querySelector('.select1').value;
let input1 = document.querySelector('.input1').value;
let chooses = [
[select1, input1]
];
chooses.forEach((choose) => {
if (choose !== " ") {
let code = `<div class="relative delete dragthing Nlabel" onclick="addvalue()" ><label for="${choose[1]}" contenteditable="true" class="Vlabel" >${choose[1]}</label><span class="removeElement" onclick="removeElement()"><i class="fa-solid fa-circle-xmark"></i></span><input class="Ninput" name="${choose[1]}" type=${choose[0]} ></div>`;
document.querySelector('.Nform').innerHTML += code;
}
});
});
}
<button onclick="addInput()" class="createElement">create input</button>
<div class="choose"></div>
<div class="Nform" id="dragparent"></div>
my problem in this function frist when I create new input and try to change content, for attribute in label and name attribute in input will change to this content but if create input again and try to change content, for attribute in label and name attribute in input will not change to this content so why my function run one time?
function addvalue() {
let values = document.querySelectorAll('.Vlabel');
console.log(values);
values.forEach(value => {
window.addEventListener('click', () => {
let value2 = document.querySelector('.Vlabel').innerText;
document.querySelector('.Vlabel').setAttribute('for', value2);
document.querySelector('.Ninput').setAttribute('name', value2);
});
});
}
addvalue() should take an argument telling it which DIV it should process. Then it can call methods on that element to find the enclosed Vlabel and Ninput elements.
function addInput() {
let options = `
<select class="select1">
<option value="">--</option>
<option value="number">number</option>
<option value="text">text</option>
<option value="date">date</option>
<option value="datetime-local">datetime-local</option>
<option value="file">file</option>
<option value="tel">tel</option>
<option value="time">time</option>
<option value="url">url</option>
<option value="month">month</option>
<option value="range">range</option>
<option value="color">color</option>
</select>
<input class="input1" type="text">
<button class="button1">create</button>
`;
document.querySelector('.choose').innerHTML = options;
let button1 = document.querySelector('.button1');
button1.addEventListener('click', function(e) {
e.preventDefault
let select1 = document.querySelector('.select1').value;
let input1 = document.querySelector('.input1').value;
let chooses = [
[select1, input1]
];
chooses.forEach((choose) => {
if (choose !== " ") {
let code = `<div class="relative delete dragthing Nlabel" onclick="addvalue(this)" ><label for="${choose[1]}" contenteditable="true" class="Vlabel" >${choose[1]}</label><span class="removeElement" onclick="removeElement()"><i class="fa-solid fa-circle-xmark"></i></span><input class="Ninput" name="${choose[1]}" type=${choose[0]} ></div>`;
document.querySelector('.Nform').innerHTML += code;
}
});
});
}
function addvalue(div) {
console.log("addvalue");
let value2 = div.querySelector('.Vlabel').innerText;
div.querySelector('.Vlabel').setAttribute('for', value2);
div.querySelector('.Ninput').setAttribute('name', value2);
}
<button onclick="addInput()" class="createElement">create input</button>
<div class="choose"></div>
<div class="Nform" id="dragparent"></div>
I'm working on a test/quiz and I can't solve a problem.
I like to grab the selected value from a option and print it to the result p.
<div class="add">
<div class="add__container">
<select class="add__type">
<option value="0" id="a01" selected>No</option>
<option value="1" id="a02">Ocassionally</option>
<option value="2" id="a03">Yes</option>
</select>
</div>
</div>
<button class="btn" onclick="myValue()">Results</button>
<p id="result">... </p>
And here is my Javascript code where I'm stucked:
function myValue(){
var e = document.getElementById("s01");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
document.getElementById('result').innerHTML = e;
};
try this code. I think this code work like you requirement.
function myValue(){
var select = document.getElementsByClassName("add__type")[0].value;
document.getElementById('result').innerHTML = select;
};
<div class="add">
<div class="add__container">
<select class="add__type">
<option value="0" id="a01" selected>No</option>
<option value="1" id="a02">Ocassionally</option>
<option value="2" id="a03">Yes</option>
</select>
</div>
</div>
<button class="btn" onclick="myValue()">Results</button>
<p id="result">... </p>
something more..
I think you want to put the actual text of the selected option in the innerHtml instead of the option DOM element:
document.getElementById('result').innerHTML = text;
Maybe you want this? I added the id "s01" on select.
<div class="add">
<div class="add__container">
<select id="s01" class="add__type">
<option value="0" id="a01" selected>No</option>
<option value="1" id="a02">Ocassionally</option>
<option value="2" id="a03">Yes</option>
</select>
</div>
</div>
<button class="btn" onclick="myValue()">Results</button>
<p id="result">... </p>
<script>
function myValue() {
var e = document.getElementById("s01");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
document.getElementById('result').innerHTML = text;
};
</script>
// Unimportant stuff
const $ = document;
$.get = $.getElementById;
$.get('theOptions').addEventListener('change', function(event) {
// Get the value from the select-element
$.get('out').innerHTML = 'You selected ' + event.target.value; // Or $.get('theOptions').value
});
<select id="theOptions">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
</select>
<span id="out">Nothing selected</span>
I have a dropdown with few options in it and a onclick event on a button , after making the selection from the dropdown and clicking on the button how do i set the dropdown to its default that is select by JavaScript.
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>
function addOption(){
if (userType.value === "Select") {
alert("Please select correct option");
}
else{
console.log(userType.options[userType.selectedIndex].value);
}
document.getElementById('userType').value = "Select";
}
Pretty straight forward. Just select the input by id and set its value to whatever the default should be.
function addOption(){
// Do stuff...and then:
document.getElementById('userType').value = "Select";
}
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>
<html>
<body>
<form id="myForm">
<select id="a">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<input type="button" onclick="myFunction()" value="Reset">
</form>
</body>
</html>
<script>
function myFunction() {
document.getElementById('a').selectedIndex = 0;
}
</script>
try this
Here is your working code:
$("button").click(function() {
$('select').prop('selectedIndex', 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button">Send</button>
You can attach change event to <select> element, declare a variable, at event handler set variable to true to verify that change event has occurred. At click of <button> set select .selectedIndex property to 0 if Boolean value is true, set Boolean to false.
<script>
var changed, select;
function addOption() {
if (changed) {
select.selectedIndex = 0;
changed = false;
}
}
onload = function() {
select = document.getElementById("userType");
select.onchange = function() {
changed = true;
}
}
</script>
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button" onclick="addOption()">Send</button>
I have a drop html list. If I select an option from dropdown, I have to assign dropdown value to the javascript variable and display it on html
Here is my code
HTML:
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
Javascript:
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
But whenever I am submitting the values,it giving error. anything wrong here ?
DEMO
On your demo, you've selected the default onLoad option in jsfiddle.
This causes the site to wrap your entire code within a callback function, meaning that your showit function is not a global function as required by DOM0 inline event handlers.
Change this option to no wrap(head) and it will work.
The code you have will work good on a page, assuming you have the <script> tags for the javascript.
Fiddle here
About your <button onclick="changeHiddenInput (objDropDown)">Try it</button>, objDropDown is not defined... and also add type="button" otherwise the default is a submit button.
I made some changes for the demo, so my code is:
html
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
javascript
var select;
window.onload = function () {
select = document.getElementById('dropdown');
console.log(select);
}
function changeHiddenInput(objDropDown) {
console.log(objDropDown);
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}