When the user click on the form I am trying to show and hide a form and also trying to scroll down to see the form, the code that I have works after the first click. If i click for the first time it "shows the form but doesn't scroll down" after the first click it work fine. can someone explain me what am i doing wrong.
$('#showForm').click(function()
{
$('.formL').toggle("slow");
$('.formL').get(0).scrollIntoView()
});
HTML:
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
The problem is that in that function you try to scroll to the form while it's still not visible. To fix this, call scrollIntoView() in the callback of toggle() function. See the example here: https://jsfiddle.net/ux0qt5nn/
The issue is that on your first click, the element isn't there yet. Put the scroll function into a callback and you'll be good to go.
$('#showForm').click(function(){
$('.formL').toggle("slow", function() {
$('.formL').get(0).scrollIntoView();
});
});
$('#showForm').click(function(){
$('.formL').toggle("slow", function() {
$('.formL').get(0).scrollIntoView()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="buttonForm" id="showForm"><span>Click here to see form</span></button>
<br><br><br><br><br><br><br><br><!--Extra lines to show scroll-->
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
As explained in other answers, you are trying to scroll an element into view before it's visible and before it's reached its actual height. You can use the following approach to scroll to the amount necessary to display the form and still let the user see the animation. See comments in the code.
$('#showForm').click(function() {
var formL = $('.formL').show(), // show the form wrapper in order to get its height
formLHeight = formL.height(),
formLForm = formL.find('form').hide(); // hide the form itself instead
formL.height(formLHeight);
formLForm.toggle("slow", function() {
// optionally, reset the height
formL.height('auto');
});
// this line is only needed so that the code snippet will not scroll the
// outer browser window, but only the iframe content. If you're not in an iframe,
// you can just use the original scrollIntoView() approach instead
document.documentElement.scrollTop = formL[0].offsetTop;
// formL.get(0).scrollIntoView();
});
#spacer {
background: red;
color: #fff;
height: 80vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showForm">show form</button>
<div id="spacer">some long content</div>
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
Related
I have a strange behaviour here with focus method.
I Just want to understand why it is happening like this.
Case 1:
With the below code when I come out of last element i.e driveD hyperlink ,focus is not getting set to first text box even though I applied .focus() to first text box.
function lastFocusOut() {
alert('focus out ,setting focus to first text box');
document.getElementById('nameId').focus();
}
input,a,button{
display:block;
margin:10px;
}
<form>
<input id="nameId" type="text" name="name"> drive
<input id="nameId1" type="text" name="name">
<input type="submit" value="test" />
<input type="text" name="name"> driveE </form> driveD </body>
Case 2:
When I add a buttton after the last hyperlink It sets the focus back to first text box.
function lastFocusOut() {
alert('focus out ,setting focus to first text box');
document.getElementById('nameId').focus();
}
input,a,button{
display:block;
margin:10px;
}
<form>
<input id="nameId" type="text" name="name"> drive
<input id="nameId1" type="text" name="name">
<input type="submit" value="test" />
<input type="text" name="name"> driveE </form>
driveD </body>
<button type ="submit" >Submit</button>
I want to understand two things here.
1)Why the focus is not getting set to first text box in case 1.
2)What really makes the difference just by adding the button at the end ,which is making the code work as expected.
when I remove javascript my reset button works fine but when I load JavaScript its stops working.I have also tried making rest button using jQuery function. I have also tried using input type="reset" value="Reset"
but it is also not working. I have tried every thing that I know now I do not know what to do.
Please help
$(document).ready(function c () {
$("#f").click(function(event){
$("body").toggleClass("hi");
event.preventDefault();
});
});
$(document).ready(function c1() {
$("body").click(function(event){
$("p").toggleClass("hii");
event.preventDefault();
});
});
//reset funtion using jquery
/*$(document).ready(function re(){
$("form").click(function(event){
$("#r").reset(); //reset funtion using jquery
});
})*/
body{
font-size: x-large;
}
h2{
color: blue;
}
body.hi{
background:#242424;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="right"><input type="submit" id="f" name="night mode" value="night mode" onclick="c()" onclick="c1()"></div>
<h2>contact form</h2>
<form action="mailto:vwadhwa3#gmail.com" method="post" enctype="text/plain">
<label for="company">company's name<br>
<input type="text" id="company" name="company" autocomplete="companyname" placeholder="name" >
</label><br>
<label for="contact_person">contact person<br>
<input type="text" id="contact_person" name="contact person" autocomplete="contact person" placeholder="name">
</label><br>
<label for="email">email <br>
<input type="email" id="email" autocomplete="email" name="email" placeholder="xyz#abc.com"> <br>
<label >Subject</label>
<br>
<textarea name="subject" placeholder="Write something.."></textarea><br>
<button type="submit" value="Submit">Submit</button> reset button
I have also tried using input type="reset" value="Reset"
but it is also not working
<button type="reset" onclick="re()" id="r">Reset</button>
</form>
Your problem is that you are writing your $(document).ready() wrong. You do not declare a callable function as a parameter name to ready(). It should look like this:
$(document).ready(function() {
function myFunc(event) {
console.log("Function MyFunc() called");
}
});
Next you should only have one $(document).ready(). JavaScript does support multiple ready() declarations, but this just clutters up your code.
$( document ).ready()
I'm trying to learn Dojotoolkit and I wanted to make a form pop up on the button click. And from other examples my code looks right to me but there's something I'm missing but I have no idea what.
Any advice and help is appreciated!
<button id="slog">Login</button> or <button id="rlog">Register</button>?
<div id="anim8target" style="opacity: 0">
<form action="login.jsp" method="POST">
<fieldset><legend>Login</legend>
Username: <input type="text" name="username"><br><br>
Password: <input type="passwor" name="password"><br><br>
<input type="input" value="Login">
</fieldset>
</form>
</div>
<div id="anim8target" style="opacity: 0">
<form action="register.jsp" method="POST">
<fieldset><legend>Register</legend>
Username: <input type="text" name="username"><br><br>
Display name: <input type="text" name="dname"><br><br>
Email: <input type="text" name="email"><br><br>
Password: <input type="passwor" name="password"><br><br>
<input type="input" value="Register">
</fieldset>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-
dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
<script>
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function
(baseFx, on, dom) {
var loginButton = dom.byId("slog"),
registerBUtton = dom.byId("sreg"),
anim8target = dom.byId("anim8target");
on(loginButton, "click", function(evt){
baseFx.animateProperty({
node: anim8target,
properties: {
opacity: 1 }
}).play();
});
});
</script>
The visibility CSS property can't be animated. It's either hidden or visible.
If you're trying to do a fade in, there is a convenience function for that. In this case, you would want to initialize your styles with opacity: 0 rather than visibility: hidden.
I'm beginner with Javascript. I've tried to hide a form with no luck.
Where is the error ?
http://jsfiddle.net/6EWCe/5/
<div id="form1">
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</div>
<div id="form2">
<form>
First name:2 <input type="text" name="firstname"><br>
Last name:2 <input type="text" name="lastname">
</form>
</div>
Close
function hideform() {
document.getElementById('form2').style.display = 'none';
}
Uncaught ReferenceError: hideform is not defined
...is your error.
You need to specify that you want your JavaScript to load in the body of your JSFiddle demo using the options in the sidebar:
Fixed JSFiddle demo.
I've been at this for two days and can't seem to get it. Basically, I'm using the JQuery Cookbook modal from scratch. My problem is the form html page loads fine but the code will not recognize my submit button. Here's the relevant parts of the code:
Separate HTML:
<div id="contact">
<form action="" id="register_form" method="post">
<p>First Name <br />
<input type="text" id="firstname" name="firstname" /></p>
<p>Last Name <br />
<input type="text" id="lastname" name="lastname" /></p>
<p>Username: <span class="micro">Must be a valid email address</span></span><br />
<input type="text" id="username" name="username" /></p>
<p><input type="submit" value="Register" id="register" /></p>
</form>
</div>
Here's the relevant parts of the modal code:
// Insert modal at end of </body>.
$('body').append('<div id="modal_wrapper"><!--[if IE 6]><iframe id="modal_iframe" frameborder="0"></iframe><![endif]--><div id="modal_overlay"></div><div id="modal_window"><div id="modal_bar"><strong>Modal window</strong>Close</div><div id="modal_content"><div id="contact"><form><p><input id="firstname" /></p><p><input id="register" /></p></form></div></div></div>');
$('#modal_content').load('mediaKitF.html#contact'.replace('#', ' #'), '', showModal);
$("input[type=text]").focus(function(){
// Select field contents
this.select();
});
$('input #firstname').focus();
$('#register').click(function () {
alert("hello there");
});
$('#modal_content').load() is an asynchronous method, which means that you are trying to attach your click event to the $('#register') element before receiving the new content. You need to either use $('#register').live('click', function() {}) or move the code attaching the click handler into your showModal function.