Currently I have the following code.
<form method="get" id="searchform" action="/scraper/l.php?">
<div>
<input type="text" placeholder="Some Name Here" value="" name="n" id="n" style="padding: 7px; border: 1px solid #ddd;width: 75%;">
<input type="submit" id="searchsubmit" value="Index" class="btn" style="padding: 6px; color: #fff; background-color: #ed207b; border: 2px solid #ed207b;">
</div>
</form>
I am trying to make it so that it opens the path example.com/scraper/l.php?n=(Our ID) in an iFrame window on the same page appose to creating a new window.
based on your requirement, you can check whether the $_GET['n'] param is set when the page is loaded.(because you are submitting to the same page itself) if it is loaded, you can display the iframe. since you are using php, i will give you the exact code as follows.
<html>
<head>
</head>
<body>
<form method="get" id="searchform" action="/scraper/l.php?">
<div>
<input type="text" placeholder="Some Name Here" value="" name="n" id="n" style="padding: 7px; border: 1px solid #ddd;width: 75%;">
<input type="submit" id="searchsubmit" value="Index" class="btn" style="padding: 6px; color: #fff; background-color: #ed207b; border: 2px solid #ed207b;">
</div>
</form>
<?php
if(isset($_GET['n']) && !empty($_GET['n'])){
?>
<iframe src="http://www.google.com"></iframe>
<?php
}
?>
</body>
</html>
Related
I am using this login page:http://csshtmljs.com/bootstrap-snippets.php?code-snippets=904&q=Bootstrap+snippet+DeyNote+like+login.
I wrote javascript functions for the login and the register buttons that should redirect to the appropriate page, but it doesn't work.
Here is login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com #bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<!--
The codes are free, but we require linking to our web site.
Why to Link?
A true story: one girl didn't set a link and had no decent date for two years, and another guy set a link and got a top ranking in Google!
Where to Put the Link?
home, about, credits... or in a good page that you want
THANK YOU MY FRIEND!
-->
<title>DeyNote like login - Bootdey.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
margin-top:20px;
color:#fff;
}
.login-page {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #3ca2e0;
text-align: center;
color: #fff;
padding: 3em;
}
.user-avatar {
width: 125px;
height: 125px;
}
.login-page h1 {
font-weight: 300;
}
.login-page .form-content {
padding: 40px 0;
}
.login-page .form-content .input-underline {
background: 0 0;
border: none;
box-shadow: none;
border-bottom: 2px solid rgba(255,255,255,.4);
color: #FFF;
border-radius: 0;
}
.login-page .form-content .input-underline:focus {
border-bottom: 2px solid #fff;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 0;
}
.btn-info{
border-radius: 50px;
box-shadow: 0 0 0 2px rgba(255,255,255,.8)inset;
color: rgba(255,255,255,.8);
background: 0 0;
border-color: transparent;
font-weight: 400;
}
input[type='text']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder {
color: #fff;
}
input[type='text']:-moz-placeholder, input[type='password']:-moz-placeholder {
color: #fff;
}
input[type='text']::-moz-placeholder, input[type='password']::-moz-placeholder {
color: #fff;
}
input[type='text']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder {
color: #fff;
}
</style>
</head>
<body>
<div class="container bootstrap snippet">
<div class="row login-page">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<img src="http://ani-theme.strapui.com/images/flat-avatar.png" class="user-avatar">
<h1>Bootdey.com</h1>
<form role="form" class="ng-pristine ng-valid">
<div class="form-content">
<div class="form-group">
<input type="text" class="form-control input-underline input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-underline input-lg" placeholder="Password">
</div>
</div>
<button class="btn btn-info btn-lg" onclick="login()">
Log in
</button>
<button type="submit" class="btn btn-info btn-lg">Register</button>
</form>
</div>
</div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="login.js">
</script>
</body>
</html>
login.js:
function login(){
window.location="createGame.html";
}
There is no error but the page is not replaced.
I will appreciate your help.
Thanks
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
It's because your button submits the form, which overrules the location change.
<button> tags have type="submit" by default so you can fix this by setting type="button" on your login button so that it's no longer a submit button:
<button type="button" class="btn btn-info btn-lg" onclick="login()">
I'm assuming you intend to have the form be submitted by the "register" button (since you explicitly set type="submit" on it) so I don't think the suggestions of removing the form or set its action to your login page are appropriate solutions in your case.
You are using form. So you need to give "action".
It is working fine. Check the codepen I recreated and works fine.
codepen demo
<form role="form" action="login()" class="ng-pristine ng-valid">
Your login button is implicitly submitting the form, as you can see in the below simplified example. For demonstration purposes, I have added an "action" to the form, which causes the 'submit' to go to an example site. Note that this is NOT the redirect you're attempting; I've changed that function here to contain only a console.log; it fires, but then the form submit takes over. If the form action is omitted as in your original code, the page "redirects" to an empty document.
function login() {
// window.location="http://example.com"
console.log("redirect here");
}
<div class="container bootstrap snippet">
<div class="row login-page">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<form action="http://foo.com" role="form" class="ng-pristine ng-valid">
<div class="form-content">
<div class="form-group">
<input type="text" class="form-control input-underline input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-underline input-lg" placeholder="Password">
</div>
</div>
<button class="btn btn-info btn-lg" onclick="login()">
Log in
</button>
<button type="" class="btn btn-info btn-lg">Register</button>
</form>
</div>
</div>
</div>
Removing the <form> tag is one way to avoid this issue (if you are handling all the form actions through javascript, the <form> is unnecessary.) Here the 'login()' function will perform the redirect:
function login() {
console.log("redirect here. ");
window.location="http://example.com";
}
<div class="container bootstrap snippet">
<div class="row login-page">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div class="form-content">
<div class="form-group">
<input type="text" class="form-control input-underline input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-underline input-lg" placeholder="Password">
</div>
</div>
<button class="btn btn-info btn-lg" onclick="login()">
Log in
</button>
<button type="" class="btn btn-info btn-lg">Register</button>
</form>
</div>
</div>
</div>
Alternatively, you could pass the submit event on to the login function and use event.preventDefault to prevent the form from submitting; set the form action to the submit function; or use type="button" to override the button's default type="submit" (hat tip to #MikaelLennholm for that last one).
As has been exhaustively demonstrated in other answers, it doesn't matter at all whether you set window.location, window.location.href, window.location.replace() or .assign(); any of them will work.
try using:
function login(){
window.location.href="createGame.html";
}
Struggling with a problem that seems like it must have an incredibly simple solution, but I can't figure out what I am doing wrong.
Scenario:
I have three div's of class .subblock. One has an input(text) inside, the other two have a select.
Goal:
When clicked on .subblock (div), focus on the input or select in it.
Code (that doesn't work for the selects):
HTML
<div id="homeinputs">
<form action="/listings/" method="GET">
<div class="subblock" style="border-radius: 4px 0px 0px 4px;">
<span>Where</span>
<input id="autocomplete" name="location" type="text" placeholder="Location">
</div>
<div class="subblock" style="margin-left: -4px; margin-right: -4px;">
<span>M<sup>2</sup></span>
<select name="squarems">
<option>All</option>
<option>+10m<sup>2</sup></option>
<option>+15m<sup>2</sup></option>
<option>+20m<sup>2</sup></option>
<option>+25m<sup>2</sup></option>
<option>+30m<sup>2</sup></option>
</select>
</div>
<div class="subblock" style="border-radius: 0px 4px 4px 0px; box-shadow: 0px 1px 2px lightgrey;">
<span>Price (€)</span>
<select name="pricings">
<option>All</option>
<option>450max.</option>
<option>500max.</option>
<option>550max.</option>
<option>600max.</option>
</select>
</div>
</div>
JS
$(document).ready( function() {
$('.subblock').click( function() {
$(this).find('input').focus();
});
$('.subblock').click( function() {
$(this).find('select').focus();
});
});
Please try this and tell me if it is what you want:
(When your select has focus, just press Space on your keyboard to open it or use your arrow keys to navigate in the available options...)
$(document).ready(function() {
$('.subblock').click(function() {
$(this).children().eq(1).focus();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus</title>
</head>
<body>
<div id="homeinputs">
<form action="/listings/" method="GET">
<div class="subblock" style="border-radius: 4px 0px 0px 4px;">
<span>Where</span>
<input id="autocomplete" name="location" type="text" placeholder="Location">
</div>
<div class="subblock" style="margin-left: -4px; margin-right: -4px;">
<span>M<sup>2</sup></span>
<select name="squarems">
<option>All</option>
<option>+10m<sup>2</sup></option>
<option>+15m<sup>2</sup></option>
<option>+20m<sup>2</sup></option>
<option>+25m<sup>2</sup></option>
<option>+30m<sup>2</sup></option>
</select>
</div>
<div class="subblock" style="border-radius: 0px 4px 4px 0px; box-shadow: 0px 1px 2px lightgrey;">
<span>Price (€)</span>
<select name="pricings">
<option>All</option>
<option>450max.</option>
<option>500max.</option>
<option>550max.</option>
<option>600max.</option>
</select>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
This question already has answers here:
How to remove "disabled" attribute using jQuery?
(11 answers)
Closed 2 years ago.
I have tried following code given in JSFIDDLE...
But it is not working...
I want to Enable submit button only after filling all input fields....
JSFIDDLE
code tried :
<script>
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
</script>
What you're looking for is:
$('#register').prop('disabled', true); //makes it disabled
$('#register').prop('disabled', false); //makes it enabled
First of all, listen input event instead of keyup, The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed(including paste using right-click etc.)
You are updating empty value for every element. If last element is having valid value, variable will be false. use the same variable as flag in .each loop and prevent loop for next occurrences if value is false
(function() {
$('form input').on('input', function() {
var empty = false;
$('form input').each(function() {
if (!empty && $(this).val() == '') {
empty = true;
}
});
$('#register').prop('disabled', empty);
});
})()
.link-button-blue {
font: bold 14px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #002633;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: pointer;
}
.link-button-blue:disabled {
font: bold 14px Arial;
text-decoration: none;
background-color: #333;
color: #ccc;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: no-drop;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div class="form-field-input">
<input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
</div>
<div class="form-field-label">Full Name :</div>
<div class="form-field-input">
<input type="text" value="" name="fname" id="fname" required>
</div>
<div class="form-field-label">Address :</div>
<div class="form-field-input">
<textarea value="" name="address" id="address" rows="4" pattern=".{15,}" required title="15 characters minimum" required></textarea>
</div>
<br>
<div class="form-field-label">Email :</div>
<div class="form-field-input">
<input type="text" value="" name="email" id="email" required>
</div>
<br>
<div class="form-field-label">Mobile :</div>
<div class="form-field-input">
<input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
</div>
<br>
<div class="form-field-label">Phone :</div>
<div class="form-field-input">
<input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
</div>
<div class="form-field-label">Fax :</div>
<div class="form-field-input">
<input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
</div>
<div class="form-field-label">Birthdate :</div>
<div class="form-field-input">
<input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
</div>
<br>
<div class="form-field-label">Age :</div>
<div class="form-field-input">
<input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
</div>
<br>
<div class="form-field-label">Select Questionnaire Catagary :</div>
<div class="form-field-input">
<label class="checkbox">
<input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" />General</label>
<br>
<label class="checkbox">
<input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" />Stressfull Life Like - IT/BPO/Management</label>
<br>
<label class="checkbox">
<input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" />Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer</label>
<br>
<label class="checkbox">
<input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" />Heredity of Diabetes/Presently Suffering from Diabetes</label>
<br>
<label class="checkbox">
<input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" />Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack</label>
<br>
</div>
<br>
<div class="form-field-label">Gender :</div>
<div class="form-field-input">
<select name="gender" id="gender" required>
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<br>
<div class="form-field-label"></div>
</form>
Fiddle demo
$(document).ready(function() {
$('.input-field').change(function() {
var empty = false;
$('.input-field').each(function() {
$('#btn').addClass('disabled');
if($(this).val() == ''){
empty = false;
return false; //u need to break out from each
}
empty = true; //then u need to set value when it's out from each
});
if(empty == true) {
$('#btn').removeClass('disabled');
}
});
});
u need to break out from each,then u need to set value when it's out from each
I have a forgot password link. On clicking the link i want to display a div. Here is my demo code. There is something which i am missing.
JSP Code:
<form action="login" method="post">
<label>Username :</label>
<input type="text" value="" name="email">
<label>Password :</label>
<input type="password" value="" name="password">
<input class="submit" type="submit" value="Login" name="Login">
<div id="link" class= "link">Forgot Password?</div>
</form>
<div id="forget-details" class = "forget-details">
<h1>Forgot Your Password</h1>
<p>Enter your registered email address and we will send you a link to reset your password.</p>
<input type="text" value="" name="email" placeholder = "Enter your registered email"/>
CSS:
form div.link{
color: #44869b;
cursor: pointer;
font-family: DIN,Helvetica,Arial,sans-serif;
font-size: 12px;
margin-top: 105px;
text-transform: inherit;
}
.forget-details {
background-color: #333;
float: right;
margin: 7px 0;
padding: 11px;
width: 97%;
display:none;
}
Jquery:
$(document).ready(function(){
$(".link").click(function(){
$(".forget_details").show();
});
});
You have class="forget-details" (hypen) but then select $(".forget_details") (underscore)
Either Change your class name to forget_details or make this change
$(".forget-details").show();
I think that Im missing some pieces for this. Im somewhat new to JavaScript and JQuery, and someone tried to help before, but their solution doesnt work either.
I need a sort-of drop down navigation effect similar as to what is on this site:
professional-painters.com then click "Quick Contact"
For some reason the Contact isnt toggling.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DaVincisApp1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<%--<script type="text/javascript" src="Scripts/motion.js"></script>--%>
<script type="text/javascript">
$(document).ready(function(){ /* make sure the contact form is hidden when the page loads: */ $('div#contact-form').hide(); $('a#contact-button').toggle(function(){ /* slides the contact form down and shows it */ $('div#contact-form').slideDown(); }, function () { /* hides it again */ $('div#contact-form').slideUp(); } }
);</script>
</head>
<body>
<div id="nav">
<div id="navigation-primary">
<ul>
<li>Menu 1</li>
<li>item 2</li>
<li>Menuitem 3</li>
<li><a id="contact-button" href="#">Contact</a></li>
</ul>
<div id="contact-form">
<form action="#" method="post">
<div class='hiddenFields'>
<input type="hidden" name="ACT" value="20" />
<input type="hidden" name="URI" value="index" />
<input type="hidden" name="XID" value="1c46d517779f90c9f5a13bac8338968a3c2b9d16" />
<input type="hidden" name="status" value="open" />
<input type="hidden" name="return" value="consultation/thank_you" />
<input type="hidden" name="redirect_on_duplicate" value="" />
<input type="hidden" name="RET" value="http://professional-painters.com/" />
<input type="hidden" name="form_name" value="Quick" />
<input type="hidden" name="id" value="freeform" />
<input type="hidden" name="params_id" value="136390" />
<input type="hidden" name="site_id" value="1" />
</div>
<fieldset style="padding: 7px;">
<table id="quickcontact-in">
<tr>
<td>
<input tabindex="1" class="field" type="text" name="name" value="Name" onfocus="if (this.value == 'Name') this.value = '';"
onblur="if (this.value == '') this.value = 'Name';" />
</td>
</tr>
<tr>
<td>
<input tabindex="2" class="field" type="text" name="email" value="Email address"
onfocus="if (this.value == 'Email address') this.value = '';" onblur="if (this.value == '') this.value = 'Email address';" />
</td>
</tr>
<tr>
<td>
<input tabindex="3" class="field" type="text" name="phone1" value="Phone (optional)"
onfocus="if (this.value == 'Phone (optional)') this.value = '';" onblur="if (this.value == '') this.value = 'Phone';" />
</td>
</tr>
<tr>
<td>
<textarea tabindex="4" class="txtField" cols="4" rows="4" name="comments">Questions or Comments</textarea>
</td>
</tr>
<tr>
<td>
<div id="submit">
<input tabindex="6" type="submit" name="submit" value="Send Request" />
</div>
<p class="tiny" align="right">
Close</p>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
#navigation-primary {
/*background: url("/img/nav_back.gif") repeat-x scroll 0 0 #61533F;*/
background-color: Red;
left: 0;
position: absolute;
top: 46px;
z-index: 1;
}
#nav {
height: 34px;
width: 878px;
}
#contact-button a {
/*background: url("/img/nav_contact.gif") no-repeat scroll 0 0 transparent;*/
background-color: Green;
width: 109px;
}
#quickcontact {
background: none repeat scroll 0 0 #666449;
border-left: 2px solid #3D352B;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0;
text-align: left;
top: 75px;
width: 245px;
z-index: 1000;
}
#quickcontact-in a {
color: #FFFFFF;
}
#quickcontact fieldset {
border: medium none;
}
#quickcontact-in .field {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
padding: 2px;
width: 190px;
}
#quickcontact-in .txtField {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
display: block;
float: left;
font: 1em "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
height: 90px;
margin: 5px 0 7px;
outline: medium none;
padding: 2px;
width: 190px;
}
A quick mashup example here. I think you can use slideToggle(). Look here for more examples.
Try adding this to the footer:
$('#contact-button a').click(function(){
$('#contact-form').slideToggle("fast");
});