JQuery UI Dialog Not Showing when using a separate JS File - javascript

I'm new to Javascript and JQuery and i want to create a basic social website. I got stuck on the login page though. What i basically want the website to do is when you click Login a dialog will popup and say that your password and username are not correct and two buttons to say sign up and cancel. I understood you can do that using JQuery Dialog UI but im struggling doing it. These are my HTML, Javascript and CSS page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
<!-- include the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- include the jquery ui library -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
// show the dialog when submit is clicked and checked
function showDialog(){
/* select the div you want to be a dialog, in our case it is 'basicModal'
you can add parameters such as width, height, title, etc. */
$( "#basicModal" ).dialog({
modal: true,
title: "Are you sure?",
buttons: {
"YES": function() {
window.open('signup.html');
},
"NO": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<script src="js/script.js"></script>
</head>
<body>
<section class="loginform">
<form name="login" action="" method="post" onsubmit="return check(login)" accept-charset="utf-8">
<ul>
<li><label for="usermail">Email</label>
<input type="username" name="username" placeholder="username" required></li>
<li><label for="password">Password</label>
<input type="password" name="password" placeholder="password" required></li>
<li>
<input type="submit" value="Login" ></li>
</ul>
</form>
</section>
<!--
-this is the actual dialog, yes, it is included in your html body, it is just hidden
-we did not set the dialog 'title' here, we set it in the js parameter
-->
<div id="basicModal">
You mad? Username and Password are not correct. Please sign up using the button below.
</div>
</body>
</html>
This is my Javascript Page
function check(form) {
/*the following code checkes whether the entered email and password are matching*/
if (form.username.value === "user" && form.password.value === "pass") {
window.open('home.html'); /*opens the target page while Id & password matches*/
} else {
//alert("Password or Username Not Found. Please sign up."); /*displays error message*/
showDialog();
}
}
And my css
ul
{
list-style-type: none;
}
.loginform {
margin: 20% auto;
width:200px;
}
/* dialog div must be hidden */
#basicModal{
display:none;
}

You need to return false from the check() function to prevent the form from submitting:
function check(form) {
/*the following code checkes whether the entered email and password are matching*/
if (form.username.value === "user" && form.password.value === "pass") {
window.open('home.html'); /*opens the target page while Id & password matches*/
} else {
//alert("Password or Username Not Found. Please sign up."); /*displays error message*/
showDialog();
return false;
}
}
You also have a syntax error. There shouldn't be ); at the end of showDialog().
Here's a working fiddle

Related

Google reCaptcha attribute 'data-callback' causing page refresh on alert

I have added Google reCaptcha v3 script to my form. The form also includes validation that alerts the user to complete the input field. Now when the user clicks on submit button directly, an alert is shown and when OK is clicked the page refreshes and form data is submitted in the backend. I have tried adding return false and e.preventdefault() in the function but the page still resets after the alert. If I try to add any additional condition to the data-callback function, the submit button stops working.
HTML
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
<script>
function validateForm() {
var fname = document.forms.WebForm.fname.value;
if (fname == "") {
alert("Please fill out all the fields");
return false;
}
}
</script>
</head>
<body>
</style>
<div class="container">
<form action="https://www.samepage.com" method="post" id="demo-form" name="WebForm">
<div>
<div>
<input name="fname" id="fname" type="text" placeholder="First name*" required/>
</div>
</div>
<div>
<div>
<input type = "submit" style = "font-weight: bold;" value="Submit" class="g-recaptcha button" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
data-callback='onSubmit'
data-action='submit'
onClick="return validateForm()"/>
</div>
</div>
</form>
</div>
</body>
</html>
Even the required attribute in the input tag doesn't work with the recaptcha script added. When I remove the data-callback attribute and the supporting script functions, the alert and form works as expected.

Can I call an exist javascript function into jquery function

Can I make a jQuery function that can call an existing Javascript function. But, that Javascript function are from different file.
First I have a button that will open modal dialog that contain a form.Before the form popup I want to check the validation first by using a function that already exist.
<body>
<input type="button" name="buttonform" id="buttonform" value="Open Modal Form" />
<div id="dialogform" align = "center">
DIALOG
<form name="myForm2" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</div>
</body>
jQuery function:
<script>
$(function openform(){
$("#dialogform").dialog({
modal: true,
autoOpen: false,
title: "Modal Form",
width: 700,
height: 400,
});
$('#buttonform').click(function (){
$('#functioncheckheader')//function to call from other javascript file
$('#dialogform').dialog('open');
});
})
</script>
Example of javascript function from different file:
function checkheader(){
if($('#company').val() == 'select')
{ alert("Please select the date in header"); }
else if($('#project').val() == 'select')
{ alert("Please select the project in header"); }
else if($('#reqType').val() == 'select')
{ alert("Please select the request type"); }
else if($('#la').val() == "")
{ alert("Please fill up the LA no."); }
else if($('#workScope').val() == "")
{ alert("Please select the work scope."); }
}
BTW,I am new in jQuery. Thank you !!
First, add the js file to your HTML right after your jQuery
<html>
<head>
<script src="functionToUse.js"></script>
</head>
</html>
If you wish to use a function from that file in your jQuery code.
$('#buttonform').click(function (){
funcFromFile(); //function to call from other javascript file
$('#dialogform').dialog('open');
});

Honeypot implementation

Trying to filter out spam from an online form. I have a hidden div with an input. The idea is that if something goes into the field, the form will ID the user as a bot and reject the submission. After trying to implement this method, the bots are still getting through. I'm not very familiar with javascript (or spam-filtration, for that matter) - here's what I'm working with:
html (within the form):
<form action="#" method='post' id='vsurvey' name='defer'>
<div id="hp-div">
If you see this, leave this form field blank
and invest in CSS support.
<input type="text" name="question_20579" value="" />
</div>
<input type="submit" value="Submit Request" />
</form>
css:
#hp-div { display: none }
js:
<script type="text/javascript" charset="ISO-8859-1" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="ISO-8859-1" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
if(!String.IsNullOrEmpty(Request.Form["question_20579"]))
IgnoreComment();
</script>
<![if !IE]>
<script type="text/javascript">
$(document).ready(function(){
$("#vsurvey").validate({
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'Oops! You missed 1 field. It has been highlighted'
: 'Oops! You missed ' + errors + ' fields. They have been highlighted below';
$("div.alert span").html(message);
$("div.alert").show();
} else {
$("div.alert").hide();
}
},
errorPlacement: function(error, element) {
return true;
}
})
});
</script>
<![endif]>
In my opinion, a honeypot should consist of ALL of the below:
A field hidden by CSS
A field hidden by JavaScript
A field requiring a blank input
A field requiring a specific input
For instance:
<div class="input-field">
Please leave this blank
<input type="text" name="contact" value="" />
</div>
<div class="text-field">
Please do not change this field
<input type="text" name="email" value="your#email.com" />
</div>
Using CSS, hide the first field:
.input-field { display: none; }
Using jQuery, hide the second field:
$('.text-field').hide();
// or
$('.text-field').addClass('hide');
Then a couple of very simple checks in PHP:
if($_POST['contact'] == '' && $_POST['email'] == 'your#email.com') {
// Not a bot
}

JS Form Validation

<html>
<head>
<title>Coupon test code</title>
<style>
#error{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form name="couponField" action="">
<span id="error"></span>
Coupon code:
<input type="coupon" id="coupon" name="coupon">
<input type="button" id="submit" value="Apply Coupon Code">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$('#submit').click(function(){
if($('#coupon').val() == 'PROMO CODE'){
$('#error').text('correct code!');
}else{
$('#error').text('wrong code!');
}
});
</script>
</body>
</html>
The above code does the following:
1. Validate if the coupon code entered is exactly equal to 'PROMO CODE'
2. Validate if the field is empty.
What we are trying to do:
1. Keep the validation for 'PROMO CODE' intact.
2. Remove the validation for the empty field.
This is a part of an order form wherein we want the users to enter the promo code. But since all the users may not have the promo code we want to give the users the option to leave the field empty. The current validation is making this field a 'required' field.
Any suggestions are much appreciated. Thanks!
$('#submit').click(function(){
var input = $('#coupon').val();
if(input === 'PROMO CODE'){
$('#error').text('correct code!');
} else if (input !== ''){
$('#error').text('wrong code!');
}
});
make sure you use === instead of == in JavaScript.

login form through lightBox Effect

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

Categories

Resources