I have my code below. I've made an empty array, but I don't know how to connect them. Also I tried to get the value from my combo box, but it's giving me an error. The textbox tho takes the value from the user's input but not the combo box.
function sample() {
var jsObject = [];
jsObject {
"salutation": null,
"fname": null
};
var sal = document.getElementById('salutation').value;
var fname = document.getElementById('fname').value;
if (fname.value == "") {
return false;
}
for (var key in sal) {
sal = sal[key];
}
}
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<form name="sam" onsubmit="return sample()" method="post">
<select name="salutation">
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="dr">Dr.</option>
</select><br> Name:
<br>
<input type="text" name="fname" id="fname" required placeholder="Enter name">
<input type="submit" onclick="sample(); return false;" value="Submit">
</form>
</body>
</html>
If you have a select element that looks like this:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Running this code:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
Would make strUser be 2. If what you actually want is test2, then do this:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
Which would make strUser be test2
Related
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>
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 am a grade 11 level computer programmer and encountered some difficulties when trying to complete our JSON assignment. The goal is to save an object to local storage, but my html and js do not do so. Instead, nothing happens at all. All feedback is appreciated.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="JDOS.js">
</script>
<title>Announcements Storage</title>
</head>
<body>
<form>
<fieldset>
<legend>Add New Announcement</legend>
Title:<br>
<input required id="title" type="text"><br>
Category:<br>
<input required id="category" type ="text"><br>
Creator:<br>
<input required id="creator" type="text"><br>
Type:
<select required id='type' name="type" >
<option value="Event">Event</option>
<option value="Reminder">Reminder</option>
<option value="General">General</option>
</select><br>
Date and Time:<br>
<input required id="date" type="date"><br>
<input required id="time" type="time"><br>
Sex:<br>
<select required id='sex'>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="All">All</option>
</select><br>
Grade:<br>
<input required id='grade' type='text'><br>
Message:<br>
<textarea required id="message" rows="10" cols="50">Type
announcement here</textarea><br>
<input type="submit" onclick="createAnnouncement()" value="Post">
</fieldset>
</form>
<div id="showAnnouncement"></div>
</body>
</html>
Javascript begins here:
function createAnnouncement() {
var title= document.getElementById('title').value;
var category= document.getElementById('category').value;
var creator= document.getElementById('creator').value;
var type= document.getElementById('type').value;
var datetime= document.getElementById('datetime').value;
var sex= document.getElementById('sex').value;
var grade= document.getElementById('grade').value;
var message= document.getElementById('message').value;
var announcement = {
Title: title,
Category: category,
Creator: creator,
Type: type,
DateTime: datetime,
Sex: sex,
Grade: grade,
Message: message
};
var x = JSON.stringify(announcement);
localStorage.setItem('announcement', x);
}
function showAnnouncement(){
var obj = localStorage.getItem('announcement').value;
var obj2 = JSON.parse (obj);
document.getElementById('showAnnouncement').innerHTML = "title:" + obj2.title
+ "category:" + obj2.category + "creator:" + obj2.creator + "type:" +
obj2.type + "datetime:" + obj2.datetime + "sex:" + obj2.sex + "grade:" +
obj2.grade + "message:" + obj2.message;
}
You have some errors on your logic here.
Since your input is created as type="submit", it will try to do a HTTP POST instead of calling your createAnnouncement() function. You can change it to type="button".
After that, you need to find a way to trigger the showAnnouncement() function, this could be an element such as an <a> or another <button>.
I'm currently trying to create a form that will extend on click using the method shown from this site. http://www.quirksmode.org/dom/domform.html
I have the Extending of the form more or less working fine, My issue is getting the Date field to correctly step up from the date that the user inputs in the first field.
Right now if I click on Add another Date, it adds a day to 1970-01-01 which i'm assuming is a default start date somewhere.
I'm not familiar enough with javascript to reference the generated date to the date that is initially selected by the User.
Here is a fiddle link of you want to see what I mean. https://jsfiddle.net/2nvz6kqj/9/
Note i'm pretty sure you can only get the date field to show up in Chrome correctly.
And here is my code.
<script type="text/javascript">
var counter = 0;
function moreFields() {
var date = document.getElementById("myDate").value;
counter++;
var newFields = document.getElementById("readroot").cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name;
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById("writeroot");
insertHere.parentNode.insertBefore(newFields,insertHere);
document.getElementById("myDate").stepUp(1);
}
window.onload = moreFields;
</script>
<body>
<div id="readroot" style="display: none">
<input type="button" value="Remove Date"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input type="date" id="myDate" value="">
<select name="rankingsel">
<option>School Day</option>
<option value="day1">Day 1</option>
<option value="day2">Day 2</option>
<option value="day3">Day 3</option>
<option value="day4">Day 4</option>
<option value="day5">Day 5</option>
<option value="closed">School Closed</option>
</select><br /><br />
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<span id="writeroot"></span>
<input type="button" onclick="moreFields()" value="Add Another Date" />
<input type="submit" value="Send form" />
</form>
</body>
Ultimately once i get this working correctly, I'll submit it to a DB with PHP.
Ok, I changed a few things, but this should work for you.
NOTE: In order to keep the code and markup close to what you had, I didn't "fix" some of the JavaScript and HTML that I consider to be bad practice.
I also took some liberties with the readroot element IDs and writeroot is now a DIV not a SPAN as you had it.
<html>
<head>
<script type="text/javascript">
var counter = 0;
var date = new Date();
// this function adds a day to the date variable
function addDay (dateObj) {
var ticks = dateObj.getTime();
var newTicks = ticks + (24 * 60 * 60 * 1000);
dateObj.setTime(newTicks);
}
function moreFields() {
//var dateVal = document.getElementById("myDate").value;
counter++;
// querySelector is nicer way to get your elements
var newFields = document.querySelector("#readroot").cloneNode(true);
newFields.id = newFields.id + counter;
newFields.style = null;
// nifty way to convert node list into an array
var fields = Array.prototype.slice.call(newFields.childNodes);
// now use forEach instead of old-style for loop
fields.forEach(function (f,i,nodes) {
var theName = f.name;
if (theName) {
f.id = theName + counter;
}
});
// convert "writeroot" to div and just append the newFields container
var form = document.querySelector('#writeroot');
form.appendChild(newFields);
// to set the date, you need to use an ISO-format date string
var dateFields = form.querySelectorAll('[name="myDate"]');
var len = dateFields.length;
var dateField = dateFields[len - 1];
if (dateField) {
var dateISO = date.toISOString().substr(0,10);
dateField.value = dateISO;
addDay(date);
}
}
window.onload = moreFields;
</script>
</head>
<body>
<div id="readroot" style="display: none">
<input type="button" value="Remove Date"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input type="date" name="myDate">
<select name="rankingsel">
<option>School Day</option>
<option value="day1">Day 1</option>
<option value="day2">Day 2</option>
<option value="day3">Day 3</option>
<option value="day4">Day 4</option>
<option value="day5">Day 5</option>
<option value="closed">School Closed</option>
</select><br /><br />
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<div id="writeroot"></div>
<input type="button" onclick="moreFields()" value="Add Another Date" />
<input type="submit" value="Send form" />
</form>
</body>
</html>
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>