This is my current code. When I click on the button approve....the html heya changes to fred flinstone, but goes back again to heya in 2 seconds. Why so?
<!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>
<script language="javascript" type="text/javascript">
function button()
{
var a = document.getElementById('approve');
document.getElementById('p').innerHTML= 'Fred Flinstone';
}
</script>
<body>
<form>
<p id="p">heya</p>
<input type="submit" id='approve' value="approve" onclick="button()"/>
<input type="submit" id="reject" value="reject"/>
</form>
</body>
</html>
Thanks.
That's because the submit button causes the page to reload, effectively undoing your changes to the DOM.
If you change the type of the input element to "button" instead of "submit" it will work fine.
<input type='button' id='approve' value='approve' onclick='button()'/>
Please note that in doing this, the button will not be posting the form anymore. If that's what you want then you will need to have code on the server side to modify the rendered page to reflect your changes.
This also works:
<input type="submit" id='approve' value="approve" onclick="button(); return false;"/>
Related
I'm trying to get TinyMCE to work and I'm struggling. Here is my complete page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas"
});
</script>
</head>
<body>
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<br />
<input type="submit" value="Save" />
</p>
</form>
</body>
</html>
The JS file is found, the php file doesn't exist yet (although I don't believe that will be an issue?)
However when I load my page in Chrome or IE8 the textbox just looks like it always does?
I don't know if it's related but I get a script error in chrome: object has not method 'extend'
Why am I not getting the updated textbox as seen on the site?
I am having a form in which i have applied the javascript validations, but if the user has javascript disabled then those validations does not work, please help me that how can i stop the user from submitting form until & unless he enables the javascript.
Thanks
Use JavaScript to put the submit button there.
<script type="text/javascript">
document.write("<input type=\"submit\" value=\"Submit Form\" />");
</script>
<noscript>
<p style="color: red;"><b><i>Please enable JavaScript to continue</i></b><p>
</noscript>
You could add the disabled="disabled" attribute on your submit button. Then using javascript when the DOM is loaded remove this attribute.
you cannt, on the client side. But you can still do validation on the server side. Essentially, server-side validation is what really matters.
You can use javascript validation, but note that javascript is just for adding more usability (i.e use it to make form submission easier for the client). Without javascript a form should still be submittable, partially for the small user-base which doesn't have javascript enabled by default.
partially because of a very small user base who otherwise will pwn you in the face for only using client side javascript validation and can (and probably will try at some point) to bypass this. So this is why server validation is a must, not only for the small user base without javascript.
Then ofcourse to answer your question, for the small user-base who wont try to manipulate your database or server you could remove your <form> and use:
<noscript>
You can FORM_BEHAVIOUR me with javascript enabled.
</noscript>
<script>
create a form here with javascript
</script>
How exactly you want to render your form is then ofcourse up to you, but note that no javascript can stop the very-small user base from abusing it.
javascriptdemo.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>JAVASCRIPTDEMO</title>
<script language="javascript" type="text/javascript">
function onset()
{
document.forms["jdemoform"].elements["uname"].focus();
}
function jdemo()
{
if(document.forms["jdemoform"].elements["uname"].value=="")
{
alert("fill your name");
document.forms["jdemoform"].elements["uname"].focus();
return false;
}
document.forms["jdemoform"].submit();
}
</script>
</head>
<body onload="onset();">
if javascript disabled then form will not be submitted
<form name="jdemoform" method="post" action="getname.php">
Name:<input type="text" name="uname" />
<input type="button" value="Submit" onClick="return jdemo();"/>
</body>
</html>
getname.php
<!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>JAVASCRIPTDEMO</title>
</head>
<?php
echo $_POST["uname"];
?>
<body>
</body>
</html>
Please, help me with one problem. I have this code, for submitting form via anchor.
<!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>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnLogout").click(function() {
$('#frm').submit();
return false;
});
});
</script>
</head>
<body>
<form id="frm" action="/" method="post">
<div>
<p>
<label for="txtLogin">Login:</label>
<input name="txtLogin" />
</p>
<div>
<a id="btnLogout" href="javascript:void(0)">выход</a>
</div>
</div>
</form>
</body>
</html>
It works fine on IE7,8, Opera and Google Chrome, but does not work on FireFox 3.5.
I can not understand why it does not work?
Based on the answer to the same question here: Jquery Form.submit() on Chrome works but not in Firefox
Add the form object to the DOM before submitting:
$("#actionform").appendTo("body").submit();
According to this , manual submit with jQuery doesn't work under Firefox when the form has been added trough Javascript
The solution consists to clone the form and submit it :
$('#myform').on('submit', function(e) {
e.preventDefault();
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
$(this).clone().appendTo("body").submit(); // FF only
} else {
this.submit(); // works under IE and Chrome, but not FF
}
});
This works for me :
<!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>
<title></title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnLogout").click(function() {
$("#actionform").submit();
return false;
});
});
</script>
</head>
<body>
<form id="actionform" action="something.html" method="post" name="forma">
<label for="txtLogin">Login:</label>
<input name="txtLogin" />
Uno mas
</form>
</body>
</html>
Try to include a submit button in your form. Even if it is hidden.
<input type="submit" style="display:none;" />
This may be a FF issue not related to jQuery directly. Try putting a filename in the action attribute like this:
<form id="frm" action="/index.html" method="post">
Just make sure to change index.html to whatever your default document is.
I am just trying to get this plugin to work but I am not sure what I am doing wrong.
http://code.google.com/p/sevenup/
So I tried to follow the one like of code they give you.
<script type="text/javascript" src="sevenup.0.3.min.js"></script>
...
<body onload="sevenUp.test( options, callback );">
My test page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="sevenup.0.3.js" type="text/javascript"></script>
</head>
<body onload="sevenUp.test( options, callback );">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
So I did that and I get "option" is not defined.
So I tried this then
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<script src="sevenup.0.3.js" type="text/javascript">
var options = {
enableClosing: true,
enableQuitBuggingMe: true,
overlayColor: "#000000",
lightboxColor: "#ffffff",
borderColor: "#6699ff",
downloadLink: osSupportsUpgrade ?
"http://www.microsoft.com/windows/internet-explorer" :
"http://getfirefox.com",
overrideLightbox: false,
lightboxHTML: null,
showToAllBrowsers: false
};
var callback = function() {
// Switch IE-specific content
// AJAX call to map IP to 'IE6 user' status
// etc.
}
sevenup.test(options, callback);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
but nothing happens.
What am I missing.
Can someone set me an example up? Like I tried many different ways other then above and I still can't get it to work.
A standard Html page should be fine. Since this really does not need serverside stuff.
Here is a standard html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="sevenup.0.3.js"></script>
<script type="text/javascript" src="sevenup_black.0.3.js"></script>
</head>
<body onload="sevenUp.plugin.black.test( options, callback );">
</body>
</html>
So not sure what I am still doing wrong. Get options undefined.
Try passing an empty options object and function as a parameter. The options variable is NOT exposed by the script and that seems to be why it says it's undefined (because it is). The callback variable isn't exposed either.
sevenUp.test({}, function(){} );
You could also easily load up the page in Firefox, put up a breakpoint and inspect the local variables.
You're using ASP.NET and the Body OnLoad is not a great place for putting JavaScript hooks.
Add this to the very bottom of your page before the </body> tag:
<script type="text/javascript">
// Call sevenUp
sevenUp.test( options, callback );
</script>
Another thing you want to do is make sure that you are referencing the correct path to the source JavaScript file:
<script type="text/javascript" src="<%=ResolveClientURL("~") %>/Scripts/sevenup.0.3.min.js"></script>
Remove the runat="server" from your <head> tag. That should fix it.
I have an input which at some points happens to have the focus. If the user click in the "background" of the page, the input loses its focus. I was trying to simulate the click on the background with the following code, but this doesn't work (you will notice that the input still has the focus). Any suggestion on how to write code that simulates a click on the "background" of the page?
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js" ></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
document.getElementById("input").focus();
document.getElementById("main").focus();
});
</script>
</head>
<body>
<div id="main">
<form action="/">
<p>
<input type="text" id="input"/>
</p>
</form>
</div>
</body>
</html>
I would imagine using blur() would do the trick:
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
document.getElementById("input").focus();
document.getElementById("input").blur();
});
</script>
Try using the blur event. If you're using jQuery there is a method you can call on the DOM object to raise this event. The blur() method should also work without jQuery.
http://docs.jquery.com/Events/blur
Your idea is right, but there is a little problem.
document.getElementById("main").focus();
<div id="main">
as shown in your code, actually the div HTMLElement doesn't have a focus method.
so you can call other elements that have a focus method or call blur() on the input element