I have used a simplest CSS to show a litebox view. The code I used is, I have removed the unnecessary CSS properties from here:
<style>
.black_overlay{
display: block;
}
.white_content {
display: block;
}
</style>
Html for the form
<div id="light" class="white_content">
<input id="name" name="name" type="text" />
<input id="password" name="password" type="password" />
<input type="submit" name="submit" value="Sign In" onclick="check(this.form)"/>
</div>
<div id="fade" class="black_overlay"></div>
And a JavaScript function, to check if the fields are correct
function check(form)/*function to check userid & password*/
{
var name= $( "#name" );
var pass=$("#password");
if(name== "admin" && pass == "admin")
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
else
{
alert("Error Password or Username");/*displays error message*/
}
}
The functionality I want is, when the user inputs correct name and pass, that is "admin" the lite box effect fade away... But it is not, the lite box is still there. How can i close it. I also want that this litebox effect should be shown as the page loads.
Is the problem that the submit event is not captured and prevented? In The markup there is no form. If you add it like
<form id="submit-me"> your form inputs </div>
you can observe it via JS
$("#submit-me").submit(function(event) {
// your js code
event.preventDefault();
});
For your actual example you could try to add a "return false;" in the onclick handler? But I do not know whether this works...
Best regards
Replace
var name= $( "#name" );
var pass=$("#password");
with
var name= $( "#name" ).val();
var pass=$("#password").val();
Related
I would like to create a form with multiple submit link buttons. I know it can be done by using and specifying the name of <button> or <input type="button"> something like this:
In HTML:
<form action="" method="get">
Other form elements here...
<button type="submit" name="activated">Activated</button>
<button type="submit" name="pending">Pending</button>
<button type="submit" name="suspended">Suspended</button>
</form>
In PHP:
<?php
if(isset($_GET["activated"])) {
Activated codes here...
}
elseif(isset($_GET["pending"])) {
Pending codes here...
}
elseif(isset($_GET["suspended"])) {
Suspended codes here...
}
?>
I want the submit buttons to be done by using link, not <button> or <input type="submit"> something like this:
Activated
Pending
Suspended
I heard that it can be done by using JavaScript or JQuery but I don't know how, anyone knows?
Update: What I want to happen is when I clicked the "Activated" link for example, I want only to process the logic under isset($_GET["activated"]).
The reason behind:
The reason why I want to have a submit link buttons instead of normal submit button tags is that, I want to use this bootstrap dropdown button style to change the status of user(s) on table:
and it is based on links, so that's why.
PS: Sorry for bad English, not my native language.
You could use data attributes on your anchors, then load that attribute into a hidden field to check in your PHP code.
<form action="" method="post">
Activated
Pending
Suspended
<input type="hidden" id="actionName" name="actionName" value="" />
</form>
$('.anchor-btn').click(function(e) {
e.preventDefault();
$('#actionName').val($(this).data('name'));
$('form').submit();
});
<?php
if($_POST['actionName'] == "activated") {
Activated code goes here
}
...etc.
?>
Yes you can submit the form using jquery just add a class to your buttons and add a click handler
$(document).ready(function() {
$( ".buttons_class" ).click(function() {
$( "#target_form" ).submit();
});
});
so your buttons will look like this
<button type="button" name="activated" class="buttons_class">Activated</button>
<button type="button" name="pending" class="buttons_class">Pending</button>
<button type="button" name="suspended" class="buttons_class">Suspended</button>
if using anchors
Activated
Pending
Suspended
And in javascript
$(document).ready(function() {
$( ".buttons_class" ).click(function(e) {
e.preventDefault(); //This will stop the default anchor action
$("#target_form").attr("action", "yourphpfile.php?"+$(this).text()+"=true"); //This will send the text inside the anchor as a GET param.
$( "#target_form" ).submit();
});
});
However if I were you I would consider using POST instead of GET for this. and do something like this
$( ".buttons_class" ).click(function(e) {
e.preventDefault(); //This will stop the default anchor action
var paramName = $(this).text(); //get text inside anchor
$( "#target_form" ).submit(function(eventObj) {
$('<input />').attr('type', 'hidden')
.attr('name', paramName);
.attr('value', "something")
.appendTo('#form');
return true;
}); //Add hidden field
});
Change your isset to $_POST instead of $_GET, it will then use the name attributes.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_POST['test1'])) {
###
} else if ($_POST['test2']) {
###
}
}
<form method="post">
<input name="test1" type="submit" value="TEST 1" />
<input name="test2" type="submit" value="TEST 2" />
</form>
Here is the code, I can't figure out why enter/return isn't working! Is it because it's inline?
HTML
<div class="wrap"><form name="login" style="margin: 0px">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<input TYPE="text" NAME="pass" size="17" onKeyDown="e.keyCode == 13;" id="fname" class="cool"><br><input type="button" value="LOGIN" class="asbestos-flat-button" onClick="TheLogin(this.form)">
</form>
</div>
JS
<script language="JavaScript" type="text/javascript">
<!--- PASSWORD PROTECTION SCRIPT
function TheLogin() {
var password = 'password';
if (this.document.login.pass.value == password) {
top.location.href="home.html";
}
else {
location.href="index.html";
}
}
// End hiding --->
</script>
I'm learning JS so any help would be so awesome!
UPDATE
Thanks for your help. Still not working when integrated. The page doesn't load the home.html when I hit enter/return. Instead I get no refresh, and the address bar has the url http://example.com/?pass=password.
If I click the button it does load the home.html!
thanks!
Here I wrote a JSFiddle with the working example.
In the HTML code:
Remove onKeyDown="e.keyCode == 13;" from the <input> text element.
Remove onClick="TheLogin(this.form)" from the <input> button element.
Change the type of input button from 'button' to 'submit'. In this way, when you press "enter" in the input text form the form is submitted.
Intercept the "submit" event in the form, adding onSubmit="theLogin(this.form)" on <form> element.
Note: I have renamed the function name from "TheLogin" to "theLogin" because in JavaScript the functions begins with lowercase letters if they are not constructors.
The HTML code:
<div class="wrap">
<form name="login" style="margin: 0px" onSubmit="theLogin(this.form)">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<INPUT TYPE="text" NAME="pass" size="17" id="fname" class="cool">
<br>
<input type="submit" value="LOGIN" class="asbestos-flat-button">
</form>
</div>
And the JavaScript code:
theLogin = function() {
var password = 'password';
if (this.document.login.pass.value === password) {
top.location.href = "home.html";
} else {
location.href = "index.html";
}
}
You have missed the <input type="submit">, without it you can't use the Enter key to submit the form.
Here is my HTML Form :-
<input name="inputPassword" type="password" id="inputPassword" placeholder="Password.."><span class="add-on"><i class="icon-eye-open"></i></span>
And here is my try with Jquery [I am not Jquery Student :(]
<script type="text/javascript">
$(".icon-eye-open").click(function(){
$('.icon-eye-open').removeClass('icon-eye-open').addClass('icon-eye-close');
document.getElementById("inputPassword").setAttribute('type', 'text');
});
$(".icon-eye-close").click(function(){
$('.icon-eye-close').removeClass('icon-eye-close').addClass('icon-eye-open');
document.getElementById("inputPassword").setAttribute('type', 'password');
});
</script>
So, you might have guessed, what i am trying to do. I am actually trying to replace class of clicked class [toggle-ing between class] and than trying to change attribute from password to text and vice versa.
And this is not Working.
Here is jsfiddle demo :- http://jsfiddle.net/gR5FH/
Can you please suggest / help me find my mistake.
Thanks
Try this
$(".icon-eye-open").on("click", function() {
$(this).toggleClass("icon-eye-close");
var type = $("#inputPassword").attr("type");
if (type == "text")
{ $("#inputPassword").attr("type", "password");}
else
{ $("#inputPassword").attr("type", "text"); }
});
Your problem is that the element $(".icon-eye-close") does not exist when you start listening the click event, so that code never runs. You can prevent this by using an unique event handler for the click and then toggle classes and input type within it.
Try this HTML:
<input name="inputPassword" type="password" id="inputPassword" placeholder="Password...">
<span class="add-on">
<i id="visibilitySwitch" class="icon-eye-close"></i>
</span>
With this JS:
$("#visibilitySwitch").click(function(){
$(this)
.toggleClass('icon-eye-open')
.toggleClass('icon-eye-close');
if ($('#inputPassword').attr('type') == 'password')
$('#inputPassword').attr('type', 'text')
else
$('#inputPassword').attr('type', 'password')
});
I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.
I can't get the following code working: when I press enter in the text-box, the function is not called. I can't see why though...
<form>
<p align="center">
<input type="password" class="password" name="text1" onkeypress="submitonenter(text1.value,"money","cash",event)" /><br>
<input type="button" value="Enter" style="width: 100px" name="Enter" onclick=javascript:validate(text1.value,"money","cash") />
</p>
</form>
<script type="text/javascript">
function submitonenter(text1,text2,text3,evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
// process event here
if ( evt.keyCode==13 || evt.which==13 ) {
if (text1==text2)
load('money/welcome.html');
else
{
if (text1==text3)
load('cash/welcome.html');
else
{
load('failure.html');
}
}
}
}
}
</script>
<script language = "javascript">
function validate(text1,text2,text3)
{
if (text1==text2)
load('money/welcome.html');
else
{
if (text1==text3)
load('cash/welcome.html');
else
{
load('failure.html');
}
}
}
function load(url)
{
location.href=url;
}
</script>
I'm not sure why you need the submitOnEnter function at all.
Why not just change the input type='button' to type='submit' and change the onclick keyword to onsubmit?
EDIT:
Apologies, of course the 'onsubmit' would need to be placed in the form tags, not the input.
Giving the following:
<form onsubmit=validate(text1.value,"money","cash") >
<p align="center">
<input type="password" class="password" name="text1" /><br>
<input type="submit" value="Enter" style="width: 100px" name="Enter" />
</p>
</form>
I would rewrite it all, and use a input type="submit" instead a button (I also changed the access to the password field, for being able to use it at Firefox):
<form id="myForm" method="POST" action="failure.html" onsubmit="return validate(document.getElementById('text1').value,'money','cash');">
<p align="center">
<input type="password" class="password" name="text1" id="text1"/><br>
<input type="submit" value="Enter" style="width: 100px" name="Enter" />
</p>
</form>
<script language = "javascript">
function validate(text1,text2,text3) {
var form=document.getElementById('myForm');
if (text1==text2)
form.action='money/welcome.html';
else {
if (text1==text3)
form.action='cash/welcome.html';
else {
form.action='failure.html';
}
}
return true;
}
</script>
Edited: Implementing the onSubmit as recommended by #mway (thanks).
Like the others said - remove the onclick event, change the button to a submit button, and put the rest of your code inside a function referenced by an onsubmit tag on the form if you need to process/reformat data before you submit it.
After you have confirmed that the enter key has been pressed you want to call "evt.preventDefault()" to prevent the default action (ie form submission) from happening. I believe what is happening is that you are setting the location.href but then the form is submitting before that load happens so it reloads the same page instead.
Others have mentioned server side processing and from a security point of view this is probably a good idea. Currently this page has no security whatsoever. Anybody can look at your javascript and choose to navigate to either of the two welcome pages (or the failure page) as if they had put in the password correctly. If this is meant to be secure then you might want to go and read articles about security. In summary though do password checks and following logic on the server and don't have passwords that are that easy to guess. :) Also you might want to include checking they have given the correct password on every page (eg the welcome pages). This can easily be done by setting a session variable once you have confirmed their password.