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();
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);
}
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 !
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 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";
}
}