I keep getting this error in the below code on the last script line in my handlebars file "Javascript Error "Uncaught ReferenceError: selectMove is not defined"
Here is my update-pokemon.handlebars rendered from the console.
<html>
<head>
<title>Pokemon Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/boostrap/3.3.7/js/bootstrap.min.js></script>
<script src="/static/selectMove.js"></script>
<script src="/static/updatepokemon.js"></script>
</head>
<body>
<h1> Update sadfasdf: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="sadfasdf"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="0"><br>
Primary Move: <select name="movename" id="move-selector">
<option value="1">Vine Whip</option>
<option value="2">Razor Leaf</option>
<option value="3">Solar Beam</option>
<option value="4">Ember</option>
<option value="5">Flame Burst</option>
<option value="6">Flamethrower</option>
<option value="7">Bubble</option>
<option value="8">Water Gun</option>
<option value="9">Hydro Pump</option>
<option value="10">String Shot</option>
</select><br>
</form>
<button onclick="updatePokemon(13)">Update</button>
<script>selectMove(1);</script>
</body>
I think it may relate to the selectMove.js file that contains the selectMove function, which is below here
function selectMove(id) {
$("#move-selector").val(pokemonid);
}
Also here is my updatepokemon file
function updatePokemon(id) {
$.ajax({
url: '/pokemon/' + id,
type: 'PUT',
data: $('#update-pokemon').serialize(),
success: function(result) {
window.location.replace("./");
}
})
};
The first file is my handlebars file in my views directory, and the second is my selectMove.js located in the public directory.
EDIT - Here is my handlebars code
<h1> Update {{pokemon.pokemonname}}: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="{{pokemon.pokemonname}}"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="{{pokemon.evolutionlevel}}"><br>
Primary Move: <select name="movename" id="move-selector">
{{#each move}}
<option value="{{primarymoveid}}">{{primarymovename}}</option>
{{/each}}
</select><br>
</form>
<button onclick="updatePokemon({{pokemon.pokemonid}})">Update</button>
<script>$(function() {selectMove({{pokemon.movename}})});</script>
I think what's happening is your selectMove function from external JavaScript isn't loaded yet. Wrap the selectMove in $( document ).ready()
<script>$(function() { selectMove(1); });</script>
Try with it :
<html>
<head>
<title>Pokemon Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1> Update sadfasdf: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="sadfasdf"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="0"><br>
Primary Move: <select name="movename" id="move-selector">
<option value="1">Vine Whip</option>
<option value="2">Razor Leaf</option>
<option value="3">Solar Beam</option>
<option value="4">Ember</option>
<option value="5">Flame Burst</option>
<option value="6">Flamethrower</option>
<option value="7">Bubble</option>
<option value="8">Water Gun</option>
<option value="9">Hydro Pump</option>
<option value="10">String Shot</option>
</select><br>
</form>
<button onclick="updatePokemon(13)">Update</button>
<script src="https://maxcdn.bootstrapcdn.com/boostrap/3.3.7/js/bootstrap.min.js></script>
<script src="/static/selectMove.js"></script>
<script src="/static/updatepokemon.js"></script>
<script>selectMove(1);</script>
</body>
</html>
To better practice again, add document ready.
Related
I want to implement drop-down list with multiple group selection checkbox. There are a lot of options,so I use mysql to save them. How could i get data from mysql to use as option.I want to use php to retrieve data and they must be hierarchical tree structure.
I use this sample code, but option value is directly entered. How to make it display herarchical form as image below.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-
typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/css/bootstrap-multiselect.css" />
</head>
<body>
<div class="container" style="width:400px;">
<form method="post" id="framework_form">
<div class="form-group">
<label>Select which Framework you have knowledge</label>
<select id="framework" name="framework[]" multiple class="form-control">
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#framework').multiselect({
nonSelectedText: 'Thêm khách mời',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth: '400px'
});
});
</script>
Sorry for my bad English and Thanks for reading.
I need to select only 1 option inside a group. I have used multiple-select.js
I should be able to click either
A1 OR A2 OR A3
AND
B1 OR B2 OR B3
I also tried with - thought that it can deselect previous buttons when a new one is clicked as long as all of them have the same name but in vain.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
</head>
<body>
<select multiple="multiple">
<optgroup label="Group A">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</optgroup>
<optgroup label="Group B">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</optgroup>
</select>
<script>
$('select').multipleSelect(
{
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
onClick: function(view) {
//;
}
}
);
</script>
</body>
Normally,multiple-select plugin does not support your desired behavior where you can choose only one choice in each optgroup in a single select.However,you can choose only one choice in a single select without optgroup.
So you can use 2 "single row" selects to accomplish your desired functionality.
PS: I have tried to customize the multiple-select behavior enabling you to choose only one radio button in a single optgroup,but the plugin is not flexible enough.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" />
</head>
<body>
<fieldset>
<legend>Choose Group A and B</legend>
<label>Group A</label>
<select multiple="multiple">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</select>
<label>Group B</label>
<select multiple="multiple">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</select>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<script>
$('select').multipleSelect({
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
single: true,
onClick: function (view) {
/*
view.label: the text of the checkbox item
view.checked: the checked of the checkbox item
*/
//Uncheck other checkboxes in the group
},
onOptgroupClick: function (view) {
/*
view.label: the text of the optgroup
view.checked: the checked of the optgroup
view.children: an array of the checkboxes (DOM elements) inside the optgroup
*/
}
});
</script>
</body>
</html>
Hope it can help you.
For the sake of space in a form ,use bootstrap inline form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple select to function like radio in a group</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="container">
<form class="form-inline">
<fieldset>
<legend>Choose Group A and B</legend>
<label>Group A </label>
<select class="form-control">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</select>
<label>Group B </label>
<select class="form-control">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</select>
</fieldset>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I'm having a problem with my java-script code. Something is wrong and i don't understand. I have the following code and i can not alert the variable.
Javascript (inside head tag)
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
And this in body tag
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
......
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
I choose an option but I can't alert this option. I don't know what is the problem here.
You are close... Give the following a try. It is preferred in Jquery to actually use the .on() method. You can listen for whatever event you want and then respond to it.
$("#cd-dropdown").on("click", function() {
alert($(this).val());
});
<section class="main">
<div class="fleft">
<p><br />Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
......
<div class="cont_btn">
<a data-type="submit" class="btn">send</a>
</div>
Your code shoud work, when you click the button the checkbox is already created, try the code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
</script>
</head>
<body>
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
</body>
</html>
When I reproduced the error in a fiddle, it didn't work until i changed jQuery's load to No wrap - in <head>. I think your problem may be that you're loading jQuery in the body, and it's loaded after your other script, which somehow throws things off. Try moving it to your <head> tag, like this:
<head>
<script>
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.dropdown.js"></script>
<!-- etc -->
<title>Your Title</title>
</head>
<body>
<section class="main">
<div class="fleft">
<p></br>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
......
<div class="cont_btn">
<a onclick="read()" href="#" data-type="submit" class="btn">Send</a>
</div>
I have this script currently, which does everything I now want it to do. It has a drop down, you select goTo, and you can choose Wikipedia or a list of other websites. From there it will change the value of the iFrame that is currently there (Microsoft for example) to a different website (Wikipedia for example).
However my issue is that upon changing options, it closes the connection and displays a blank page until I choose Wikipedia. How can I resolve this? This is my current code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.10"></script>
<script>
function goToPage763(mySelect)
{
PageIndex2=mySelect.selectedIndex;
{
if
(
mySelect.options[PageIndex2].getAttribute('href') != "none"
)
{
//this is the key code in the JavaScript to open the new page in
//the iframe:-
frames['iframe2'].location.href = mySelect.options[PageIndex2].getAttribute('href');
}
}
}
// Add your javascript here
$(function(){
$("#size").chained("#color");
});
</script>
</head>
<body>
<form name="form763">
<select class="form-control" id="color">
<option value="">choose options</option>
<option value="27">Goto</option>
<option value="26">Nothing</option>
</select>
<select class="form-control" id="size" name="select763" size="1" onchange="goToPage763(this.form.select763)">
<option value="">choose options</option>
<option value="27" class="27" href="http://www.wikipedia.com">Wiki</option>
<option value="26" class="26">Nothing</option>
</select>
</form>
<iframe name="iframe2" src="http://www.microsoft.com" align="top" height="800px" width="95%" align="middle">
</body>
</html>
See if this will solve your problem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"
data-semver="2.0.3" data-require="jquery"></script>
<script>
function goToPage763(mySelect){
frames['iframe2'].location.href = $(mySelect).val();
}
</script>
</head>
<body>
<form name="form763">
<select class="form-control" id="size" name="select763"
size="1" onchange="goToPage763(this)">
<option value="">choose options</option>
<option value="http://www.wikipedia.com">Wiki</option>
<option value="http://www.microsoft.com">Microsoft</option>
<option value="https://www.wiktionary.org/">Wiktionary</option>
</select>
</form>
<iframe name="iframe2" src="http://www.microsoft.com" align="top"
height="800px" width="95%" align="middle">
</body>
</html>
I seem to get this null or not an object error over and over when I try to code in javascript. This is an simple example where I'm just trying to make a window pop up that displays the name of the option. How can I avoid getting this error when I'm coding?
The code returns this error in Internet Explorer:
Error: 'document.forms.0.questions' is null or not an object
<!DOCTYPE html>
<!-- HTML5 style -->
<head>
<title>Challenge Question</title>
<script type="text/javascript">
/* <![CDATA[ */
window.alert(document.forms[0].questions.pet.name);
/* ]]> */
</script>
</head>
<body>
<form action="get" >
<select name="questions">
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
</body>
</html>
The element must be added to the DOM first, then you can access it. Now you're trying to access an element that does not yet exist :
<!DOCTYPE html>
<html>
<head>
<title>Challenge Question</title>
</head>
<body>
<form action="get">
<select name="questions">
<!-- Element is added here -->
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
<script type="text/javascript">
/* and can be accessed here, after it's added */
console.log(document.forms[0].questions.options['pet']);
</script>
</body>
</html>
FIDDLE
I have tested the code. It works fine.
<script type="text/javascript">
function func1()
{
var index = document.getElementById("pet").selectedIndex;
var value = document.getElementById("pet").options[index].text;
alert(value);
}
<form action="get">
<select name="questions" id="pet" onchange="if (this.selectedIndex) func1();">
<!-- Element is added here -->
<option value="pet" name="pet" >What is your pet's name?</option>
<option value="pet" name="pet" >What is your pet's 1?</option>
</select>
</form>