I’m maintaining a site in ASP, one of the tasks is to set the focus on textbox on a page.
Here is what I have tried:
<script type="text/javascript">
<!--
document.psForm['password'].focus();
//AND
document.getElementById("password").focus();
-->
</script>
I didn't think this would work... and it doesn't:
<form id="psForm" action="logonpw.asp" method="post" defaultfocus="password">
This doesn't work:
<body onload="javascript:docuument.psForm.password.focus();">
Here is the form:
<form id="psForm" action="logonpw.asp" method="post">
<table border="0" cellpadding="5">
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="password" value="<%= password %>" size="50">
</td>
</tr>
</table>
</form>
Try this:
Add:
id="password"
to the input tag, then use:
document.getElementById("password").focus();
a) move
<script type="text/javascript">
<!--
document.psForm['password'].focus();
//AND
document.getElementById("password").focus();
-->
</script>
to bottom of page source.
b) fire code on load
<script type="text/javascript">
<!--
function handleOnLoad(){
document.psForm['password'].focus();
//AND
document.getElementById("password").focus();
}
-->
</script>
...
<body onload="handleOnLoad();">
and by the way, only the second onfocus would do any good.
<body onload="javascript:docuument.psForm.password.focus();">
should be
<body onload="javascript:document.psForm.password.focus();">
Check spelling...
<body onload="javascript:document.psForm.password.focus();">
document was misspelled
Related
The following code does not drop down and up the div when clicked,It doesn't perform anything.But Im trying the exact code that works here http://jsfiddle.net/vNeXq/
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
</script>
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</body>
CSS File
#loginWrapper
{
width:400px;
background-color:#F0F0F0;
}
#login
{
cursor:pointer;
}
#loginForm
{
display:none;
}
Pretty sure you haven't included jQuery. The jQuery library is necessary for the script you want to run. You can download a copy of jQuery from here or you can use a copy hosted from Google. jQuery has to be included before the code you want to run.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
<!-- INCLUDE JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
}):
</script>
</body>
</html>
If you have included jQuery in your project you maybe want to wrap your code with a function that executes when the page is loaded, so you are sure everything is there:
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
})
You can try like:
<script>
$(document).ready(function(){
$(document).on('click','#login',function(){
$('#loginForm').slideToggle('fast');
});
});
</script>
It seems that are your not including the jQuery library in the head of the html file.
Include the jquery library (it should be before your script):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
In order for jQuery to modify the html document it must wait until the page is ready. You can do this by putting your function into:
$(document).ready(function() {
// your code here
});
So your script will end up looking like:
$(document).ready(function() {
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
});
I have specific html setup that looks like this
<table class="table">
<form action="" name="f_form" id="id_f_form" method="POST">
<input type="hidden" name="f1" value="555">
<tr onClick="javascript: submitform();">Block</tr>
</form>
</table>
Where the javascript function submitform() looks like this
function submitform() {
if (confirm("Do you want to proceed?")){
document.f_form.submit();
}
}
What I want is a general javascript function that works with every form and not only this form with the name="f_form". I really don't want to write a java function for each and every form :P.
This will use jQuery as it's easier to bind an event on multiple element.
$("form").on('submit',function(){
if(confirm("Do you want to proceed?")){
$(this)[0].submit();
}else{
return false;
}
});
Well for starters sort your HTML that is invalid HTML
Your code with valid required HTML, Body, head and DOCTYPE
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<table class="table">
<form action="" name="f_form" id="id_f_form" method="POST">
<input type="hidden" name="f1" value="555">
<tr onClick="javascript: submitform();">Block</tr>
</form>
</table>
</body>
</html>
use it at https://validator.w3.org/#validate_by_input
so for valid code it should be
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form name="f_form" id="id_f_form" method="POST">
<table class="table">
<tr onClick="submitform(this);"><td><input type="hidden" name="f1" value="555" />Block</td></tr>
</table>
</form>
</body>
</html>
As for your script with valid HTML you make it really easy using jQuery
function submitform(e){
if (confirm("Do you want to proceed?")){
jQuery(e).parent('form').submit();
}
}
I am getting problem with Jquery timepicker(); function
Here it is
<link href="js/jqueryTimepicker/jquery.timepicker.css" rel="stylesheet" />
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jqueryTimepicker/jquery-ui.js"></script>
<script src="js/jqueryTimepicker/jquery.timepicker.js"></script>
<script src="js/jqueryTimepicker/jquery.timepicker.min.js"></script>
This is HTML markup
<div id="tableTime">
<table>
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
<tr>
<td>
<input type="text" id="txtMonday" /></td>
<td>
<input type="text" id="txtTuesday" /></td>
<td>
<input type="text" id="txtWednesday" /></td>
<td>
<input type="text" id="txtThursday" /></td>
<td>
<input type="text" id="txtFriday" /></td>
<td>
<input type="text" id="txtSaturday" /></td>
</tr>
</table>
</div>
Jquery
All of the above jquery files are loading well enough but it throws one error TypeError: $(...).timepicker is not a function
Help!!! I am no where
<script>
$(document).ready(function () {
$("#txtMonday").timepicker();
$("#txtTuesday").timepicker();
$("#txtWednesday").timepicker();
$("#txtThursday").timepicker();
$("#txtFriday").timepicker();
$("#txtSaturday").timepicker();
});
</script>
One of your imports may not be working correctly since I got it working in a JSFiddle. Try redownloading the CSS/JS files and make sure they are in the correct locations. If that still doesn't work, you can use the CDN for referencing the CSS/JS files.
Put the following in your HTML code and it should be fixed
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.js"></script>
Also, in future, I might suggest using a CSS class instead of individual id's like so:
$(document).ready(function () {
$('.txt').timepicker();
});
You may have a problem importing the files.
Look: JSFiddle
Check the external resources that I used.
$(document).ready(function () {
$("#txtMonday").timepicker();
$("#txtTuesday").timepicker();
$("#txtWednesday").timepicker();
$("#txtThursday").timepicker();
$("#txtFriday").timepicker();
$("#txtSaturday").timepicker();
});
you need to use 'jQuery' instead of the '$' symbol to handle the document as jquery variable so put your .timepicker() function inside this block of code:
jQuery(document).ready(function($){
// code goes here
});
So your code should be like this:
jQuery(document).ready(function($){
$("#txtMonday").timepicker();
$("#txtTuesday").timepicker();
$("#txtWednesday").timepicker();
$("#txtThursday").timepicker();
$("#txtFriday").timepicker();
$("#txtSaturday").timepicker();
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
$(function() {
$("#datepicker1").datepicker();
});
$(function() {
$('#timepicker2').timepicker();
});
</script>
</head>
<body style="background-color:#E8E9E9;">
<form method="post" action="makecleaningappt">
<input type="text" id="datepicker" name="date">
<br>
<input type="text" id="timepicker1" name="time">
<input type="text" id="datepicker1" name="date">
<br>
<input type="text" id="timepicker2" name="time">
</form>
</body>
</html>
Below is my code, i just want to alert the "hi" and "hello" so that i can put my actual codes there.
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery-1.11.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
</head>
<script>
$(document).ready(function(){
alert("hi");
$('form[name="lgform"]').submit(function(evnt){
evnt.preventDefault();
});
$("#btn_login").click(function(){
alert("hello");
});
});
</script>
<body>
<form name="lgform">
<div>
<table id="table" >
<tr>
<td width="35px"><input id="mob" type="text" name="mob_nu"></td>
<td width="35px"><input id="pswd" type="password" name="pswd_vl"></td>
<td width="100px"><input type="button" name="login_btn" id="btn_login" value="Login"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
button click event is not working, i am using the same jquery library in some other places which is working fine. I have to call ajax in this page i need to call the button click without submitting the page, as i have few more buttons to add. Any piece of code is appreciated and thanks in advance.
when i tried your code i got this error
Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set
and when i tried after replacing alert's with console.log then it is working fine.
Your code is working fine, replace alert's with console.log()
I am trying to make this code work, I want the innerHTML to be changed but It's instantly changing and gets back to its initial state . Any help ?
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td>
<div id="text_this">123</div>
</td>
<td>
<button onclick="click_me();">Edit</button>
</td>
</tr>
</body>
</html>
Your form is getting submitted. Add a return false; to your button onclick event.
<button onclick="click_me(); return false;">Edit</button>
Or, make the button type='button' (This is the better option)
<button onclick="click_me();" type='button'>Edit</button>
The reason is because the button type is submit by default if a type is not specified.
From MDN,
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td><div id="text_this">123</div></td>
<td><button onclick="click_me();return false;">Edit</button></td>
</tr>
</table>
</form>
</body>
</html>
added a return false statement to the onclick event. without it, the form gets submitted and the page reloads
jsfiddle here