Error:
TypeError: d.options is undefined while(i<=d.options.length){
Hi i have this javascript of mine which has the select option to choose from. and from choosing from the select options it will display to the textbox field im using this onchange and using it while loop. can someone help me how to figure this out?? using while loop code?
Here's my code below
<!DOCTYPE html>
<html>
<head>
<title>Activity 2 while loop</title>
<script type="text/javascript">
function tellMe(d){
var i = 0;
while(i<=d.options.length){
if(d.listbox1.options[i].selected == true){
d.choose.value = d.listbox1.options[i].text;
}
}
}
</script>
</head>
<body>
<form name="form1">
<p>Girl's qualities you want?</p>
<select name="listbox1" size="5" onchange="tellMe(this.form)">
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
<p>
You Choose: <input type="text" name="choose" />
</p>
</form>
</body>
</html>
any help is muchly appreciated! thanks
Fiddle
Fixed it:
<!DOCTYPE html>
<html>
<head>
<title>Activity 2 while loop</title>
<script type="text/javascript">
function tellMe(d){
document.getElementById("choose").value = d.value;
}
</script>
</head>
<body>
<form name="form1">
<p>Girl's qualities you want?</p>
<select name="listbox1" size="5" onchange="tellMe(this)">
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
<p>
You Choose: <input type="text" id="choose" name="choose" />
</p>
</form>
</body>
</html>
You were trying to get this.form but it should have been this, then the value of this (this.value).
Then, all you had to do was set the input type with name='choose', however I gave it an ID of choose to make it easier to select, then gave that value d.value, which was the value of listbox1.
You are passing the form element, which doesn't have options. Change d.options to d.listbox1.options
while(i<=d.listbox1.options.length){
After that is fixed your second problem will become apparant, whch is that you fail to increment i:
while(i<=d.listbox1.options.length){
...
i++;
}
You aren't incrementing i. You need to add i++ at the end of your while loop. You also need to target listbox1 in your while loop.
function tellMe(d){
var i = 0;
while(i<=d.listbox1.options.length){ // <-- use d.listbox1.options.length
if(d.listbox1.options[i].selected == true){
d.choose.value = d.listbox1.options[i].text;
}
i++; // <-- add increment here
}
}
Related
I am trying to loop in HTML Select in JavaScript. Below is my code. I want to display my COUNT value in option. I am getting some data from PHP end & it need to be display the count. Please advise if i am missing anything or is it wrong way ?
var cjs=$form.find('[name="cjs"]').data("cjs");
var newHtml = 'Current<br>\
<select class="form-control" id="priority" name="priority">\
'+for (var i = 1; i <= cjs; i++) {+'\
<option disabled selected value ="0" style="display:none">-CHOOSE PRIORITY-</option>\
'+}+'\
</select>\
<button class=" upr edit btn btn-sm btn-primary"> Update </button></center></div>';
$('.proo'+request).html(newHtml);
alert("Successfully Updated");
check this maybe it will helpful for you
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date Picker</title>
</head>
<body>
<p>Click the button to loop through a block of code five times.</p>
<select id="demo">
</select>
<p id="demo"></p>
<script>
function myFunction(selector)
{
var optionList="CHOOSE PRIORITY "
var i;
for (i=1;i<=5;i++){
selector.options[i-1] = new Option(optionList+i);
}
}
//usage:
myFunction(document.getElementById("demo"));
</script>
</body>
</html>
i need help with my function. i have all my variables.
var swith = document.getElementById("sub");
var one = document.getElementById("rule");
var two = document.getElementById("cool");
var three = document.getElementById("fool");
Function cool() {
if(swith,one) window.location.replace("app.html");
};
<html>
<head>
<title>question?</title>
<link href="app.css" rel="stylesheet" type="text/css"/>
</head>
<body id="QA">
<select id="much">
<option id="rule">0-10,000</option>
<option id="cool">25,00-50,000</option>
<option id="fool">75,000-100,000</option>
<input type="submit" id="sub">
<script src="app.js"></script>
</select>
</body>
</html>
i think i missed something important. but google stated "Uncaught SyntaxError: Unexpected identifier".
Try lower case f for Function eg:
function cool() {
if(swith,one) window.location.replace("app.html");
};
Function with a capital "F" is a function constructor in javascript.
You should be using the regular function expression.
Instead of adding id attributes to options, I suggest adding a value attribute and on submit of the containing form, you carry out your logic for submission.
I have attached a raw snippet which you could expand and modify to suit your needs. This snippet submission will not work on this site due to sandboxing of form submission.
window.onload = function() {
document.getElementById("TestForm").addEventListener("submit",function(e) {
if (this.value === "rule") {
document.location.replace('app.html');
}
},false);
};
<html>
<head>
<title>question?</title>
</head>
<body id="QA">
<form id="TestForm" name="TestForm" action="#">
<select id="much">
<option value="rule">0-10,000</option>
<option value="cool">25,00-50,000</option>
<option value="fool">75,000-100,000</option>
</select>
<input type=submit value="Submit"/>
</form>
</body>
</html>
I'm trying to write a web page with various options that can be enabled/disabled.
However, it seems that those options are always enabled, regardless of whether the relevant check boxes are selected or not.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function check() {
var options = "";
if (document.form1.nocase.value) {
options = "1";
}
if (document.form1.ck2.value) {
options = options + "2";
}
alert (options);
}
</script>
<form name="form1">
<input type="checkbox" name="nocase">option 1
<input type="checkbox" name="ck2">option 2
<input type="button" value="Check" onclick="check();">
</form>
<div id="results"></div>
</body>
</html>
I really am having problems understanding where the fault lies. Can anyone point it out?
Thanks in advance.
You should use the checked property and not the value property of your input fields:
if (document.form1.nocase.checked) {
//code here
}
The value attribute is string value that is sent to the server for every checked checkbox and you can specify its value in the html tag:
<input type="checkbox" name="nocase" value="nocase">
The checked property gives you the desired boolean that shows whether or not the checkbox is checked.
I am new to javascript and I am trying to add a conditional field to a form. I have looked at these posts:
How do you create a hidden div that doesn't create a line break or horizontal space??
conditional display of html element forms
I have come up with this little example so far which works fine.
<html>
<head>
<script language="javascript">
function cucu(form){
if(form.check.checked){
document.getElementById("cucu").style.visibility="visible";
}
else{
document.getElementById("cucu").style.visibility="hidden";
}
}
function load()
{
document.getElementById("cucu").style.visibility="hidden";
}
</script>
</head>
<body onload="load()">
<form id="form">
<input type="checkbox" name="check" onclick="cucu(this.form)" >
<div id="cucu">
CUCU
</div>
</form>
</body>
<html>
I have tried the same method on a larger side and the only change is that the hidden element is a text field but it just doesnt' work.
This is the part of the form:
Album: <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this.form)" id="idAlbum">
<div id="divAlbum" >
Choisir un album : <input type="text" name="Album" list="Albums">
<datalist id="Albums">
<?php
$requete = 'SELECT DISTINCT titreAlbum FROM Album';
$resultat = mysqli_query($connexion, $requete);
while($row = mysqli_fetch_assoc($resultat)){
echo '<option value="'.$row['titreAlbum'].'">';
}
?>
</datalist> <br><br>
</div>
My head looks as follows:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html ; charset=UTF-8" />
<title>BLABLA</title>
<link rel="stylesheet" type="text/css" href="include/styles.css">
<script language="javascript" >
function hideElements(){
document.getElementById("divAlbum").style.visibility="hidden";
}
function checkAlbum(form){
if(form.checkAlbum.checked){
document.getElementById("divAlbum").style.visibility="visible";
}else{
document.getElementById("divAlbum").style.visibility="hidden";
}
}
</script>
</head>
I really don't know what the problem is. I've checked the functions again and again. Any suggestions for the possible error? Thanks
The reason your button is not working is that this refers to the clicked input itself. The form property on the input refers to the value of the form attribute, not the actual form. In reality you don't need the form attribute, you can simply use this.checked to see if the corresponding input is currently checked.
Album: <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this)" id="idAlbum">
function checkAlbum(cb){
if(cb.checked){
document.getElementById("divAlbum").style.visibility="visible";
}else{
document.getElementById("divAlbum").style.visibility="hidden";
}
}
Beyond this I would suggest that you consider not applying your JavaScript inline. Keeping your code separate from your mark up improves readability and can help prevent errors. You might consider using the jQuery framework as it will make this sort of thing much easier.
$(function(){
$('#idAlbum').on('change', function() {
// use change instead of click in case there's a label involved
$('#divAlbum').toggle(this.checked);
});
});
I have a problem. I want the text to be filled by the default value when user lefts it blank here is my code. Please help me to tackle this error.
<html>
<head>
<title>
</title>
<script lang='javascript'>
function makeBlank(obj,defMsg){
if(obj.value==defMsg){
obj.value="";
}
}
function fillDefValue(obj,defMsg){
if(obj.value==""){
obj.value=defMsg;
}
}
</script>
</head>
<body>
<input style="width:190px" onblur="fillDefValue(this,'User Name')" onfocus="makeBlank(this,'User Name')" value="Name" name="fromname" id="fromname" type="text">
</body>
</html>
You don't have to pass the default value to the functions, it's integral part of the textbox element itself:
function makeBlank(obj) {
if(obj.value === obj.defaultValue){
obj.value = "";
}
}
function fillDefValue(obj) {
if(obj.value == "") {
obj.value = obj.defaultValue;
}
}
Then pass only the element:
onblur="fillDefValue(this);" onfocus="makeBlank(this);"
Live test case - it works on all major browsers, probably all browsers.
Your code has a minor error. The functions which make the text field blank or filled with default value have an if statement which checks the condition if(obj.value==defMsg) which is defMsg='User Name'. But in the text field you are assigning value = "Name" so the if condition never become true. Thats why your code is not working. You should either use <input .... value="User Name" ......> or you can call the both functions as <input ...onblur="fillDefValue(this,'Name')" onfocus="makeBlank(this,'Name')" vlaue="Name"....>. Doing any of these two changes the code will work fine. Here is your code with the first change I mentioned:
<html>
<head>
<title>
</title>
<script lang='javascript'>
function makeBlank(obj,defMsg){
if(obj.value==defMsg){
obj.value="";
}
}
function fillDefValue(obj,defMsg){
if(obj.value==""){
obj.value=defMsg;
}
}
</script>
</head>
<body>
<input style="width:190px" onblur="fillDefValue(this,'User Name')" onfocus="makeBlank(this,'User Name')" value="User Name" name="fromname" id="fromname" type="text">
</body>
</html>
You’re probably looking for the placeholder HTML attribute.
<input placeholder="e.g. username42">
You only need JavaScript as a fallback for older browsers. This jQuery plugin will take care of it for you. Here’s a demo: http://mathiasbynens.be/demo/placeholder