I am trying to develop a simple login with bootstrap modal and it is not working, so if any one help could me I would be very grateful for their kindness.
I don't have much knowledge about JavaScript or Bootstrap.
function login(){
var username=document.getElementsByName("username").value;
var password=document.getElementsByName("password").value;
if(username.value == null && password.value == null){
$('.alert').show();
}
else{
document.getElementById("wrongpassword").innerHTML="Thank u very much";
}
}
.alert{
display:none;
}
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title text-center" style="color:#333366;"><strong>LOGIN TO FOOD SAVIOR</strong></h3>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" placeholder="Username" name="username" class="form-control" style="height:40px;" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" class="form-control" style="height:40px;" required>
</div>
<div class="text-center">
<input type="submit" value="LOGIN" name="login_btn" id="login_btn" onclick="login()" class="btn btn-primary" style="background-color:#333366;height:40px;color:#ffffff">
</div>
<div class="alert alert-danger alert-dismissable fade in">
<button type="button" class="close" data-hide="alert">×</button>
<p> You Entered Wrong Detail. Enter Again
</p>
</div>
<p id="wrongpassword"></p>
<h4 class="text-center">Forget Password</h4>
</div>
<div class="modal-footer">
<h4 class="text-center">Don't have Account yet? Let's Sign up its fun and easy!</h4>
<div class="text-center"><button type="button" class="btn btn-success" data-dismiss="modal"><p>Close</p></button>
</div>
</div>
</div>
</div>
</div>
<a href="#modal1" data-toggle="modal">
<h5>Login</h5></a>
strong text
There are three main reasons why your code does not run as you intended:
You are treating the return value of getElementsByName like a single DOM element, rather than a collection of elements. If you want the first element of the returned collection, add the indexed property access [0] after the function call.
You are accessing the value property one too many times for your username and password elements. You already did it once when you created the variables; no need to do it again when you include them in your if statement.
You probably meant to display the alert when !username || !password instead of when username == null && password == null, since username and password will always be strings (and thus never be null). You could compare them to the empty string (username === '' || password === ''), but casting each to a boolean is a terser way to achieve the same thing.
Demo Snippet:
function login() {
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
if (!username || !password) {
$('.alert').show();
} else {
document.getElementById("wrongpassword").innerHTML = "Thank u very much";
}
}
.alert { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title text-center" style="color:#333366;"><strong>LOGIN TO FOOD SAVIOR</strong></h3>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" placeholder="Username" name="username" class="form-control" style="height:40px;" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" class="form-control" style="height:40px;" required>
</div>
<div class="text-center">
<input type="submit" value="LOGIN" name="login_btn" id="login_btn" onclick="login()" class="btn btn-primary" style="background-color:#333366;height:40px;color:#ffffff">
</div>
<div class="alert alert-danger alert-dismissable fade in">
<button type="button" class="close" data-hide="alert">×</button>
<p> You Entered Wrong Detail. Enter Again
</p>
</div>
<p id="wrongpassword"></p>
<h4 class="text-center">Forget Password</h4>
</div>
<div class="modal-footer">
<h4 class="text-center">Don't have Account yet? Let's Sign up its fun and easy!</h4>
<div class="text-center"><button type="button" class="btn btn-success" data-dismiss="modal"><p>Close</p></button>
</div>
</div>
</div>
</div>
</div>
<a href="#modal1" data-toggle="modal">
<h5>Login</h5>
</a>
Because you are accessing the .value Property twice:
function login(){
var username=document.getElementsByName("username");
var password=document.getElementsByName("password");
if(username.value == null && password.value == null){
$('.alert').show();
}
else{
document.getElementById("wrongpassword").innerHTML="Thank u very much";
}
}
This should work.
You're setting username and password all ready to the values:
var username=document.getElementsByName("username").value;
var password=document.getElementsByName("password").value;
So you can just write this:
if(username == "" || password == ""){
And don't use null, just compare with empty strings.
I'm thinking that you meant || instead of &&.
You are use .value two time in you function so it was not working.
You have to change like below
function login(){
var username=document.getElementsByName("username");
var password=document.getElementsByName("password");
if(username.value == null && password.value == null){
$('.alert').css("display","block");
}
else{
document.getElementById("wrongpassword").innerHTML="Thank u very much";
}
}
Related
I have this form that users have to fill. When they don't fill the form or if they don't fill it correctly, the request POST is not loading. The request post allows me to save their name and email.
I want to show a bootstrap modal when the form is filled correctly by clicking the button "Download now".
The bootstrap modal says "Congratulations." It is like a success modal to say they have correctly filled the form.
But I have an issue: when nothing is filled in the form or either when it is not filled correctly, the modal is still showing when I click the button "Download now".
How can I make my modal understand that I want it to show only when the user succeed in filling correctly the form? I want the modal to pay attention to the function formValidation() before showing when I am clicking the button "Download now".
HTML CODE:
<form name="myForm" style="width:100%;" id="submit_request_form" enctype="multipart/form-data" onsubmit="return submitClick();">
<div class="form-group">
<label>First and last name:</label>
<input type="text" class="form-control" id="id_name" name="user_name" placeholder="Enter first & last name" required>
</div>
<div class="form-group">
<label>Email address:</label>
<input type="email" id="id_email" name="user_email" class="form-control" placeholder="Enter email" required>
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Download now</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-success" role="alert">
Congratulations. You will receive an email in few minutes!
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Javascript:
<script>
function submitClick() {
if (formValidation() == true) {
//POST REQUEST
return true;
} else {
return false;
}
}
function formValidation() {
if (document.myForm.user_name.value == "") {
alert("Please fill in your Name!");
return false;
}
// Validate length of the Name LastName
else if ((document.myForm.user_name.value.length) > 50) {
alert("The name is too long!");
return false;
}
// Validate emails
else if (!/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(myForm.user_email.value)) //Regular expressions to validate email
{
alert("Enter Valid Email Address!");
return false;
}
return true;
}
</script>
You'll have to programatically show the modal instead of relying on the automatic behaviour of data-toggle="modal" data-target="#exampleModal".
Remove the data-toggle and data-target attributes on your button and add this somewhere in your submitClick function's if (formValidation() == true) branch, preferably after the POST request has completed (but that's up to you really)
$('#exampleModal').modal()
See https://getbootstrap.com/docs/4.4/components/modal/#via-javascript
I have a dynamically created table and onclick of button in a row a modal opens like this:
If I type anything then it must show alert...
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message </label>
<textarea rows="3" name="message" class="form-control input-md message"></textarea></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength()">Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
function checkLength(){
var textbox = document.getElementsByClassName("message");
console.log(textbox.value);
if(textbox.value.length <= 100 && textbox.value.length >= 0){
}
else{
alert("Make sure the input is between 1-100 characters long")
}
}
console.log is printing value as undefined...I am using get elements by classname as their is duplicacy if i use Id..What is the actual problem?
getElementsByClassName gets all elements having a particular class. To get access to message textarea, you need to change the following code:
var textbox = document.getElementsByClassName("message");
to
var textbox = document.getElementsByClassName("message")[0];
getElementsByClassName returns not just one element, but an array-like of elements. Try doing textbox[0].value.
try this JS code:
function checkLength(that){
var textbox = that.parentNode.parentNode.getElementsByClassName("message")[0];
console.log(textbox.value);
if(textbox.value.length <= 100 && textbox.value.length >= 0){
}
else{
alert("Make sure the input is between 1-100 characters long")
}
}
And in your HTML pass the parameter this in function checkLength(this).
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength(this)">Accept</button>
I've a modal dialog.
<div id="myLoginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Войти в учетную запись</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-md-4 control-label" for="login">Логин</label>
<div class="col-md-4">
<input id="login" name="login" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="password">Пароль</label>
<div class="col-md-4">
<input id="password" name="password" type="password" class="form-control input-md" required="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="loginBttn" class="btn btn-success" data-dismiss="modal">Войти</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
</div>
</div>
</div>
...and have menu.php file.
<?php
$login = $_POST['login'];
$password = $_POST['password'];
echo $login.$password;
How can I get and load in div element user's login and password from modal dialog when he is pressing submit button?
I've tried to write that, but it's not working - exception "undefined index $login and $password".
$(document).ready(function() {
$("#loginBttn").click(function() {
$("#content").load('menu.php');
});
});
You can submit the form and use the success callback:
$(document).ready(function() {
$("#loginBttn").click(function() {
$.post('menu.php', $("#myLoginModal form").serialize(), function(html){
$('#content').html(html);
}, 'html')
});
});
EDIT: Also you can check https://api.jquery.com/jquery.post/
I've just used PHP Tools for VS and I did it!
The problem was the default settings for the php interpreter v7.1 !
I'm new in javascript. can you help me?
I've a js modal popup which loaded whenever user visits my website. in that modal popup I've a login form and I'm trying to login a user through javascript. I've a user.txt file where I've record of users.it doesn't show any error message or page. popup comes again and again
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"> Login</h4></div>
<div class="modal-body">
<form role="form" >
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" name="username" class="form-control" id="usrname" placeholder="Enter username" required/>
</div>
<div class="form-group">
<label for="psw"> Email</label>
<input type="email" name="Email" class="form-control" id="email" placeholder="Enter Email" required/>
</div>
<span id="loginSpan" style="color:Red"></span>
<button type="submit" onclick="LoginFunction()" class="btn btn-
default btn-success "> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"> Cancel</button>
<p>Not a member? <a href="#myModal2" data-toggle="modal">Sign Up</</p>
</div>
</div>
</div>
</div>
and my javascript as follow for login
<script>
function LoginFunction(){
var email= $("#email").val();
var usern= $("#usrname").text();
var text = ReadFile();
var lines = text.split(";");
var text = readFile();
lines.pop();
if(email==text[2] && usern==text[1]){
window.location("index.html");
}
else{
var span=document.getElementById("loginSpan");
span.text="username or email does not match";
}
};
function ReadFile(){
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile("user.txt", 1, false, 0);
var lines = "";
while (!fh.AtEndOfStream) {
lines += fh.ReadLine();
}
fh.Close();
return lines;
}
</script>
I am trying to point my scripts to two different buttons in my html. The scripts both send an email of what the customer entered however both belong to two separate modal forms.
The first form is:
!-- Beginning of Pop-up Device Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-1"></div>
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Device Testing</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Device and Meter Testing" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
The script that I have associated with this modal form is:
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').on('submit', function(event) {
event.preventDefault();
if( ! $("form")[0].checkValidity() ) {
return false;
}
// Disable the submit button
$('#contactSubmit').attr("disabled", "disabled");
$('#contactSpinner').css('display', 'inline-block');
$.ajax({
type : "POST", cache: false,
url : "#controllers.routes.Application.contactSend()",
data : {
contactName: $("#contactName").val(),
contactEmail: $("#contactEmail").val(),
contactMessage: encodeURIComponent( $("#contactMessage").val() ),
contactType: $("#contactType").val()
},
success : function(msg) {
// Check to see if the mail was successfully sent
if (msg == 'OK_SO_UPDATE') {
$("#messageSuccess").css("display", "block");
}
},
error : function(ob, errStr) {
$("#messageError").css("display", "block");
$("#messageError span.message").text(ob.responseText);
},
complete: function() {
$('#contactSubmit').removeAttr("disabled");
$('#contactSpinner').css('display', 'none');
}
});
return false;
});
});
</script>
This is referencing the scripts by giving the my form an id of "emailForm". However, if I wanted to add a second modal form such as:
<!-- Beginning of Pop-up Professional Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-2"></div>
<div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Professional</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Professional" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
This references the same script since I gave this form the id of emailForm as well. However, for some reason the alerts that are suppose to appear for the second form are not showing up. Any idea what this could be? Will I need to create a unique script for each form?
Duplicate ID's violate the specifications and are problematic, but here's a way around that to temporarily repair this code.
$(event.target).find("#messageError").css("display", "block");
The FORM tag is also malformed. I moved it up to match the bottom form tag (to after the fourth DIV).
(There are many duplicate ID problems yet unresolved, but the above specifies to the program within the event listener which element to reveal.)
The solution is to use class and name attributes where appropriate.
JSFiddle: http://jsfiddle.net/BloodyKnuckles/s7D98/