View option picked from datalist - javascript

I would like to take the option of which the user selects from a datalist. This is what I have:
<input type="text" name="my-input" class="searchBar" list="my-list">
<input id="clickMe" type="button" value="clickme" onclick="handleSelect();" />
<datalist id="my-list">
<option value="COMP232"></option>
<option value="COMP248"></option>
<option value="ENGR201"></option>
</datalist>
My JS method:
function handleSelect()
{
var elm = document.getElementById("my-list").innerHTML.value;
console.log(elm);
//window.location = "./class/" + elm.toUpperCase() + ".php";
}
The console responds "undefined" when I submit. What is wrong here?

You can assign an id to input and take a value of id on button click.
<input id= "inp" type="text" name="my-input" class="searchBar" list="my-list">
<input type="button" value="clickme" onclick="handleSelect();" />
<datalist id="my-list">
<option value="COMP232"></option>
<option value="COMP248"></option>
<option value="ENGR201"></option>
</datalist>
and JS code snippet will look like,
var elm = document.getElementById("inp").value;

Your code should be like this.
<script>
function handleSelect(){
var elment = document.getElementById("selectedValue").value;
console.log(elment);
}
</script>
<input id="selectedValue" type="text" name="my-input" class="searchBar" list="my-list">
<input id="clickMe" type="button" value="clickme"
onclick="handleSelect();" />
<datalist id="my-list">
<option value="COMP232"></option>
<option value="COMP248"></option>
<option value="ENGR201"></option>
</datalist>

Related

gradually make form appear problem "An invalid form control with name='' is not focusable"

i have a form, am trying to make it gradually appear each time i press next, i have two problems, first, there's an error that i don't know how to fix, it says "An invalid form control with name='' is not focusable.", i'm guessing it's because i have required fields and they're set to hidden, but i don't know how to fix it since i need the fields to be set before pressing next, the second one is the div that contains the form is in it's full form, it's like the form is all visible, if i use the display property it grows in size when the forms appear but i won't be able to make a transition like i can with visibility property, what should i do?
<form action="" >
<label for="from"></label>
<select name="" id="from" required>
<option value selected disabled>select an option</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<br id="space">
to: <select name="" id="to" required>
<option value selected disabled>select an option</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<br>
<button id="dateBtn" class="btn">Next</button>
<input id="date" type="date" min="2021-06-21" style="visibility: hidden;" required>
<br>
<button id="rangeBtn" class="btn" style="visibility: hidden;">Next</button>
<input type="range" id="range" min="1" max="4" style="visibility: hidden;" required>
<br>
<button type="submit" id="submitBtn" value="Submit" class="btn" style="visibility: hidden;"> finish up </button>
</form>
</div>
<script>
var dateBtn = document.getElementById("dateBtn");
var date = document.getElementById("date");
var rangeBtn = document.getElementById("rangeBtn");
var range = document.getElementById("range");
document.getEelementById("dateBtn").addEventListener("click", showDate()
{
date.style.visibility = "visible";
rangeBtn.style.visibiity= "visible";
dateBtn.Style.visibility="hidden";
});
document.getEelementById("RangeBtn").addEventListener("click", showRange()
{
range.style.visibility = "visible";
timeBtn.style.visibility = "visible";
rangeBtn.style.visibiltiy ="hidden";
});
</script>

Why doesn't my object display when I call it?

var section = [];
var name = [];
var gender = [];
var age = [];
var favsub = [];
var studRec = { section, name, gender, age, favsub };
function saveButton() {
section.push = document.getElementById("section").value;
name.push = document.getElementById("name").value;
gender.push = document.getElementById("gender").value;
age.push = document.getElementById("age").value;
favsub.push = document.getElementsByClassName("favsub");
document.getElementById("saveStud").reset();
window.alert(studyRec);
}
<body>
<form id="saveStud" method="POST">
<center>
<p>Section</p>
<select id="section" autofocus required>
<option value="0">select</option>
<option value="truth">truth</option>
<option value="faith">faith</option>
<option value="honesty">honesty</option>
<option value="charity">charity</option>
<option value="obedience">obedience</option>
</select><br>
<p>Student Name</p><input id="name" type="text" required><br>
<p>Gender</p>
<select id="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
<p>Age</p><input id="age" type="number" required><br>
<p>Favorite Subjects</p><input class="favsub" type="text" required><br>
<input class="favsub" type="text" required><br>
<input class="favsub" type="text" required><br>
<button type="button" onclick="saveButton()">save</button>
<button type="reset" value="reset">reset</button>
</center>
</form>
</body>
The purpose of the code is to get the information from the form then when you press save the values will be put in their separate arrays which are in an object, and the values on the form will reset. To test if the function works I tried to display it using document.write but when I do press the save button, it just resets but doesn't display
section.push,name.push and so on is wrong syntax. Apparently it mean if section and name is a object then section.push or so will create key in that object, but here they are not object.
Also var studRec= {section, name, gender,age,favsub}; does not make any sense unless you are looking for object destructing and this object syntax is wrong.
You can just add keys to studRec inside saveButton function & there is a typo at window.alert(studyRec);
document.getElementsByClassName("favsub") will gives a collection and you need to get the index to retrieve value from it.Also if you want to alert alert(studRec) you will only see object object
var section = [];
var name = [];
var gender = [];
var age = [];
var favsub = [];
var studRec = {
};
function saveButton() {
studRec.section = document.getElementById("section").value;
studRec.name = document.getElementById("name").value;
studRec.gender = document.getElementById("gender").value;
studRec.age = document.getElementById("age").value;
studRec.favsub = document.getElementsByClassName("favsub");
document.getElementById("saveStud").reset();
alert(studRec);
}
<form id="saveStud" method="POST">
<center>
<p>Section</p>
<select id="section" autofocus required>
<option value="0">select</option>
<option value="truth">truth</option>
<option value="faith">faith</option>
<option value="honesty">honesty</option>
<option value="charity">charity</option>
<option value="obedience">obedience</option>
<option value="chastity">chastity</option>
<option value="generosity">generosity</option>
<option value="humility">humility</option>
</select><br>
<p>Student Name</p><input id="name" type="text" required><br>
<p>Gender</p>
<select id="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
<p>Age</p><input id="age" type="number" required><br>
<p>Favorite Subjects</p><input class="favsub" type="text" required><br>
<input class="favsub" type="text" required><br>
<input class="favsub" type="text" required><br>
<button type="button" onclick="saveButton()">save</button>
<button type="reset" value="reset">reset</button>
</center>
</form>
Add all the items to the object and then send it.
If you're getting the element by class name then you need to iterate over by length and then get the value.
Check the below code.
I've included the examples if you're pushing into an array or if you want to assign a value to an object also. Try understanding the code first.
var section = [];
var name = [];
var gender = [];
var age = [];
var favsub = [];
var studyRec= {section, name, gender,age,favsub};
function saveButton(){
studyRec.section=document.getElementById("section").value;
studyRec.name=document.getElementById("name").value;
studyRec.gender=document.getElementById("gender").value;
studyRec.age =document.getElementById("age").value;
studyRec.favsub.push(document.getElementsByClassName("favsub")[0].value);
studyRec.favsub.push(document.getElementsByClassName("favsub")[1].value);
studyRec.favsub.push(document.getElementsByClassName("favsub")[2].value);
document.getElementById("saveStud").reset();
console.log(studyRec);
}
<form id="saveStud" method="POST">
<center>
<p>Section</p><select id="section" autofocus required>
<option value="0">select</option>
<option value="truth">truth</option>
<option value="faith">faith</option>
<option value="honesty">honesty</option>
<option value="charity">charity</option>
<option value="obedience">obedience</option>
<option value="chastity">chastity</option>
<option value="generosity">generosity</option>
<option value="humility">humility</option>
</select><br>
<p>Student Name</p><input id="name" type="text" required><br>
<p>Gender</p><select id="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
<p>Age</p><input id="age" type="number" required><br>
<p>Favorite Subjects</p><input class="favsub" type="text" required><br>
<input class="favsub" type="text" required><br>
<input class="favsub" type="text" required><br>
<button type = "button" onclick="saveButton()">save</button>
<button type="reset" value="reset">reset</button>
</center>
</form>

jQuery select to make HTML DIV visable

The HTML:
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" class="1">Average Sold</option>
<option value="mma" class="1">Min|Max|Avg Sold</option>
<option value="oh" class="2">On Hand Qty</option>
<option value="mr" class="2">Money Report</option>
</select>
<div id='1' class='box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
The jQuery:
$(document).ready(function () {
$('#1').hide();
$('#sr').change(function () {
$('#'+$(this).val()).show();
});
});
I am trying to get this to function where when the avg or min, max, avg reports are selected in the select box, the DIV to enter the dates will become visible.
As of right now the page loads with the DIV hidden but it never become visible.
Thanks in advance.
You need to look at the accepted option, you can not use the value like you are doing.
$(document).ready(function () {
$('.region').hide();
$('#sr').change(function () {
$(".region").hide();
var region = $(this).find("option:selected").data("region");
$('#'+region).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" data-region="1">Average Sold</option>
<option value="mma" data-region="1">Min|Max|Avg Sold</option>
<option value="oh" data-region="2">On Hand Qty</option>
<option value="mr" data-region="2">Money Report</option>
</select>
<div id='1' class='region box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
<div id='2' class='region'>
2
</div>

Get array values from an option select with javascript to populate text fields

I have a form where the user can make an "instant search" with ajax, and the search result are shown as "select... option" tags, when the user choose an option, it's value will populate a text field. The "simplified" version of the code is this:
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
<option value="2413">2413 - Name A</option>
<option value="2414">2414 - Name B</option>
<option value="2415">2415 - Name C</option>
</select>
</form>
You can also check it on line: http://jsfiddle.net/BCXfQ/
Now, I need to get TWO values for each option select, like this:
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
<option value="['Name A', '2413']">2413 - Name A</option>
<option value="['Name B', '2414']">2414 - Name B</option>
<option value="['Name C', '2415']">2415 - Name C</option>
</select>
</form>
But I don't know how to get the array values and populate the two fields one with Code and the other with Name.
Online: http://jsfiddle.net/zm3nX/
I tried since now to change
form1.elements['Code'].value = this.options[this.selectedIndex].value
to
form1.elements['Code'].value = this.options[this.selectedIndex].value[0]
and to
form1.elements['Code'].value = this.options[this.selectedIndex[0]].value
but with no luck.
Thanks for any help.
Have you considered using data attributes instead?
Code: <input type="text" id="foo-code" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" id="foo-name" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" id="foo-list">
<option data-name="Name A" data-code="2413">2413 - Name A</option>
<option data-name="Name B" data-code="2413">2413 - Name B</option>
<option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>
and glue things together:
var select = document.getElementById("foo-list");
var code = document.getElementById("foo-code");
var name = document.getElementById("foo-name");
select.addEventListener('change', function(event) {
code.value = this.getAttribute("data-code");
name.value = this.getAttribute("data-name");
}, false);
You can do something like:
<script>
function updateValues(el) {
var form = el.form;
var v = el.value;
v = v.replace(/^\[\'|\'\]$/g,'').split("', '");
form.Code.value = v[1];
form.Name.value = v[0];
}
</script>
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" size="32" readonly> <br>
Name: <input type="text" name="Name" size="32" readonly> <br>
<select class="paselect" onchange="updateValues(this);">
<option value="['Name A', '2413']">2413 - Name A
<option value="['Name B', '2413']">2413 - Name B
<option value="['Name C', '2413']">2413 - Name C
</select>
</form>
Note that in IE if the user navigates the options using the cursor keys, an onchange event will be dispatched every time they move focus to a different option. Other browsers will wait for an option to actually be chosen with tab or space (depending on the browser).
Yeah I'd take an approach similar to the way Angular does this - using jquery with rodneyrehm's example:
<select class="paselect" id="foo-list">
<option data-name="Name A" data-code="2413">2413 - Name A</option>
<option data-name="Name B" data-code="2413">2413 - Name B</option>
<option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>
$('#foo-list').change(function() {
var opt = $(this.options[this.selectedIndex]);
var name = opt.attr('data-name');
var code = opt.attr('data-code');
$('#status').text('Name: ' + name + ', Code: ' + code);
});
http://jsfiddle.net/b9chris/mbSLB/
This avoids the potentially flimsy regex; strings you store and what to escape when become simpler to consider and error check.
The data- prefix is just there to comply with the HTML5 spec, but the truth is you can make up whatever attribute names you like - so if you were generating this HTML on the server and wanted to keep it short you could even use a= and b=.
Try this
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" onchange="getValue(this.value);">
<option value="Name A-2413">2413 - Name A</option>
<option value="Name B-2413">2413 - Name B</option>
<option value="Name C-2413">2413 - Name C</option>
</select>
</form>
<script>
function getValue(val){
var myval=val.split('-');
form1.elements['Code'].value=myval[1];
form1.elements['Name'].value=myval[0];
}
</script>
Use this code.
<script>
function setdata(selectvalue, selecttext){
form1.elements['Code'].value = selectvalue;
form1.elements['Name'].value = selecttext;
}
</script>
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" onchange="setdata(this.value,this.options[this.selectedIndex].text)">
<option value="['Name A', '2413']">2413 - Name A</option>
<option value="['Name B', '2414']">2414 - Name B</option>
<option value="['Name C', '2415']">2415 - Name C</option>
</select>
</form>
Hope it helps to you.

Show different elements of a form depending on dropdown box selection

So I have a page that has a dropdown list and form. And what I want to do is depending on the option selected in the dropdown list I want to hide and show different parts of the form.
<select id="myselect>
<option id="option1">Option_1</option>
<option id="option2">Option_2</option>
<option id="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" />
<input id="input_2" name="input_2" type="text" />
<input id="input_3" name="input_3" type="text" />
</form>
So if Option_1 is selected then show input_1 and input_3, while hiding input_2
Plain JS
window.onload=function() {
document.getElementById("myselect").onchange=function() {
document.getElementById("input_2").style.display=(this.options[this.selectedIndex].value=="option1")?"none":"block";
}
document.getElementById("myselect").onchange(); //trigger
}
i managed to get your issue resolved by adding a 'value' attribute to your option tags:
<select id="myselect">
<option id="option1" value="option1">Option_1</option>
<option id="option2" value="option2">Option_2</option>
<option id="option3" value="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" placeholder="input_1"/>
<input id="input_2" name="input_2" type="text" placeholder="input_2"/>
<input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>​
and using the jquery .change() event:
$select = $('#myselect');
$('#input_2').hide();
$('#input_3').hide();
$select.change(function(){
if($(this).val() == "option1"){
if($('#input_1').is(":hidden")){
$('#input_1').show();
}
$('#input_2').hide();
$('#input_3').hide();
}
if($(this).val() == "option2"){
if($('#input_2').is(":hidden")){
$('#input_2').show();
}
$('#input_1').hide();
$('#input_3').hide();
}
if($(this).val() == "option3"){
if($('#input_3').is(":hidden")){
$('#input_3').show();
}
$('#input_1').hide();
$('#input_2').hide();
}
});​
jsfiddle

Categories