I'm a beginner with parse and jquery. But for some reason I'm having issues with the most basic thing, which is outputting messages into the console. I've checked my Chrome settings and they're are filtering to all.
I've written the code to simply store email and password FE inputs into parse. If the inputs match the basic validation that I've created, it should display a console message. If the input is invalid, it should display another console message. But for some reason everything I've tried doesn't seem to be working. Here is what my code looks like.
http://imgur.com/a/XHQeg
Thanks for the help. Please let me know if I've left out any information.
index.html
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="signUpLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="signUp-title" id="signUpLabel">Sign Up</h4>
</div>
<div class="modal-body">
<form id = "register-form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="password2">Confirm Password</label>
<input type="password" class="form-control" id="password2" placeholder="Confirm Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</div>
jquery.js
Parse.initialize("xxx",
"yyy");
$("#register-form").submit(function(event){ event.preventDefault();
//lets page prevent refresh
var email = $("#exampleInputEmail1"). val(); var password =
$("#password"). val(); var password2 = $("#password2"). val();
if ( password == password2) {
var user = new Parse.User();
user.set("email", email)
user.set("password", password)
user.signUp(null, {success:function(user){
console.log("Register Succeeded!")
}, error:function(user, error){
console.log("Registration error:" +error.message);
} });
}
});
When i was making your code more readable in my code editor i noticed you have a space between the dot and val() in your variable declarations. You are also missing a semicolon at the end of the first line in the password if statement.
your button also is not inside your form tags and is not of type submit!
Fix those problems and it will work.
Related
I'm working with angular 11. In my app I need to close the modal after clicking on submit button.
Tried to use data-dismiss="modal" on submit button, but it ignoring the logic of my onSubmit method.
here is my modal
<div class="container">
<div>
<form [formGroup]="FormData" (ngSubmit)="onSubmit(FormData.value)">
<div class="form-group">
<input class="form-control" name="userName" placeholder="User name" formControlName="userName" required>
</div>
<div *ngIf="FormData.controls.userName.invalid && (FormData.controls.userName.dirty || FormData.controls.userName.touched)"
class="alert alert-danger">
<div *ngIf="FormData.controls.userName.errors.maxlength">
Maximum length should be 256 characters
</div>
<div *ngIf="FormData.controls.userName.errors.required">
Name is required.
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="Enter email"
formControlName="email" required>
<div *ngIf="FormData.controls.email.invalid && (FormData.controls.email.dirty || FormData.controls.email.touched)"
class="alert alert-danger">
<div *ngIf="FormData.controls.email.errors.required">
E-mail is required.
</div>
<div *ngIf="FormData.controls.email.errors.email">
Email should be correct
</div>
</div>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<textarea class="form-control" formControlName="message" name="message"></textarea>
<div *ngIf="FormData.controls.message.invalid && (FormData.controls.message.dirty || FormData.controls.message.touched)"
class="alert alert-danger">Maximum length should be 1000 characters
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Your modal seems to be missing a start:
<div class="modal" tabindex="-1" role="dialog" [style]="{'display':display}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
I use bootstrap style but without bootstrap js. Hence the additional [style]="{'display':display}" piece. In Typescript I match this up with:
onSubmit() {
this.display='none'
Changing the style closes the model. Depending on your environment this may / may not work for you.
I'm trying to get an alert when i press the log in or sign up button but nothing is coming up. I'm copying this code off a Udemy course and I've gone over it so many times make sure it's exactly like my teachers code but it still doesn't work.
I have more JavaScript code but i didn't include it here as it was working. I've only included the code where it's no longer working for me.
I've looked at other related questions and answers on here where people said to add a jQuery URL into the script tag which did not work for me.
<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="loginModalTitle">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<input type="hidden" id="loginActive" name="loginActive" value="1">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<a class="link" id="toggleLogin">Sign up</a>
<button type="button" id="loginSignupButton" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
<script>
$("#toggleLogin").click(function() {
if ($("#loginActive").val() == "1") {
$("#loginActive").val("0");
$("#loginModalTitle").html("Sign Up");
$("#loginSignupButton").html("Sign Up");
$("#toggleLogin").html("Login");
} else {
$("#loginActive").val("1");
$("#loginModalTitle").html("Login");
$("#loginSignupButton").html("Login");
$("#toggleLogin").html("Sign Up");
}
})
$("#loginSignupButton").click(function() {
$.ajax({
type: "POST",
url: "actions.php?action=loginSignup",
data: "email=" + $("#email").val() + "&password=" + $("#password").val() + "&loginActive=" + $("#loginActive").val(),
success: function(result) {
alert(result);
}
})
})
</script>
------ actions.php
<?php
include("functions.php");
if ($_GET['action'] == "loginSignup") {
print_r($_POST);
}
?>
I'm not getting the login or sign up alert when i press the login or sign up button.
Narrow it down. Check for the request in the network panel of the browser dev tools. If the POST doesn't appear there, you know the issue is client side.
Wait for the DOM to load before you set the click handler. Wrap the click handler in a $(document).ready(). If you have already done so, you need to include more code in your question. Based on what you have shared, there are no logic or syntax errors.
I'm making modal using Bootstrap. I need to prevent modal closing while required inputs are not filled or requirements for inputs are not met.
And how can i realise the requirements for the inputs? Something like RegExp?
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Adding a user</h4>
</div>
<form name="userAdding">
<div class="modal-body">
<input type="text" required placeholder="Name" id="inputName">
<br>
<input type="text" required placeholder="Username" id="inputUsername">
<br>
<input type="email" required placeholder="Email" id="inputEmail">
<br>
<input type="text" placeholder="Street" id="inputStreet">
<br>
<input type="text" placeholder="Suite" id="inputSuite">
<br>
<input type="text" placeholder="City" id="inputCity">
<br>
<input type="number" placeholder="Zipcode" id="inputZipcode">
<br>
<input type="number" placeholder="Lat" id="inputLat">
<br>
<input type="number" placeholder="Lng" id="inputLng">
<br>
<input type="number" placeholder="Phone" id="inputPhone">
<br>
<input type="text" placeholder="Website" id="inputWebsite">
<br>
<input type="text" required placeholder="Companyname" id="inputCompname">
<br>
<input type="text" placeholder="Catchphrase" id="inputCatchphrase">
<br>
<input type="text" placeholder="bs" id="inputBs">
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addUser()">Submit</button>
</div>
</div>
</div>
</div>
Remove data-dismiss from submit button and then I have only provided here for email. Rest of all you can do like this:
function addUser(){
var email = document.getElementById('inputEmail').value;
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(email)){
$('#myModal').modal('hide');
console.log(email + " Success");
}else{
console.log(email + " Failed")
}
}
function addUser()
{
$("form").validate({
showErrors: function (errorMap, errorList) {
var errors = this.numberOfInvalids();
if (errors) {
return false;
}
});
}
add code to addUser function its restricting model to hide when there is any validation occurs.
For your first requirement (don't close the modal), you can:
1. remove the close button in the header,
2. disable the close button in the footer until all the inputs are filled.
For the latter, multiple possibilities:
disable the button by default, then bind a function to the change events of the inputs. Inside it, check all the inputs and set the button state accordingly.
in addUser(), check the validity of the inputs. If they are incorrect, use one of the solutions described in this stackoverflow to cancel the close event.
I've got an external js file with the following code in it that is checking to see if a person login credentials are true or false. When I put this jquery into the actual php file it will work as intended but when it I put the jQuery into the js file and try calling it it doesn't work and I'm not getting any errors. What's wrong with the call?
js file:
function handleLogin(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
username = $form.find( "input[name='username']" ).val(),
password = $form.find( "input[name='password']" ).val(),
url = "../process/login.php";
// Send the data using post
var posting = $.post( url, { username: username, password: password } );
// Reset data in #testStatus textarea
posting.done(function( data ) {
if (data == '1') {
$('#loginModal').modal('hide')
$( "#loginOption" ).replaceWith( "<li id='loginOption'><a href='logout.php'>Logout</a></li>" );
}
});
}
php file (the call of the function located at the end of the php file):
<!-- Modal -->
<div class="modal fade" id="loginModal" 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="loginModalLabel">Login</h4>
</div>
<div class="modal-body">
<form id="loginForm" action="">
<div class="form-group">
<label for="username">Username</label>
<input name="username" type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="loginSubmit" name="login" class="btn btn-primary" value="Login">
</div>
</form>
</div>
</div>
</div>
<script>
$("#loginForm").submit(function handleLogin() { });
</script>
You need to pass the function reference to the submit event handler...
Instead you are creating a new function which does not do anything to the submit handler, so try
$("#loginForm").submit(handleLogin);
It should be like this:
$("#loginForm").submit(function(e){
handleLogin(e);
});
How can I append a URL with an email address that a user inputs, and then submits this email address via button? I am using a modal that will pop up, ask for the email, and then call the url when the user hits the submit button. (jQuery is supported) Any help is much appreciated! Thanks
<div id="emailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel"> We Can Help</h3>
</div>
<div class="modal-body">
<h6> Enter your information in the fields below to reset a forgotten password, or to restore access to an account that has been locked for security </h6>
<br>
<form >
<input type="text" class="input-block-level" placeholder="Email address">
<!-- <input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<a href="#"><input type="checkbox" value="remember-me"> Remember me
</label></a> -->
</form>
</div>
<div class="modal-footer">
<button class="m-btn blue" data-dismiss="modal">Submit</button>
</div>
</div>
You can do something like
$("#emailModal .m-btn").click(function(){
$.post("/my/url?email=" + $("#emailModal input.input-block-level").val(), function(){
// this function is called on POST finish.
});
return false;
});
I think this is what you are after.
Change the form to this...
<form action="some-url.php" method="get">
<input type="text" name="email" class="input-block-level" placeholder="Email address">
</form>
and add this script...
$("#emailModal button").on("click", function() {
$("#emailModal form").submit();
});