On clicking of the Log in button, I get the alert message, however, on closing of the alert, the next focus is going back to the 1st textbox Username. I want the focus back on the button, so that I can tab to the next field.
<html>
<head>
<title> Test </title>
<script>
function handleClick(){
alert("welcome");
}
</script>
</head>
<body>
<form name="aye" onSubmit="handleClick();">
<label for="username">Username:</label>
<input type="text" id="username" tabindex="0">
<br>
<input type="submit" value="Log in" tabindex="0">
<br>
<label for="password">Password:</label>
<input type="password" id="password" tabindex="0">
<br>
</form>
</body>
</html>
If I understand you correctly, you can do a .focus() on an element using:
document.querySelector('yourselector').focus();
Like this:
<html>
<head>
<title> Test </title>
<script>
function handleClick(){
alert("welcome");
document.querySelector('input[type="submit"]').focus();
}
</script>
</head>
<body>
<form name="aye" onSubmit="handleClick();">
<label for="username">Username:</label>
<input type="text" id="username" tabindex="0">
<br>
<input type="submit" value="Log in" tabindex="0">
<br>
<label for="password">Password:</label>
<input type="password" id="password" tabindex="0">
<br>
</form>
</body>
</html>
Using code
$(document).ready(function () {
$('input[type=submit]').focus();
});
set focus on submit button.
Related
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" onclick=" doFunction()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<script>
function doFunction(){
var data = $('.container').serializeArray();//this will convert into array
console.log(typeof data)//print the type of data
console.log(data);//print the data
}
</script>
</body>
I want to select the class by id and see data in the console to check whether data is being processed correctly or not. I am getting length=0 when printing the data.
My output:
object
blabla.html:25 []
length: 0
__proto__: Array(0)
blabla.html:27
string
The serializeArray() method is intended to be called on form elements, not div. As such you should hook your logic to the submit event of a parent form, not the click of a button, and certainly not using an on* event attribute. Try this:
$('form').on('submit', function(e) {
e.preventDefault();
var data = $(this).serializeArray();
console.log(typeof data) //print the type of data
console.log(data); //print the data
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="/foo">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember">
Remember me
</label>
</div>
</form>
Try this code.
You need to use form to serilize the inputs.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<form id="loginform" name="test" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" onclick=" doFunction()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
<script>
function doFunction(){
var data = $('#loginform').serializeArray();//this will convert into array
console.log(typeof data)//print the type of data
console.log(data);//print the data
return false;
}
</script>
</body>
Myself I am beginner and at learning stage. I would like to pass input details from one page (test1.html) to next page textarea (test2.html). attaching both html files.
test1.html(first page)
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function () {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit'>Submit</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
test2.html(second page)
<html>
<body>
<form method="get" action="test1.html">
<fieldset class="fieldset-auto-width">
<legend><b><font color="#0000FF">Your Bookings Are..!</font color></b></legend>
<textarea cols="35" rows="19" id="Requirement1" ></textarea>
<script type="text/javascript">
var mySharedData = localStorage.getItem('mySharedData1');
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
</script>
</fieldset>
</form>
</body>
</html>
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
This should be:
function getValue() {
var value = localStorage.getItem('mySharedData1');
document.getElementById('Requirement1').innerHTML = value;
}
You have to give a name to the function in both html pages, and actually use the onclick attribute of your button Submit. I wrote on one page only
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function giveMeOneName() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onclick="giveMeOneName()">
Submit
</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
You need to create a function and invoke that function on click submit.
<form>
<label>
<b>Customer Name</b>
</label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function setValue() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onClick="setValue()">Submit</button>
<input type="checkbox" checked="checked"> Remember me
I started using atom as my editor for learning Javascript. I've followed a bunch of tutorials online and while my code looks exactly like it does in the tuts, for some reason I'm missing the Javascript behavior. Here is a simple example of my code that simply won't run out of atom, notepadd++ or notepad. In atom I use the atom-live-server, in notepadd i basiclaly open it on local host. ANyoe have any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name="login">
<input type="text" placeholder="Username" name="UserID"><br>
<input type="text" placeholder="Password" name="Pass"><br>
<input type ="button" onclick="check(this.form)" value="Login"/>
</form>
<script type="text/javascript">
function check(form){
if(form.userId.value=="" || form.pass.value==""){
alert("BLAHBLAHBLAH")
}
}
</script>
</body>
</html>
Another method :
Specify ID's as well to the inputs.
Pass the button to the function.
Get the parent of the button (the <form>).
Get the #UserID and #Pass values using querySelector and value.
<form name="login">
<input type="text" placeholder="Username" id="UserID" name="UserID"><br>
<input type="text" placeholder="Password" id="Pass" name="Pass"><br>
<input type ="button" onclick="check(this)" value="Login"/>
</form>
<script type="text/javascript">
function check(button){
var parent=button.parentNode;
if(parent.querySelector('#UserID').value=="" || parent.querySelector('#Pass').value==""){
alert("BLAHBLAHBLAH")
}
}
</script>
The problem is that you not considering character's case sensitivity. userId and UserId are considered different. Therefore form is not able to find the reference to the UserId element and therefore erroring out. Please check the console output of the browser's developer tools to see the error. Following is the fixed code.
<p>Document</p>
<form name="login">
<input name="UserID" type="text" placeholder="Username" /><br />
<input name="Pass" type="text" placeholder="Password" /><br />
<input type="button" value="Login" onclick="check(this.form)" /></form>
<p>
<script type="text/javascript">// <![CDATA[
function check(form){
console.log('FORM', form)
if(form.UserID.value=="" || form.Pass.value==""){
alert("BLAHBLAHBLAH")
}
}
// ]]></script>
</p>
<p>Document</p>
<form name="login">
<input name="UserID" type="text" placeholder="Username" /><br />
<input name="Pass" type="text" placeholder="Password" /><br />
<input type="button" value="Login" onclick="check(this.form)" /></form>
<p>
<script type="text/javascript">// <![CDATA[
function check(form){
if(form.UserID.value=="" || form.Pass.value==""){
alert("BLAHBLAHBLAH")
}
}
// ]]></script>
</p>
I have two div's, and inside this two div's i have <a href> that invoce javascript function.
My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.
HTML that have javascript to invoce:
<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
Join us!
</div>
<div id="invite">
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
<img src="/www/assets/newImages/header/Invite.png"></img>
</div>
HTML that have div's that is going to be invoced:
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
Here's my Javascript function:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
Can anyone help me solve this problem?
the simplest way to do that
add event to the body on click hide all pop-ups
$('body').click(function(){
$('your-pop-up').hide();
});
then add stopPropagation() to this pop-ups to prevent hide when click inside it.
$('your-pop-up').click(function(e){
e.stopPropagation();
});
Now if you press any where outside your pop-ups thy will hide
Try to Use Color Box Plugin from Link
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Pop Up</title>
<style>
#joinUs{cursor:pointer; color:#0066CC}
#invite{cursor:pointer; color:#0066CC}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
$("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});
});
</script>
</head>
<body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>
<div style='display:none'>
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
</div>
</body>
</html>
This is my html
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title</title>
<link rel="stylesheet" href="demo.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript">
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
</script>
</head>
<div class="demo">
Form A
Form B
<form id="formA">
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">Name:
<input type="text" name="name" id="name" value="" />Email:
<input type="text" name="email" id="email" value="" />Comments:
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>
basically has two forms which can be selected using tabs.I have the java script
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
in the header which does the swapping.but when I implement this html file,both the forms are displayed in the page.
But this is the demo #http://jsfiddle.net/25WDr here its working fine,but this html is not working.The js fiddle demo is done by a user here.but I cant implement it.It showing both form.The mistake is in the html i made..can anyone figure it out
Try to put your javascript code inside a document ready
$(function() {
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
});
Because in head part all your html is not built yet, So $('.tabHeader') is empty.
You should wait the end of load of your html part in order to manipulate it.
Another solution could be put your script before the </body>
in the demo they are actually hiding the other form while clicking the first
$(function() {
$('<a>FormB</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formB').show()
}).click();
$('<a>FormA</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formA').show()
}).click();
});