Setting focus on an HTML input box on page load - javascript

I'm trying to set the default focus on an input box when the page loads (example: google).
My page is very simple, yet I can't figure out how to do this.
This is what I've got so far:
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
How come that doesn't work while this works fine?
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("InputID").focus();
}
</script>
</head>
<body onload="FocusOnInput()">
<form>
<input type="text" id="InputID">
</form>
</body>
</html>
Help is much appreciated :-)

And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.
<input type="text" name="fname" autofocus>

This line:
<input type="password" name="PasswordInput"/>
should have an id attribute, like so:
<input type="password" name="PasswordInput" id="PasswordInput"/>

This is one of the common issues with IE and fix for this is simple.
Add .focus() twice to the input.
Fix :-
function FocusOnInput() {
var element = document.getElementById('txtContactMobileNo');
element.focus();
setTimeout(function () { element.focus(); }, 1);
}
And call FocusOnInput() on $(document).ready(function () {.....};

You could also use:
<body onload="focusOnInput()">
<form name="passwordForm" action="verify.php" method="post">
<input name="passwordInput" type="password" />
</form>
</body>
And then in your JavaScript:
function focusOnInput() {
document.forms["passwordForm"]["passwordInput"].focus();
}

Related

Javascript dont take changing from textarea

I want to take all the HTML from a div container, to put it in a value in hidden field and then to show it to the users with the same CSS style but without textareas tags.
Instead of textareas, I want to show the value which came from the text fields (textarea)! So far so good!
But when a change the information in textareas my javascript code do not take the new information from that field.
What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<?php
if(isset($_POST['save'])){
$scrita = $_POST['hid'];
$scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>');
echo $scritaInsert;
exit; //just for the test
}
?>
<form method="POST">
<input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/>
<input type="hidden" name="hid" id="hid"/>
</form>
<div id="container">
<p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p>
<p style="text-align: center; color: black; font-size:16px; text-decoration: underline;">
The address
</p>
<p style="font-weight: bold; color: black;">
To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="font-weight: bold; color: black;">
Attention: <textarea name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="text-align: center;font-weight: bold;font-size: 19px;color: black;">
CONTRACT<br>
<n style="text-align: center;font-size: 16px;color: black;">
For transport
</n><br>
<nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea>
Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea>
</nz>
</p>
</div>
</body>
</html>
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think your problem could be the type of html slashes:
Try:
String.prototype.stripSlashes = function(){
return this.replace(/\\(.)/mg, "$1");
}
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content.stripSlashes());
});
I have changed my JavaScript to the following code and it's now working properly:
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
$("textarea").each(function() {
$(this).text($(this).val());
});
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think you should be using the method text() not html(), because html() will just copy all the text including the HTML tag, but text() will only copy the real text.
Check out this fiddle.

How to display the input value one frame to another frame onclick?

I tried to show the div tag to another frame set while checkbox click.
My index.html file is
<html>
<head>
<title></title>
</head>
<frameset cols="25%,75%">
<frame src="left-panel.html"></frame>
<frame src="right-panel.html"></frame>
</framset>
</html>
left-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</body>
</html>
right-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</body>
</html>
Then my js file is
$('.theClass').change(function(){
($('.theClass:checked').map(function(){ myfunction(this.value); }).get())
});
function myfunction(ad)
{
document.getElementById("footer").innerHTML = ad;
}
When click the checkbox I want to display these checkbox value into the footer div in another html
First define the names of the frames:
<frameset cols="25%,75%">
<frame name="left" src="left-panel.html"></frame>
<frame name="right" src="right-panel.html"></frame>
</framset>
And then in the javascript:
function myfunction(ad) {
top.left.document.getElementById("footer").innerHTML = ad;
}
You can access only to parent:
function myfunction(ad) {
parent.left.document.getElementById("footer").innerHTML = ad;
}
First, the sub-frames should have the same origin(same domain) in order to manipulate them.
Then, get the parent frame by parent.
Get the sub-frame by (according to http://javascript.info/tutorial/frames-and-iframes):
window.frames[0] - access by number
window.frames['iframeName'] - access by iframe name
So the answer is
$().ready(function(){
$("#cli").hover(function () {
parent.frames[1].$("#footer").css("visibility","visible");
},
function () {
parent.frames[1].$("#footer").css("visibility","hidden");
});
});
edit: sorry to find that the question is modified.
Each frame is a diferent web, with his own copys of the JS variables, for security reasons one page cant modify other page using JS. For example, when you call document variable from leftpanel, is diferent than the document variable called from rightpanel, and diferent tha the document variable called from index.html
Remember JS is executed in client side.
Maybe you must to use two divs:
your.css
#wrapper {
}
#left {
float: left;
width: 75%;
background-color: #CCF;
}
#right {
float: right;
width: 25%;
background-color: #FFA;
}
#cleared {
clear: both;
}
index.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="your.css">
<script src="min.js"></script>
<script src="file.js"></script>
</head>
<body>
<div id="wrapper">
<div id="left">
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</div>
<div id="right">
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</div>
<div id="cleared"></div>
</div>
</body>
</html>
If you wants to use frames, maybe you must use PHP with ajax to make the changes in the server side

how to toggle two image when I click one of them?

I have situation where in my page one text field and a small icon(edit.png) is there. Initially text field is in readonly mode & when I click this edit.png it remove the attribute readonly from text field. It works fine but now I want to do this: When click on edit.png it should remove the attribute readonly from text field as well as the icon itself change to save.png icon. This is my code. Please suggest where should I change to achieve this.
<html>
<head>
<script language="JavaScript">
function removeAlignment(x){
var read=document.getElementById(x).removeAttribute("readonly",0);
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
}
}
</script>
<style type="text/css">
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
.ic-table-edit { background-image: url("actions-edit.png"); }
</style>
</head>
<body>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="abcd#dsa.com" readonly="readonly"/>
</p>
<input type="submit" id="toogle" value="OK" />
</body>
Where should I change? Please answer according to my Page.
Here's the edit.
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$('.ic-table-edit').css('background-image', 'url("actions-save.png")');
}
Make sure you have included j query plugin in your code.
With in the anchor tag,include <img> tag.
In toggle function,just change src attribute of your image to new image.
Find the example code below
<html>
<head>
<script>
function removeAlignment(x){
var read=document.getElementById(x).removeAttribute("readonly",0);
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$("#image").attr("src","actions-save.png");
}
}
</script>
<style type="text/css">
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
</style>
</head>
<body>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="abcd#dsa.com" readonly="readonly"/>
<img src="actions-edit.png" id="image">
</p>
<input type="submit" id="toogle" value="OK" />
</body>
</html>

How to display user input in iframe

I have an input box for user to enter any url. Then I would like to display the website in a iframe after they click submit.
<html>
<head>
<title></title>
<style>
#netframe {
float:right;
height: 100%;
width: 80%;
}
#sidebar {
float:left;
height: 100%;
width: 20%;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
Enter A URL:
<input type="text" name="url" id="url">
<input type="button" value="load" id="load">
<br><br>
</div>
<div id="netframe">
<iframe height="100%" width="100%" class="netframe" src="pullsite.php" id="main_frame"></iframe>
</div>
</div>
</body>
</html>
This is the closest I found online but it does not do anything:
How To Reload A iframe Using jQuery
jsBin demo
HTML:
<input type="text" id="url" name="url" value="http://" />
<iframe height="90%" width="100%" src="" id="frame"></iframe>
jQuery
$('input#url').on('input', function() {
$('#frame').attr('src', this.value);
});
Try to add the following JS / jQuery script to your code:
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
So, your code will look like something like this:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
#netframe {
float:right;
height: 100%;
width: 80%;
}
#sidebar {
float:left;
height: 100%;
width: 20%;
}
</style>
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
</head>
<body>
<div id="container">
<div id="sidebar">
Enter A URL:
<input type="text" name="url" id="url">
<input type="button" value="load" id="load">
<br><br>
</div>
<div id="netframe">
<iframe height="100%" width="100%" class="netframe" src="pullsite.php" id="main_frame"></iframe>
</div>
</div>
</body>
</html>
PS: Don't forget to load the jQuery library. You can load it from the web for example, by adding the following in your header:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Hope this helps. Let me know if this works for you mate.

wrap() method doesn't seem to work in jQuery

$('input.text-1').wrap('<span class="textfield-1"></span>');
.textfield-1 {
border: 1px solid #d00;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="text text-1" />
Wrap() doesn't seem to work. I don't see <span>s wrapped around input in firebug. If they were wrapped, inputs would be hidden with display: none, but they aren't.
What am I doing wrong here?
Works ok for me. Is it possible that you have a javascript error on the page that is preventing the code from executing?
Here's my test. Element does become invisible and I can see that it is wrapped in the span.
<html>
<head>
<style type="text/css">
.textfield-1 {
border: 1px solid #d00;
display: none;
}
</style>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('input.text-1').wrap('<span class="textfield-1"></span>');
});
</script>
</head>
<body>
<input type="text" class="text text-1" />
</body>
</html>

Categories

Resources