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>
Related
I was looking on google a script to copy a input field and this came across:
https://jsfiddle.net/9q3c1k20/
My example:
document.getElementById("copy-text").onclick = function() {
this.select();
document.execCommand('copy');
alert('This is a test...');
}
<!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-1.11.0.js"></script>
</head>
<body>
<input id="copy-text" type="text" value="Select a part of this text!">
</body>
</html>
The script selecting #copy-text is running before the document body (and the input element) has been parsed. Move the script to the bottom of the body:
<!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-1.11.0.js"></script>
</head>
<body>
<input id="copy-text" type="text" value="Select a part of this text!">
<script>
document.getElementById("copy-text").onclick = function() {
this.select();
document.execCommand('copy');
alert('This is a test...');
}
</script>
</body>
</html>
But it's more elegant to put your script in a separate .js file and just give it the defer attribute:
<!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-1.11.0.js"></script>
<script src="myscript.js" defer></script>
</head>
<body>
<input id="copy-text" type="text" value="Select a part of this text!">
</body>
</html>
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>
<!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);
}