unable to redirect from modal popup - javascript

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>

Related

how can i show only iframe when click on the URL

Following is my code, I want to make a search list that will show results of you tube and then when i click on the URL, the video start on the same page along with the searching results, but i only want the iframe.
<head>
<title>Youtube playlist search</title>
<link rel="stylesheet" type="text/css" href="new 2.css" media="screen">
</head>
<body>
<script src="http://www.yvoschaap.com/ytpage/ytembed.js"></script>
<form id="tfnewsearch" method="get" onsubmit="ytEmbed.init({'block':'youtubeDivSearch','type':'search','q':document.getElementById('ytSearchField').value,'results': 20,'meta','_self':false}); return false;">
<span>YouT </span>
<input type="text" id="ytSearchField" placeholder="Search your Video Here" name="q" size="21" maxlength="120">
<input type="submit" value=" Search">
</form>
<div id="youtubeDivSearch"></div>

jquery events are not persistent

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");
});

How can i take out value from jquery mobile on and off slider in PHP

I found a code from w3schools for jquery mobile on and off slider input. But i don't know how to take out the value from the input and show it by PHP. Here is the HTML which was on w3schools:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="switch">Flip Toggle Switch:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
<br>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
Please tell me how to take the value from this input in PHP. Thanks in advance
if(isset($_POST['switch']))
{
echo "On. The user On the switch.";
}
else
{
echo "Off. The user kept the switch Off.";
}

Login form in Iframe not loading

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();

problem with my drop down login box?

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.

Categories