<!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</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function buttonClicked(e)
{
alert(e.data.color);
}
jQuery('#but1').bind('click',{color:'red'},buttonClicked);
jQuery('#but2').bind('click',{color:'blue'},buttonClicked);
</script>
</head>
<body>
<br/><br/><br/><br/>
<div align="center">
<form action="" method="get">
<input id="but1" type="button" value="Red" />
<input id="but2" type="button" value="Blue" />
</form>
</div>
</body>
</html>
The alert doesnt get triggered on the click..why is that?
This works:
function buttonClicked(e) {
alert(e.data.color);
}
$(document).ready(function(){
jQuery('#but1').bind('click',{color:'red'},buttonClicked);
jQuery('#but2').bind('click',{color:'blue'},buttonClicked);
});
http://jsfiddle.net/RTXxY/
You have the script placed above where the elements are defined so when the code executes, there's nothing to bind to. The easiest solution is to only execute the script when the document is ready.
jQuery(function($) {
$('#but1').bind('click',{color:'red'},buttonClicked);
$('#but2').bind('click',{color:'blue'},buttonClicked);
}
Related
My code works inside an html but not from an external .js file.
In my external .js, I have a function like .animate() and hide() etc. working fine but
just for functions like .text() or .html() it is not working in the external file.
I even deleted all my code and just kept this script, still it didn't work, but when I copy pasted into my html it worked.
<!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>
</head>
<!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>
</head>
<body >
<div id="demo"> --- </div>
<button>click me</button>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("button").click(function(){
$("#demo").html("text");
});
</script>
</html>
Try this in your JS
$(function() {
$("button").click(function(){
$("#demo").html("text");
});
});
your html code is fully messed up!! update your code with the below
HTML
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div id="demo"> --- </div>
<button>click me</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("button").on("click", function() {
$("#demo").html("text");
});
});
</script>
</body>
</html>
I hope every one familiar with gmail chat where you can pop out your chat window in to new window with its content and if you press the pop-in that new window will be placed in that previous position
I did some work around for that and the following is my problem
I am able to open the content in new window with out its content for example if I have typed in the text box in child.html which is inside the iframe is not showing when on the popout.
Opener
<!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>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
var s=document.getElementById('page').innerHTML;
console.log(s);
winObj.document.write(s);
}
function changeValue()
{
console.log(winObj.document.getElementById('changer').value);
winObj.document.getElementById('changer').value='changer';
}
</script>
</head>
<body>
<div id="page">
<iframe src="child.html" width="100" height="100"></iframe>
</div>
<div id="page1">
<input type="text" id="text1"/>
<input type="button" value="popup" onclick="openwindow()"/>
<input type="button" value="changevalue" onclick="changeValue()"/>
</div>
</body>
</html>
Child
<!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 openerChange()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
</head>
<body>
<input type="text" value="" id="changer" />
<input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>
You need a semicolon.
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed..";
}
I wrote JavaScript code to show the particular div tag in textbox by onclick event.
If I use a form tag, it's not showing div tag id in textfield by onclick. If I remove the form tag, it works fine. Why?
Source:
<!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 MMID(clicked_id) {
document.getElementById('MMID').value = clicked_id;
}
</script>
</head>
<body>
<form action="" method="post">
<div id="28" onclick="MMID(this.id)">Hello Ram</div>
<input name="MMID" type="text" id="MMID" />
</form>
</body>
</html>
Use below code :
<div id="28" class="mycls">Hello Ram</div>
$('.mycls').click(function(){
clicked_id = $(this).attr('id');
$('#MMID').val(clicked_id);
});
You need to load jquery on your page for use above code, but its very simple.
Let me know if any query.
Thanks!
Function name and id name should be changed.Check console it will give you an error.
<script type="text/javascript">
function MMID_FUNC(clicked_id)
{
document.getElementById('MMID').value=clicked_id;
}
</script>
<div id="28" onclick="MMID_FUNC(this.id)">Hello Ram</div>
<input name="MMID" type="text" id="MMID" />
Try this
<!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 MMID(clicked_id)
{
document.getElementById('MMID').value=clicked_id;
}
</script>
</head>
<body>
<form action="" method="post">
<div id="28" onclick="javasxcript: MMID(this.innerHTML)">Hello Ram</div>
<input name="MMID" type="text" id="MMID" />
</form>
</body>
</html>
Try this:
<div id="28" onClick="MMID(this);">Hello Ram</div>
<input name="MMID" type="text" id="MMID" />
Javascript:
function MMID(ele)
{
document.getElementById('MMID').value= ele.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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function mmid(clicked_id) {
document.getElementById('MMID').value = clicked_id;
}
</script>
</head>
<body>
<form action="" method="post">
<div id="28" onclick="mmid(this.id)">Hello Ram</div>
<input name="MMID" type="text" id="MMID" value="" />
</form>
</body>
</html>
Don't give the same name for your function and div id in a form tag.
Javascript thinks that the MMID is an object, and not a function.
<!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 gets(clicked_id)
{
document.getElementById('MMID').value=clicked_id;
}
</script>
</head>
<body>
<form action="tests.php" method="post">
<div id="28" onclick="gets(this.id)">Hello Ram</div>
<input name="MMID" type="text" id="MMID" />
</form>
</body>
</html>
Issue on IE, If I run this script in all browsers except IE, It alert form submitted once, but if I try on IE, it alert twice,
what could be the reason ?
<!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>
<?php
if(isset($_POST['btn_submit']) && $_POST['btn_submit'] == 'Submit')
{
?>
<script language="javascript">
alert('form submitted');
</script>
<?php
}
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="name" method="post">
<input type="file"/>
<input type="submit" name="btn_submit" value="Submit" />
</form>
</body>
</html>
Edit : I tried this code on IE7 and IE8
Try your js at the end of the script:
<!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>
</head>
<body>
<form id="name" method="post">
<input type="file"/>
<input type="submit" name="btn_submit" value="Submit" />
</form>
</body>
</html>
<?php
if(isset($_POST['btn_submit']) && $_POST['btn_submit'] == 'Submit')
{
?>
<script language="javascript">
alert('form submitted');
</script>
<?php
}
?>
Try in this way, its a bit clean way of doing it.
<!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 src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').submit(function(event){
event.preventDefault();
// Do other stuff
alert('form submitted');
});
});
</script>
</head>
<body>
<form id="name" method="post">
<input type="file"/>
<input type="submit" name="btn_submit" value="Submit" />
</form>
</body>
</html>
i would like to add some buttons on my site and change the background when i click them.
<html>
<head>
<SCRIPT LANGUAGE "JavaScript">
function cambiaSfondo(code){
document.sfonfo=code
}
</SCRIPT>
</head>
<body>
<FORM>
<input type = "button" name="button1" value="sfondo1" onClick='idk what to put here'>
</FORM>
</body>
</html>
sfondo is not a valid property
function cambiaSfondo(img){
document.body.style.backgroundImage = 'url(' + img + ')';
}
<input type = "button" name="button1" value="sfondo1" onClick="cambiaSfondo('/path/to/img')">
http://www.w3schools.com/jsref/prop_style_backgroundimage.asp
Working code here :
<!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 src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script tpye="text/javascript">
// $(document).ready(function() {
function cambiaSfondo(img) {
$('body').css('background-image', 'url('+img+')');
}
//});
</script>
</head>
<body>
<FORM> <input type = "button" name="button1" value="sfondo1" onClick="cambiaSfondo('search-icon-2x.png');"> </FORM>
</body>
</html>
First of all you don't have to use form because you are not getting or posting anything to server!
<html>
<head>
<script type="text/javascript">
function changeColor(){
document.body.style.background="#000000";
}
</script >
</head>
<body>
<button type="button" onclick="changeColor()">Change Color</button>
</body>
</html>
You can change any background property : http://www.w3schools.com/jsref/prop_style_background.asp
This is your exact case : Example