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>
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.
Full Question: I want to log the value of each field (email address & select menu) to the console in the browser. I have made an attempt for this below but it does not seem to work. Any help would be much appreciated!
Code:
<!DOCTYPE html>
<html>
<head>
<title>Shopify Frontend Developer Intern</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<script>
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('email').value);
}
function myFunction() {
logOptions();
logEmail();
}
</script>
<!-- <div class="input form"> -->
<form id="inputform" method="get" action="confirmation.html">
<input id="email" type="email" placeholder="Email Address" required>
<button type="submit" id="validate" onsubmit="myFunction()">Sign up now</button>
<select name="Interests" required>
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
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.
I am trying to create a php form for car rental website with different options to choose for the customer. If the customer wants a small car with seating capacity of 4 then a dialog box should appear with list of cars available, so he can choose from that options. I tried to do it, but no luck.
How to add different images to a jquery dialog box? After adding one choice of them to save in php form before submitting it:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$("#imgpopup").dialog({
modal: true,
autoOpen: false,
buttons :{
"Save": function() {
$('#car').val($(this).attr("img") );
$( this ).dialog( "close" );
},
}
});
$("#selectBox").change(function(){
if ($(this).val()=="4")
{
$("#imgpopup").dialog('open'); }
});
});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="">
<select id="selectBox">
<option value="0">select</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="7+">7+</option>
</select>
<input type="image" id="car" name="car" >
<div id="imgpopup">
<img id="image1" src="car1.png">
<img id="image2" src
</div>
</form>
</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>