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>
Related
I am following this guide (https://softdevpractice.com/blog/asp-net-core-mvc-ajax-modals/) for my Modals, and got everything working except for the last part which closes the Modal when it saves without errors. Essentially what the article shows is to add an IsValid input tag that's hidden and stores the ModelState which would be used to determine whether or not it is a successful save and should close the modal.
// find IsValid input field and check it's value
// if it's valid then hide modal window
var isValid = newBody.find('[name="IsValid"]').val() == 'True';
if (isValid) {
placeholderElement.find('.modal').modal('hide');
}
Would love any input on this. My code is as follows:
View
<div id="AddStudyModal"></div>
// unrelated code here
<button type="button" class="btn btn-secondary" data-toggle="ajax-modal" data-bs-target="#add-study" data-url="#Url.Action("AddStudy", "App", new {id = Model.GUID})">Add</button>
Partial View
#model AddStudyViewModel
<div class="modal fade" id="add-study" tabindex="-1" role="dialog" aria-labelledby="addStudyLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addStudyLabel">Add Study</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="App" asp-action="AddStudy" method="post">
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()"/>
#Html.HiddenFor(m => m.ParticipantGuid)
<div asp-validation-summary="ModelOnly"></div>
<div class="mb-3 form-group">
#* <label asp-for="Studies" class="form-label"></label> *#
<select asp-for="SelectedStudyGuid" asp-items="#ViewBag.Studies" class="form-control" autocomplete="off">
#* <select asp-for="SelectedStudyGuid" asp-items="#Model.Studies" class="form-control" autocomplete="off"> *#
<option value="">Select Study</option>
</select>
<span asp-validation-for="SelectedStudyGuid" class="text-danger"></span>
</div>
<div class="mb-3 form-group">
<label asp-for="StartDate" class="form-label"></label>
<input asp-for="StartDate" class="form-control" autocomplete="off"/>
<span asp-validation-for="StartDate" class="text-danger"></span>
</div>
<div class="mb-3 form-group">
<label asp-for="EndDate" class="form-label"></label>
<input asp-for="EndDate" class="form-control" autocomplete="off"/>
<span asp-validation-for="EndDate" class="text-danger"></span>
</div>
<div class="text-center">
</div>
<div class="text-center">#ViewBag.Message</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save</button>
</div>
</div>
</div>
</div>
Site.Js
$(function (){
var AddStudyElement = $('#AddStudyModal');
$('button[data-toggle="ajax-modal"]').click(function(event){
var url = $(this).data('url');
$.get(url).done(function(data){
AddStudyElement.html(data);
AddStudyElement.find('.modal').modal('show');
})
})
AddStudyElement.on('click', '[data-save="modal"]', function(event){
event.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
// $.post(actionUrl, sendData).done(function(data){
// AddStudyElement.find('.modal').modal('hide');
// })
$.post(actionUrl, sendData).done(function (data) {
var newBody = $('.modal-body', data);
AddStudyElement.find('.modal-body').replaceWith(newBody);
// find IsValid input field and check it's value
// if it's valid then hide modal window
var isValid = newBody.find('[name="IsValid"]').val() == 'True';
if (isValid) {
AddStudyElement.find('.modal').modal('hide');
}
});
});
});
Edit: After more examination it seems like my issue may be related to my RedirectToAction. I have posted my controller action below
[HttpPost]
public IActionResult Study(StudyViewModel model)
{
if (ModelState.IsValid)
{
var response= _repo.AddEditStudy(model.StudyGuid,model.SelectedStudyCatalogGuid, model.ParticipantGuid, model.StartDate, model.EndDate);
if (response.Success)
{
TempData["Message"] = response.Message;
return RedirectToAction("EditParticipant", new {id = model.ParticipantGuid});
}
}
model.Studies = GetStudyCatalog();
return PartialView("_StudyModal", model);
}
I'm trying to do a login and signUp pages, the login page get all variables right while the signup only transfer the password for some reason.
App.JS:
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
// configure the app to use bodyParser()
app.use(bodyParser.urlencoded({extended: true,}));
app.use(bodyParser.json());
const port = process.env.PORT || 5555;
const usersSignup = [];
const { Client } = require("pg");
//Create static files
app.use(express.static(__dirname));
app.post("/sign-in", function (req, res) {
let email = req.body.email;
let pass = req.body.psw;
index = usersSignup.findIndex((x) => x.user === email && x.pass === pass);
if (index != -1) {
if (email == "Admin#g.com" && pass == "Admin") {
res.redirect("/contact");
}
res.send(
`Welcome!` + JSON.stringify(email) + "Password:" + JSON.stringify(pass)
);
console.log("Hello");
} else {
res.send("User not found");
console.log("User not found");
}
});
app.post("/sign-up", function (req, res) {
console.log(req.body);
var Fname = req.body.firstName;
var Lname = req.body.lastName;
var pass = req.body.Password;
var email = req.body.email;
var pCode = req.body.promoCode;
con.query("select * from users where email=$1", [email], (err, res) => {
var result = JSON.stringify(res.rows[1]);
if (result != null) {
console.log("User exists");
} else {
con.query(
"INSERT INTO users (Name,FamilyName,Email,PromoCode,Password) values($1,$2,$3,$4,$5)",
[Fname, Lname, email, pass, pCode]
);
}
});
SignUp form - req.body only get the password (psw) and nothing else... i tried to disable the modal but same problem.
the associated function are to check that both password are the same and to check password limits (6 digits,capital, etc...)
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
Login form (Works fine) - all the data comes like it should.
<form method="POST" action="sign-in">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><img
src="/style/outline_account_box_black_18dp.png" alt=""></span>
</div>
<input type="email" class="form-control" id="email" name="email"
placeholder="Enter email" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><img
src="/style/outline_lock_black_18dp.png" alt=""></span>
</div>
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" title=" Must contain at least one number and one uppercase and lowercase letter and one special
char, and at least 6 or more characters" required>
</div>
<div class="g-recaptcha" data-sitekey="6LeryQAaAAAAACtRGmnGbDekQjszQXzXrH858eJe"></div><br>
<button type="submit" class="btn btn-primary" onclick="return alerts()">Log In</button>
<div class="sign-up"><br>
<hr>
<p><b>Need an account? Sign Up</b></p>
</div>
</form>
You forgot name attributes
<input type="text" class="form-control form-control-user" id="firstName"
placeholder="First Name">
Should be
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
HTML forms use name for sending data, not id
Do this for all inputs, also you wrote name="psw" on HTML but doing req.body.Password on server part, you need to correct this too.
Fixed HTML:
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName" name="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email" name="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password" name="Password"
placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode" name="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
You didn't set name attribute for signup!
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName" name="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email" name="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword" name="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode" name="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
Can you post the content of validFunc() that you used for onClick of password, and also the content of displayForm() used on form submit? I suspect that the missing fields somehow got undefined with your content checking code.
I'm reading an xml file with javascript and if the user clicks on the 'forgot password' button, a modal shows up, where there is another button called 'get my password'. If the user clicks on this button, it's supposed to show the users' password based on his email id in the xml file, but my function is not working for some reason.
my html form:
<div class="container">
<div class="login">
<h1 class="login-heading">Please login.</h1>
<form method="post" action="login.php">
<input id='email1' type="email" name="email" placeholder="Email Adress" required="required" class="input-txt" onchange="checkuser();" />
<input id='pass1' type="password" name="password" placeholder="Password" required="required" class="input-txt" />
<input type"button" name="forgot" class="btn" data-target="#pwdModal" data-toggle="modal" value="Forgot password?">
<div id="pwdModal" class="modal fade" tabindex="-1" role="dialog" 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>
<h1 >Forgot My Password?</h1>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<p>If you have forgotten your password, simply click on the button below to fetch your password from the server!</p>
<div class="panel-body">
<fieldset>
<div id="forgot">
<input type="button" class="btn" value="Get my password" tabindex="2" onclick="forgotten();"><br> <br>
<p id="pass" style="border-style:dotted;border-color:coral; border-radius:5px;"></p>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn" name="ok" id="b1" >Sign in </button> <br><br></form>
<script>
//checking if the email exists in the server xml or not
var first_email = document.getElementById("email1");
var forgotten_pass='';
var request = new XMLHttpRequest();
//creating an array of the existing emails
request.open("GET", "storedata.xml", false);
request.send();
var xml = request.responseXML;
var users = xml.getElementsByTagName("data");
const existingEmails = [];
for(var i = 0; i < users.length; i++) {
const emailTag = users[i].getElementsByTagName("email2");
const email = emailTag[0].childNodes[0].nodeValue;
existingEmails.push(email);
}
function checkuser() {
if(existingEmails.includes(first_email.value)) {
email1.setCustomValidity('');
}
else {
email1.setCustomValidity('Sorry but this email address doesnt exist in the server.');
}
}
//grabbing the forgotten password
function forgotten {
for(var i = 0; i < users.length; i++) {
if (first_email == users[i].getElementsByTagName("email2") {
forgotten_pass= users[i].getElementsByTagName("pass2");
}
} document.getElementById("pass").innerHTML=forgotten_pass;
}
</script>
</div>
</div>
Haven't you tried async?
var request = new XMLHttpRequest();
request.open("GET", "storedata.xml", true);
request.onreadystatechange=function(){
if((this.readyState==4)&&(this.status==200)){
var xml = request.responseXML;
// etc etc etc
}
};
request.send();
If there's an error this version will tell you... just set the URL and test it.
var X=new XMLHttpRequest(); X.open('GET',URL,true); X.responseType='text';
X.onreadystatechange=function(){
if(X.readyState==4){
if(X.status==200){
alert(X.responseText); // Observe the text, is it empty?
} else {alert(X.statusText);} // observe the error
}
};
X.send();
form submit does not work. when i click update button in the pop up form the page reloads and data is not updated
here is the script
$(document).off('click','.updatepro');
$(document).on('click','.updatepro',function(){
var userid = $(this).data('userid');
var url = baseurl+'/update';
var infoData= {userid:userid,_token:token};
$.post(url,infoData,function(response){
})
});
here is my controller
public function update(Request $request, $id)
{
$user = User:: findorFail($id);
$user->name = $request->input('name');
$user->username = $request->input('username');
$user->email = $request->input('email');
$user->address = $request->input('address');
$user->phone = $request->input('phone');
$user->designation = $request->input('designation');
$user->deviceid = $request->input('deviceid');
echo'<pre>';
print_r($request-all());
exit;
$user->save();
}
here is the route
Route::post('/update', 'GetdataController#update');
what i want is for the data to be submitted and the same page to open from where i selected the data to be updated
You should try this:
//modal form to show all the required inputs and make one field hidden
<div id="updateFormID" class="modal fade" >
<div class="modal-dialog box box-default" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Bank</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" action="{{ url('/update') }}" method="post" role="form">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group" style="margin: 0 10px;">
<input type="hidden" class="form-control" id="recordid" name="recordid" value="">
<label> Name </label><input type="text" class="form-control" id="name" name="fname" value="">
<label>UserName: </label><select required class="form-control" id="username" name="userName">
<label>Email: </label><select required class="form-control" id="email" name="email">
<label>Address: </label><input type="text" class="form-control" id="address" name="address" value="">
<label>Phone: </label><input type="text" class="form-control" id="phone" name="phone" value="">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-xs">Update</button>
<button type="button" class="btn btn-secondary btn-xs" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
//link on your view to trigger popup the modal. this link displays record gotten from db
<a onclick="updateForm('{{$record->userid}}','{{$record->name}}','{{$record->username}}','{{$record->email}}','{{$record->address}}','{{$record->phone}}')" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
//javascript function to load modal and assign the record to inputes
function updateForm(r,x,y,z,w,s)
{
document.getElementById('recordid').value = r;
document.getElementById('name').value = x;
document.getElementById('username').value = y;
document.getElementById('email').value = z;
document.getElementById('address').value = w;
document.getElementById('phone').value = s;
$("#updateFormID").modal('show')
}
//your controller
in your controller you have get the values and save to db
public function Update(Request $request)
{
$recordid = $request->input('recordid');
$name = $request->input('name');
$username = $request->input('username');
$email = $request->input('email');
$address = $request->input('address');
$phone = $request->input('phone');
$update=DB::table('tbl')->where('id',$recordid )->update(['name' =>$name,'username' =>$username,'email' =>$email,'address'=>$address,'phone'=>$phone]);
return redirect();
}
//route
Route::post('/update', 'GetdataController#Update');
Note: make sure to call/import the DB facade on top. this is query builder.
use DB;
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 !