I have a login form inside an iframe. Here is the code for the main page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script language="javascript">
function SubmitForm() {
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
}
</script>
<title>Login to Vote</title>
</head>
<body>
<iframe id="loginframe" src="sasloginhandler.html"></iframe>
<input onclick="SubmitForm()" value="Submit form" type="button">
</body>
</html>
And here is the code for the "sasloginhandler.html" page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>Login to Vote</title>
</head>
<body>
<form action="https://moodle.standrews-de.org/login/index.php" method="post"
id="login">
<div class="loginform">
<div class="form-input"> <input name="username" placeholder="Username"
id="username"
size="15"
type="text">
</div>
<div class="form-input"> <input name="password" placeholder="Password"
id="password"
size="15"
value=""
type="password">
<input id="loginbtn" value="Login" type="submit"> </div>
</div>
<div class="forgetpass"><a href="forgot_password.php">Forgotten your
username or password?</a></div>
</form>
</body>
</html>
The problem is, neither the submit button inside the iframe nor the javascript submit button outside the iframe does anything. I have tested the iframe code on its own and it works fine, so it seems to be some part of the iframe that is causing the issue. However, I don't know why this would be.
Thank you!
The id of the form in the iframe is login but you try to get it with loginform
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
Related
I am trying to do the if condition when requesting for reseting the form. When the condition is confirmed the form will be reset, if not it won't be reset.
<!DOCTYPE html>
<html>
<head>
<title>form events</title>
<meta charset="windows-1250">
</head>
<body>
<form onreset="FormReset()" name="form1">
<input type="text" name="T1" size="20" /><br />
<input type="reset" name="res1=" value="reset" /><br />
</form>
<script language="javascript">
function FormReset(){
if(confirm("Do you wish to reset your data?")){
return true;
}
else return false;
}
</script>
</body>
</html>
The below code should work:
<!DOCTYPE html>
<html>
<head>
<title>form events</title>
<meta charset="windows-1250" />
</head>
<body>
<form name="form1" id="myForm">
<input type="text" name="T1" size="20" /><br />
<input
type="button"
onclick="FormReset()"
name="res1="
value="reset"
/><br />
</form>
<script language="javascript">
function FormReset() {
if (confirm("Do you wish to reset your data?")) {
document.getElementById("myForm").reset();
}
}
</script>
</body>
</html>
Checkout Sample
In the following code, I see my jquery replacing the click me away text to testing, but it quickly reverts it to the original text. could someone kindly tell what the issue is? Any help is appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but").click(function(){
$("p").text("testing");
});
});
</script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button id="but" type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<p>Click me away!</p>
</body>
</html>
What you mean it's revert
if you refresh your page, this text revert to your original text.If you want to not submit your page you can set return false
please check my fiddle code (http://jsfiddle.net/tommoholmes/cea6dz35/)
What you can do is:
$(document).ready(function(){
$("#but").on('click', function(e){
$("p").text("testing");
e.preventDefault();
});
});
Better use event.preventDefault() instead of return false. And for last jquery version use on instead of click function.
Link about return false vs. event.preventDefault()
http://blog.nmsdvid.com/when-to-use-return-false-and-when-preventdefault/
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
try
.on('click', function(){
$("p").text("testing");
});
Below is my code for a modal window/page. When I click the submit button, however, I want to navigate to the index.html page. I am however, not able to do that although I have made a form and set the action attribute to the page. I also tried navigating to some other links but it does not work.
I am using jquery.leanModal.min.js which I found online after some searching.
How can I navigate upon clicking the submit button?
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Moi modal page</title>
<link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/jquery.leanModal.min.js"></script>
</head>
<body>
<div id="topbar"></div>
<div id="w">
<div id="content">
<center>Login to website</center>
</div>
</div>!
<div id="loginmodal" style="display:none;">
<h1>User Login</h1>
<form id="loginform" name="loginform" method="post" action="index.html">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>
<script type="text/javascript">
$(function(){
$('#loginform').submit(function(e){
return false;
});
$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</body>
</html>
i have a problem with parsley.js. every time i hit the submit button it doesnt do anything.
does anyone know a solution for this?
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Registrierung</title>
<link href="bootstrap-combined.min.css" rel="stylesheet"/>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap-3.0.3.min.js"></script>
<script src="js/parsley.min.js"></script>
<script src="js/parsley.messages.de.js"></script>
</head>
<body class="body">
<?php
$fpw="";
?>
<div class="container">
<div class="offset4">
<div>
<h1>Registrierung</h1>
<?php if($fpw == true) echo '<div class="error" Passwörter stimmen nicht überein!<br></div>'; ?>
<form method="post" action="aregistrierung.php" data-validate="parsley">
<label for="passwort1" class="labbel">Passwort</label>
<input id="passwort1" name="passwort1" type="password" data-type="password" data-required="true" placeholder="Passwort" />
<label for="passwort2" class="labbel">Passwort bestätigen</label>
<input id="passwort2" name="passwort2" type="password" data-type="password" data-required="true" placeholder="Passwort" data-equalto="#passwort1" data-equalto-message="Passwort stimmt nicht überein"/>
<br><br>
<input name="registrieren" type="submit" value="Registrieren" class="btn btn-large btn-success"/>
</form>
</div>
</div>
</div>
</body>
</html>
i edited the whole file into it; i have tested it with a fake link like "sadfgkfe.php" too, it doesnt gave me the "not found" error.
As #Doodlebot said, use parsley-validate on the form.
Remove data-type="password" - parsley has no password validation.
Change the data- prefix to parsley-.
Here is a sample fiddle.
Try replacing the form attribute data-validate="parsley" with parsley-validate and replace data-required="true" with required.
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.