html code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body bgcolor="#FFFFCC">
<center>
<form>
<select id="newLocation">
<option value="1.jpg">index</option>
<option value="script.js">posts</option>
<option value="2.jpg" selected="selected">blog</option>
</select>
</form>
javascript :
window.onload = startInit;
function startInit() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById("newLocation");// what does this statement return ?
var newPage = newLoc.options[newLoc.getSelectedIndex].value;
if(newPage != "")
window.location = newPage;
}
Why don't get to to new page i.e the value when i select an option from the combo box ?
Also what does document.getElementById("newLocation"); this statement (the first statement of the function jumpPage) return ?
You can try
var newPage = newLoc.options[newLoc.selectedIndex].value;
The statement
var newLoc = document.getElementById("newLocation");
just finds the DOM (HTML) element <... id="newLocation" ...>, i.e. your <select id="newLocation"> .
document.getElementById("newLocation") will return you the SELECT object (i.e., the reference to your drop-down).
Regarding the JS, it has an error. You should change newLoc.getSelectedIndex to newLoc.selectedIndex.
Related
How do I post some text to a php doc and then the php doc check's it and returns a response?
In this example checks if entered value is "test" then return and alert TRUE else return and alert FALSE.
HTML/javascript (test_php_response.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_response</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function post_to_php() {
$.post( "test_response.php", function( data ) {
if (data == true){
alert("true");
}else{
alert("false");
}
});
}
</script>
</head>
<body>
<a href="javascript:post_to_php();" class='button'>click_here</a>
<form name="response_form" id="response_form" action="test_response.php" method="POST">
<input id="response_form_textbox" name="response_form_textbox" type="text" >
</form>
</body>
</html>
PHP (test_response.php)
<?php
$text_field = $_POST['response_form_textbox'];
if ($text_field == 'test'){
echo 'true';
}else{
echo 'false';
}
?>
DEMO
----EDIT solved / working version below:-----
HTML/javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_response</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function post_to_php() {
$.post( "test_response.php", $('#response_form').serialize(), function(data) {
if (data === "true"){
alert("true");
}else{
alert("false");
}
});
}
</script>
</head>
<body>
<a href="javascript:post_to_php();" class='button'>click_here</a>
<form name="response_form" id="response_form" action="test_response.php" method="POST">
<input id="response_form_textbox" name="response_form_textbox" type="text" >
</form>
v.05
</body>
</html>
PHP
<?php
$text_field = $_POST['response_form_textbox'];
if ($text_field == 'test'){
echo 'true';
}else{
echo 'false';
}
?>
You aren't sending any data . The second argument of $.post is for that data but you omitted it.
Thus in your php $_POST will be empty.
The easiest way to send form data is to use serialize()
$.post( "test_response.php", $('#response_form').serialize(), function( data ) {
if (data){
alert("true");
}else{
alert("false");
}
});
Reference:
serialize() docs
$.post() docs
I have sample code to prove my work
try to change code to lastest ie version but stiuck on ie10
I have object create on index.html
and pass to parent frame1.html
frame1.html pass to frame2.html this page still set/get data
frame2.html open pageX.html
The problem happen when try to set value on pageX but can get value
when call function to set value page display error Function Expected
This code still work on ie9
I don't know about object behavior change between ie9 to ie10
This is my sample
it has 4 html
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title> New Document </title>
<script type="text/javascript">
var zo_gbl_data = new Object ( );
</script>
</head>
<frameset>
<frame src='frame1.html'>
</frameset>
</html>
frame1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
var zo_gbl_data = parent . zo_gbl_data;
function initObj() {
zo_gbl_data . data_lv1 = new Object();
zo_gbl_data . data_lv1 . data = 0;
}
function getObjectLv1() {
alert(zo_gbl_data . data_lv1 . data);
}
function setObjectLv1() {
zo_gbl_data . data_lv1 . data += 1;
}
initObj();
</script>
</head>
<body>
<input type='button' value='Set Object lv1' onclick='setObjectLv1()'><br>
<input type='button' value='Get Object lv1' onclick='getObjectLv1()'><br>
<input type='button' value='open menu' onclick='window.open("frame2.html", "_self")'>
<input type='button' value='open Page' onclick='window.open("pageX.html", "", "", true)'>
</body>
</html>
frame2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
var zo_gbl_data = getGbData();
function getGbData() {
return ( parent . zo_gbl_data );
}
function getData() {
var lo_data;
lo_data = zo_gbl_data;
alert(lo_data . data_lv1 . data);
}
function setObjectLv1() {
var lo_data;
lo_data = zo_gbl_data ;
lo_data . data_lv1 . data += 1;
}
</script>
</head>
<body>
<input type='button' value='Get Opener' onclick='getData()'><br>
<input type='button' value='set Data' onclick='setObjectLv1()'><br><br>
<input type='button' value='open Page' onclick='window.open("pageX.html", "", "", true)'>
</body>
</html>
pageX.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
var zo_gbl_data = getGbData();
function getGbData() {
return ( opener . zo_gbl_data );
}
function getData() {
var lo_data;
lo_data = zo_gbl_data ;
alert(lo_data . data_lv1 . data);
}
function setObjectLv1() {
var lo_data;
lo_data = zo_gbl_data ;
lo_data . data_lv1 .data += 1;
}
</script>
</head>
<body>
<input type='button' value='Get Opener' onclick='getData()'><br>
<input type='button' value='set Opener' onclick='setObjectLv1()'><br>
</body>
</html>
How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
I have list of cars models, and i trying to insert the value of select to the cookie with jQuery.
this is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var singleValues = $("#car").val(); //I NEED TO BE INSIDE
$('#continue').click(function() {
$.cookie("car", singleValues);
})
$('#continue').click(function() {
var singleValues = $("#car").val();
$.cookie("car", singleValues);
})
</script>
</head>
<body>
<select id='car'>
<option value="mazda">mazda</option>
<option value="honda">honda</option>
</select>
<a href='/' id='continue'>#<div id='continue_button'></div></a>
</body>
</html>
but the cookie didnt make.... why?
thank you very much about your help :)
You need to wrap your code in a document ready handler. Try this:
<script type="text/javascript">
$(function() {
$('#continue').click(function() {
var singleValues = $("#car").val();
$.cookie("car", singleValues);
})
});
</script>
Currently your code is attaching the events before the elements exist in the DOM.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
//function del () {
var x= new Date ();
var date= x.getDate ();
var hours= x.getHours();
var minutes=x.getMinutes();
var sec= x.getSeconds();
document.write(minutes +":"+ sec )
if (minutes=="33"){
//alert ("time is over")
document.getElementById('airtel').removeChild(airtel);
}
//}
</script>
</head>
<body>
<div id="airtel">
<div id="vodafone">vodaphone</div>
<div id="idea">idea</div>
</div>
</body>
</html>
Using jQuery Library removes the pain from using Javascript for handling the DOM, i sugest you give it a try.
But if you just want that working in native Javascript, what you need to do is traverse to the parentNode and then remove the child you want.
var element = document.getElementById('airtel');
element.parentNode.removeChild(element);
Maybe you are better off using jQuery with it's remove method for this.
You should get the element of 'airtel' then remove it from it's parent, which is the Body tag.
var airtel= document.getElementById('airtel');
document.getElementsByTagName('body')[0].removeChild(airtel);