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.
Related
I nibbling on a bug in ff:
See http://nocturne.wmw.cc/bugff.html (not reproducable in jsfiddle - too bad)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<button disabled="disabled">sdf</button>
<script>
jQuery(function(){
if(!jQuery('button').is(':disabled'))
alert('Is not disabled!');
jQuery('button').removeAttr('disabled');
});
</script>
</body>
</html>
Now the Problem:
If i load the first time, everything is ok.
If i reload the page using Ctrl+r, the alert() shows the error-message.
If i Reload using Ctrl+Shift+r the bug does not occoure.
I do use Microsoft® Windows® 7.
Reproduceable at least at FF28, FF29.
How to solve?
The issue seems to be the same mechanism that stores user-input for form-elements, the state of the button has been cached.
possible solution(see: How can I stop Firefox from caching the contents of a textarea on localhost? ):
<button disabled="disabled" autocomplete="off">sdf</button>
http://jsfiddle.net/doktormolle/4ZLd9/show/
Just try disabled instead of disabled = "disabled"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
<button disabled>sdf</button>
<script>
jQuery(function(){
if(!jQuery('button').is(':disabled'))
alert('Is not disabled!');
jQuery('button').removeAttr('disabled');
});
</script>
</body>
</html>
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>
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;"/>
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