I have the following code and I am unable to trigger - ng-submit or ng-click on this except local onclick function on login button. Please let me knjow if you know good solution or able to identify the problem:
<form ng-submit = "login.submitLoginForm(login.user)" novalidate>
<p>
<input class="username-email" type="email" name="username" value="" placeholder="Your Email"
ng-model="login.user.userName">
</p>
<p>
<input class="password" type="password" name="password" value="" placeholder="Password"
ng-model="login.user.pwd">
</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">Remember me</label>
</div>
<p>
<button class="login" type="submit" name="Login" value="Login">Login</button>
</p>
</form>
vm.submitLoginForm = submitLoginForm;
function submitLoginForm(user) {
// submitLoginForm...
console.log("UserName..form.." + user.UserName + 'pwd..' + user.pwd);
if(user.userName != '' || user.userName != 'undefined'){
vm.user.userName = user.userName;
console.log("UserName..form.." + user.userName + vm.user.userName);
ServiceFactory.setUserName(vm.user.userName);
}
if(user.pwd != '' || user.pwd != 'undefined'){
vm.user.pwd = user.pwd;
console.log("UserName..pwd.." + user.pwd + vm.user.pwd);
ServiceFactory.setPwd(vm.user.pwd);
}
initialize();
};
'use strict';
angular
.module('app', [])
.controller('LoginCtrlr', LoginCtrlr);
function LoginCtrlr() {
var vm = this;
vm.user = {
userName: '',
pwd: ''
};
vm.submitLoginForm = function submitLoginForm(user) {
// submitLoginForm...
console.log("UserName..form.." + user.userName + ' vm userName: ' + vm.userName);
if (user.userName != '' || user.userName != 'undefined') {
vm.userName = user.userName;
console.log("UserName..form.." + user.userName + ' vm. userName: ' + vm.userName);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<section class="container" ng-controller="LoginCtrlr as login">
<div>
<p class="or">Or</p>
<p class="login">your email</p>
<form novalidate>
<p>
<input class="username-email" type="email" name="username" value="" placeholder="Your Email" ng-model="login.user.userName">
</p>
<p>
<input class="password" type="password" name="password" value="" placeholder="Password" ng-model="login.user.pwd">
</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">Remember me</label>
</div>
<p>
<button class="login" type="submit" name="Login" value="Login" ng-click="login.submitLoginForm(login.user)">Login</button>
</p>
<div>{{ login.message }}</div>
</form>
</div>
<p class="note-text-center-xs">By continuing, you accept the terms of Use and Privacy Policy</p>
<div class="login-help-center-xs">
<p>Forgot your password?
</p>
</div>
<p class="no-account" onclick="#">You Don't have an account yet? Sign up</p>
</a>
</section>
</div>
I try to create the complete code snipped. the dependency module are removed since not all could access via code snipped.
What I change:
define new 'app' module use [] (square bracket)
You need to call the controller when you're assigning a object into a model, because you define all controller's method and attribute into it self rather than using $scope. for example:
<input class="username-email" type="email" name="username" value="" placeholder="Your Email" ng-model="login.user.userName">
Related
I would like to ask you for help.
I created a contact form in HTML and JavaScript, but when I try to send the email, it just doesn't do anything, nothing happens.
See the code below:
/*----------------------------------------------------*/
/* contact form
------------------------------------------------------*/
$('form#contactForm button.submit').click(function() {
$('#image-loader').fadeIn();
var contactName = $('#contactForm #contactName').val();
var contactEmail = $('#contactForm #contactEmail').val();
var contactSubject = $('#contactForm #contactSubject').val();
var contactMessage = $('#contactForm #contactMessage').val();
var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
'&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;
$.ajax({
type: "POST",
url: "inc/sendEmail.php",
data: data,
success: function(msg) {
// Message was sent
if (msg == 'OK') {
$('#image-loader').fadeOut();
$('#message-warning').hide();
$('#contactForm').fadeOut();
$('#message-success').fadeIn();
}
// There was an error
else {
$('#image-loader').fadeOut();
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
}
});
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- form -->
<form action="mailto:yuridiamond#icloud.com" method="post" enctype="multipart/form-data" id="contactForm" name="contactForm">
<fieldset>
<div>
<label for="contactName">Nome <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactName" name="contactName">
</div>
<div>
<label for="contactEmail">E-mail <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactEmail" name="contactEmail">
</div>
<div>
<label for="contactSubject">Assunto</label>
<input type="text" value="" size="35" id="contactSubject" name="contactSubject">
</div>
<div>
<label for="contactMessage">Mensagem <span class="required">*</span></label>
<textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
</div>
<div>
<button class="submit" action="mailto:yuridiamond#icloud.com">Enviar</button>
<span id="image-loader">
<img alt="" src="images/loader.gif">
</span>
</div> -->
</fieldset>
</form>
<!-- Form End -->
I hope you can help me.
Thank you in advance.
I apologize if it's a simple problem, but I'm still new to programming.
$(document).ready(function(){
$('.submit').click(function() {
$('#image-loader').fadeIn();
var contactName = $('#contactForm #contactName').val();
var contactEmail = $('#contactForm #contactEmail').val();
var contactSubject = $('#contactForm #contactSubject').val();
var contactMessage = $('#contactForm #contactMessage').val();
var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
'&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;
$.ajax({
type: "POST",
url: "inc/sendEmail.php",
data: data,
success: function(msg) {
if (msg == 'OK') {
$('#image-loader').fadeOut();
$('#message-warning').hide();
$('#contactForm').fadeOut();
$('#message-success').fadeIn();
}
else {
$('#image-loader').fadeOut();
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
}
});
return false;
});
});
I found a solution, faster, simpler and very cool.
See the code below:
<form action="https://formspree.io/f/mbjwrqov" method="POST" enctype="multipart/form-data" id="contactForm" name="contactForm">
<fieldset>
<div>
<label for="contactName">Nome <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactName" name="Nome">
</div>
<div>
<label for="contactEmail">E-mail <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactEmail" name="Email">
</div>
<div>
<label for="contactSubject">Assunto</label>
<input type="text" value="" size="35" id="contactSubject" name="Assunto">
</div>
<div>
<label for="contactMessage">Mensagem <span class="required">*</span></label>
<textarea cols="50" rows="15" id="contactMessage" name="Mensagem"></textarea>
</div>
<div>
<button class="submit">Enviar</button>
<span id="image-loader">
<img alt="" src="images/loader.gif">
</span>
</div>
</fieldset>
</form>
<!-- Form End -->
Formspree
http://formspree.io/
The site itself already creates HTML, and I just had to comment on the JavaScript part so as not to give problem or conflict.
Basically, the site already does the intermediary.
A note: The site I created is hosted on GitHub Pages.
I am trying to change (div.class=loguser)'s innerhtml to the username that has logged in. To get the username, I wrote a function that gets input of username and password from the register_button which is inside (div#register). I wrote an object(addData) which takes the username and password and stores it in an array(datas). After putting it in the array, I made a function where it verifies if the username and password exists in the array. If it does exist, it is suppose the change the innerhtml to the username. But it is not working. And I cant even submit the form while registering.
let datas = [];
const addData = (ev) => {
ev.preventDefault();
let data = {
username: document.getElementById('rusername').value,
password: document.getElementById('rpassword').value
}
datas.push(data);
document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('register_button').addEventListener('click', addData);
});
function isUserValid(username, password) {
var username = document.getElementById('lusername').value;
var password = document.getElementById('lpassword').value;
for (var i = 0; i < datas.length; i++) {
if (datas[i].username === username &&
datas[i].password === password) {
var name = username;
document.getElementsByClassName('loguser').innerHTML = username;
}
}
}
<body>
<div class="loguser">
<td>
<ul class="nav-area">
<li class="dropdown">User
</li>
</ul>
</td>
</div>
</tr>
</table>
</div>
<div class="wrapper">
<div class="login_box">
<div class="login_header">
<img src="images/alimama.png" alt=""> <br> Login or Register!
</div>
<div id="login">
<form action="" method="POST">
<input id="lusername" type="text" name="lusername" placeholder="Username" required>
<br>
<input id="lpassword" type="password" name="lpassword" placeholder="Password">
<br>
<input type="submit" name="login_button" value="Login">
<br>
Need an account? Register here!
</form>
</div>
<div id="register">
<form action="" method="POST">
<input id="rusername" type="text" name="rusername" placeholder="Username" required>
<br>
<input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
<br>
<input id="register_button" type="submit" name="register_button" value="Register">
<br>
Already have an account? Sign in here!
</form>
</div>
</div>
</body>
isUserValid() shouldn't take username and password as parameters, since it gets them from the inputs. It should take an event parameter, so you can call it as an event listener.
document.getElementsByClassName() returns a NodeList. You need to use [0] to access the first match to set its innerHTML. You could also use document.querySelector(), it just returns the first match.
The login button doesn't have an ID. Add id="login_button" so you can add an event listener to it.
Instead of your loop you can use the find() method to search an array.
let datas = [];
const addData = (ev) => {
ev.preventDefault();
let data = {
username: document.getElementById('rusername').value,
password: document.getElementById('rpassword').value
}
datas.push(data);
document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('register_button').addEventListener('click', addData);
});
function isUserValid(e) {
e.preventDefault();
var username = document.getElementById('lusername').value;
var password = document.getElementById('lpassword').value;
var found_user = datas.find(d => d.username === username && d.password === password);
if (found_user) {
document.getElementsByClassName('loguser')[0].innerHTML = found_user.username;
}
}
document.getElementById("login_button").addEventListener("click", isUserValid);
<body>
<div class="loguser">
User
</div>
<div class="wrapper">
<div class="login_box">
<div class="login_header">
<img src="images/alimama.png" alt=""> <br> Login or Register!
</div>
<div id="login">
<form action="" method="POST">
<input id="lusername" type="text" name="lusername" placeholder="Username" required>
<br>
<input id="lpassword" type="password" name="lpassword" placeholder="Password">
<br>
<input type="submit" id="login_button" name="login_button" value="Login">
<br>
Need an account? Register here!
</form>
</div>
<div id="register">
<form action="" method="POST">
<input id="rusername" type="text" name="rusername" placeholder="Username" required>
<br>
<input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
<br>
<input id="register_button" type="submit" name="register_button" value="Register">
<br>
Already have an account? Sign in here!
</form>
</div>
</div>
</body>
I'm trying to create a JSON object from form data on submit.
I've managed to get it working with a variable. Is there a better way to create a JSON object?
Form
<form #submit.prevent="submit">
<div class="form-group">
<label class="inputa-label" for="exampleInputEmail1"
>Email address</label
>
<input
type="email"
class="form-control inputa"
id="exampleInputEmail1"
placeholder="Enter email"
required
v-model="email"
/>
</div>
<div class="form-group">
<label class="inputa-label" for="exampleInputPassword1"
>Phone number</label
>
<input
type="number"
class="form-control inputa"
id="exampleInputPassword1"
placeholder="Phone"
v-model="phone"
/>
</div>
<div class="form-group">
<label class="inputa-label" for="exampleInputPassword1"
>Information</label
>
<textarea
class="form-control inputa"
aria-label="With textarea"
v-model="information"
></textarea>
</div>
<button
type="submit"
style="font-weight:600; padding: .8125rem 1.25rem"
class="btn btn-primary"
>
Submit
</button>
</form>
Method:
data() {
return {
email:"",
phone:"",
information:"",
};
},
methods: {
submit() {
var data = '{ "Email":"' + this.email + '" , "Phone":"' + this.phone + '", "Information":"' + this.information + '" }';
},
},
I've got it working with a variable, but I want to know if there is a better way to do this.
Answering the question, I think what you're looking for is JSON.stringify():
const data = JSON.stringify({
Email: this.email,
Phone: this.phone,
Information: this.information
})
I am creating a simple login an sign up form that is used to create a user and store it in the local host. I have got the sign up form working as it should, but when I try and pull the information from the localhost, it just refreshes the page. Im just wondering how I can get the function to work correctly.
Here is my JS:
const signup = (e) => {
let user = {
firstName: document.getElementById("firstName").value,
lastname: document.getElementById("lastName").value,
email: document.getElementById("email").value,
username: document.getElementById("username").value,
password: document.getElementById("password").value,
confirm_password: document.getElementById("confirm_password").value,
};
localStorage.setItem("user", JSON.stringify(user));
console.log(localStorage.getItem("user"));
e.preventDefault();
alert("Signup Successful")
};
function login() {
var stored_username = localStorage.getItem('username');
var stored_password = localStorage.getItem('password');
var username1 = document.getElementById('username1');
var password2 = document.getElementById('password2');
if(username1.value == stored_username && password2.value == stored_password) {
alert('Login Successful.');
}else {
alert('Username or password is incorrect.');
}
}
document.getElementById("login-btn").addEventListener(type = click, login())
And here is my HTML:
<div class="bodyBx">
<section>
<div class="container">
<div class="user signinBx">
<div class="imgBx"><img src="https://images.unsplash.com/photo-1551034549-befb91b260e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="width: 400px;" alt="" /></div>
<div class="formBx">
<form>
<h2>Sign In</h2>
<input type="text" id="username2" placeholder="Username" />
<input type="password" id="password2" placeholder="Password" />
<button id = "login-btn" type="submit" onclick="login();">Submit</button>
<p class="signup">
Need an account ?
Sign Up.
</p>
</form>
</div>
</div>
</div>
</section>
<!-- ================= Sign Up Form Start ================= -->
<section>
<div class="container">
<div class="user signupBx" id="section2">
<div class="imgBx"><img src="https://images.unsplash.com/photo-1555680206-9bc5064689db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="width: 400px;" alt="" /></div>
<div class="formBx">
<form role="form" onsubmit="signup(event)">
<h2>Sign Up</h2>
<input type="text" id="firstName" placeholder="First Name" />
<input type="text" id="lastName" placeholder="Last Name" />
<input type="email" id="email" placeholder="example#email.com..." />
<input type="text" id="username" placeholder="Username" />
<input type="password" id="password" placeholder="Password" />
<input type="password" id="confirm_password" placeholder="Confirm Password" />
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</section>
</div>
Change the type of login button to button from submit, like below
<button id = "login-btn" type="button" onclick="login();">Submit</button>
If type=submit the form is posted to the url specified in the action attribute of the form, else to the same page if action is missing and you will see a page refresh.
Alternate method - You can also try return false; in your login()
Also your addEventListener should be like below, you don't have to provide type = click, the first param is of type string and second param is of type function. Check docs
document.getElementById("login-btn").addEventListener("click", login)
Localstorage can only store text. So you store a stringified object, which is fine, but you're trying to retrieve properties from it which don't exist.
Instead of:
var itm={someField:1};
localStorage.setItem("itm",JSON.stringify(itm));
//then later
localStorage.getItem("someField");
//localstorage doesnt know what someField is
You want:
var itm={someField:1};
localStorage.setItem("itm",JSON.stringify(itm));
//then later
itm = JSON.parse(localStorage.getItem("itm"));
someField = itm.someField
As for the refresh, check this out:
Stop form refreshing page on submit
TL;DR: Add e.preventDefault() in function login() (you'll have to change it to function login(e).
I am using regex to disable registering with a apple email
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)'))
The code is working fine if I run it with the browser console but I cant get it to work initially, Ive wrapped it in a $(document).ready(function () { .. } as well the blur function just never seems to fire. Here is the code below as well as CodePen
Html
<div class="content">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" role="form">
<div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div>
<input type="text" name="email" placeholder="" value="" id="Email"/>
<input type="password" name="password" placeholder="Password" value="" />
<input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" />
<div class="already">Don't have an account? Register</div>
<a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a>
</form>
</div>
JS
function emailValidate(){
var str = $('#Email').val();
$('#Email').blur(function() {
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
});
}
emailValidate()
You need to re-assign the value using val() to variable str inside blur event callback.
function emailValidate(){
$('#Email').blur(function() {
var str = $(this).val();
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
alert(str)
});
}
emailValidate()
you must get value of target object #Email when the blur event trigger. In your code, you get that value when you bind blur event.
Try with
function emailValidate(){
$('#Email').blur(function() {
var str = $('#Email').val();
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
});
}
emailValidate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<form role="form">
<div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div>
<input type="text" name="email" placeholder="" value="" id="Email"/>
<input type="password" name="password" placeholder="Password" value="" />
<input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" />
<div class="already">Don't have an account? Register</div>
<a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a>
</form>
</div>
Hope this helps.
Regards.