I'm writing my first application in AngularJS, and I'm new to javascript. I have a simple question:
How do I use POST values from an html form in an angular controller?
I have a form (i've stripped out the css and validation stuff for ease of reading):
<form name="signupForm" novalidate>
<input type="text" placeholder="Name..." ng-model="name" name="name" required />
<input type="email" name="email" ng-model="email" placeholder="Email..." required>
<input type="password" placeholder="Password..." ng-model="password" name="password" required ng-minlength="7" ng-maxlength="50"/>
<button type="button" ng-click="auth.signup()">Sign Up</button>
</form>
I have a controller (no errors), with a function which looks a bit like this:
function SignupController($http, $scope, $rootScope, $location) {
vm.signup = function(name, email, password, onSuccess, onError) {
$http.post('http://myapi.com/api/authenticate/signup',
{
name: name,
email: email,
password: password
}).then(function(response) {
// etc
});
}
Now, how do I assign the values name, email, password from the form to name, email, password in the controller?
Thanks.
When you set the input with ng-model="email", then you can access those variable values in controller by just calling $scope.email.
Case-1: For single value
HTML
<input type="text" ng-model="email" />
Angular Controller
console.log($scope.email);
Case-2: For multiple values
HTML
<input type="text" ng-model="user.firstname" />
<input type="text" ng-model="user.lastname" />
<input type="text" ng-model="user.email" />
Angular Controller
//This will print the all the values (firstname, lastname, email) contains user as object.
console.log($scope.user);
Please check this working snippet to see the real time example
var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
$scope.user = {};
$scope.signup = function(){
console.log($scope.user);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<form name="signupForm" ng-controller="FormCtrl" ng-submit="signup()">
<input type="text" placeholder="Name..." ng-model="user.name" name="name" required />
<input type="email" name="email" ng-model="user.email" placeholder="Email..." required>
<input type="password" placeholder="Password..." ng-model="user.password" name="password" required ng-minlength="7" ng-maxlength="50"/>
<button type="submit">Sign Up</button>
</form>
</body>
You need to use $scope for binding ng-model's value as shown as follow...
$scope.signup = function() {
data={
name: $scope.name,
email: $scope.email,
password: $scope.password
}
$http.post('http://myapi.com/api/authenticate/signup',data).then(function(response) {
// etc
});
HTML
<form name="signupForm" novalidate>
<input type="text" placeholder="Name..." ng-model="user.name" name="name" required />
<input type=“email" name="email" ng-model="user.email" placeholder="Email..." required>
<input type="password" placeholder="Password..." ng-model="user.password" name="password" required ng-minlength="7" ng-maxlength="50"/>
<button type="button" ng-click="auth.signup()">Sign Up</button>
JS
function SignupController($http, $scope, $rootScope, $location) {
$scope.user={};
vm.signup = function(name, email, password, onSuccess, onError) {
$http.post('http://myapi.com/api/authenticate/signup',
{
name: $scope.user.name,
email: $scope.user.email,
password: $scope.user.password
}).then(function(response) {
// etc
In your html
<form name="signupForm" novalidate ng-submit="vm.signup()">
<input type="text" placeholder="Name..." ng-model="name" name="vm.user.name" required />
<input type=“email" name="email" ng-model="vm.user.email" placeholder="Email..." required>
<input type="password" placeholder="Password..." ng-model="vm.user.password" name="password" required ng-minlength="7" ng-maxlength="50"/>
<button type="submit">Sign Up</button>
</form>
In your controller
function SignupController($http, $scope, $rootScope, $location) {
vm.user = {};
vm.signup = function() {
// validate here
// send data
$http
.post('http://myapi.com/api/authenticate/signup', vm.user)
.then(function(response) {
// handle success
});
};
}
Three ways you can do
Type 1 With individual params
HTML
<form name="signupForm" novalidate>
<input type="text" placeholder="Name..." ng-model="name" name="name" required />
<input type="email" name="email" ng-model="email" placeholder="Email..." required />
<input type="password" placeholder="Password..." ng-model="password" name="password" ng-minlength="7" ng-maxlength="50" required/>
<button type="button" ng-click="auth.signup(name, email, password)">Sign Up</button>
</form>
JS
vm.signup = function(name, email, password) {
$http.post('http://myapi.com/api/authenticate/signup',
{
name: name,
email: email,
password: password
}).then(function(response) { });
}
Type 2 With object as param
HTML
<form name="signupForm" novalidate>
<input type="text" placeholder="Name..." ng-model="user.name" name="name" required />
<input type="email" name="email" ng-model="user.email" placeholder="Email..." required />
<input type="password" placeholder="Password..." ng-model="user.password" name="password" ng-minlength="7" ng-maxlength="50" required/>
<button type="button" ng-click="auth.signup(user)">Sign Up</button>
</form>
JS
vm.signup = function(data) {
$http.post('http://myapi.com/api/authenticate/signup', data)
.then(function(response) {
});
}
Type 3 Using $scope
HTML
<form name="signupForm" novalidate>
<input type="text" placeholder="Name..." ng-model="user.name" name="name" required />
<input type="email" name="email" ng-model="user.email" placeholder="Email..." required />
<input type="password" placeholder="Password..." ng-model="user.password" name="password" ng-minlength="7" ng-maxlength="50" required/>
<button type="button" ng-click="auth.signup()">Sign Up</button>
</form>
JS
vm.signup = function() {
$http.post('http://myapi.com/api/authenticate/signup', $scope.data)
.then(function(response) {
});
}
It will work in all these ways.
Checkout the working demo of best solution among these three
Demo: https://jsbin.com/rimemi/25/edit?html,js,console,output
Related
I have a problem to process the data from my html form with jQuery. I have this simple form:
<form id="singup">
<input type="text" placeholder="Full Name" id="signup-name">
<input type="email" placeholder="Email Address" id="signup-email">
<input type="password" placeholder="Password" id="signup-pass">
<input type="password" placeholder="Retype Password" id="signup-retype-pass">
<button class="button-hover" type="submit" id="signup-submit">Create account now</button>
</form>
Now I want to get the value of the inputs with jQuery.
$("#singup").submit(function (e) {
var email = $('#singup-email').val();
console.log(email);
e.preventDefault(e);
});
But the browser console tells me the var email is undefined. Why?
Thanks for help!
Typo mistake. use signup-email not singup-email
$("#singup").submit(function (e) {
var email = $('#signup-email').val();
console.log(email);
e.preventDefault(e);
});
$("#signup-submit").on('click', function (e) {
var email = $('#signup-email').val();
console.log(email);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="singup">
<input type="text" placeholder="Full Name" id="signup-name">
<input type="email" placeholder="Email Address" id="signup-email">
<input type="password" placeholder="Password" id="signup-pass">
<input type="password" placeholder="Retype Password" id="signup-retype-pass">
<button class="button-hover" type="button" id="signup-submit">Create account now</button>
</form>
I'm building a registration form modal and on button click, javascript will send an ajax request to the page regajax.php with the form content. My code is below, at the moment I'm only troubleshooting with regajax.php although the error_log still says that the variables are undefined.
Essentially, I want to send obj to regajax.php to check for errors and insert into my database on successful submission. (Before closing the modal, and without refreshing the page).
I've researched through countless stackoverflow posts and internet sources also to find an answer to my problem. Many have suggested using JSON.stringify(), which i'm currently trying to work with.
Note: In my source, the ajax script is below the form, in <body>.
$("#regButton").click(function(e) {
e.preventDefault();
var obj = {
fname: $('#fname').val(),
lname: $('#lname').val(),
email: $('#email').val(),
pass: $('#password').val(),
mobile: $('#mobile').val(),
street: $('#street').val(),
city: $('#city').val(),
post: $('#post').val(),
state: $('#state').val(),
country: $('#country').val()
}
$.ajax({
method: 'POST',
url: 'regajax.php',
dataType: 'json',
data: JSON.stringify(obj),
success: function(response) {
document.getElementById('error') = response;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<div>
<div class="error"></div>
<div class="modal-form-left">
<input type="text" id="fname" placeholder="First Name" required><br>
<input type="text" placeholder="Last Name" id="lname" required><br>
<input type="email" placeholder="Email" id="email" onKeyUp="checkEmail();" required value=""><br>
<input type="password" placeholder="Password" name="pass" id="password" onKeyUp='checkPass();' required pattern="(?=^.{6,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"><br>
<input type="password" placeholder="Confirm Password" id="confirm_password" onKeyUp="checkPass();" required pattern="(?=^.{6,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"><br>
<input type="submit" id="regButton" value="Register">
</div>
<div class="modal-form-right">
<input type="text" placeholder="Phone" id="mobile" required><br>
<input type="text" placeholder="Street" id="street" required><br>
<input type="text" placeholder="City" id="city" required><br>
<input type="text" placeholder="Post Code" id="post" name="post" required><input type="text" placeholder="State" name="state" id="state" required><br>
<input type="text" placeholder="Country" id="country" required><br>
</div>
</div>
</form>
<?php
$fname = $_POST["fname"];
error_log($fname, 3, "./error_log");
?>
I'm trying to create a simple sign in/sign up form that sends an alert to the user once they've hit the submit button. The alert will show the user all the info they have put in (name, email, password). When I run the app the alert comes up as "undefined".
Here's my code:
HTML:
<form>
<h2>Sign In</h2>
<label>User Name:</label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password:</label>
<input type="password" placeholder="Enter Password" name="password" required>
<input type="submit" class="submit-button si-submit" value="Sign In">
<div id="remember"><input type="checkbox" checked="checked"><span>Remember me</span></div>
</form>
</div>
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
JS:
var userInfo = document.getElementById("name");
document.getElementById("myButton").addEventListener("click", function() {
alert(userInfo.value);
});
Your code seems to work...
var userName = document.getElementById("name"),
userEmail = document.getElementById("email"),
userPassword = document.getElementById("password");
document.getElementById("myButton").addEventListener("click", function() {
alert(userName.value);
alert(userEmail.value);
alert(userPassword.value);
});
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
</div>
I have a signup page which is integrated with mailchimp. The page has two forms, one at top other at bottom which are same. I am using jQuery validation and on success ajax to post the data and it returns a response if successful. Form 1 response comes back on the same page, where as form 2 goes on to post subscribe.php file output right away without returning to the original page.
JS:
$(document).ready(function() {
// jQuery Validation
$("#signup").validate({
// if valid, post data via AJAX
submitHandler: function(form) {
$.post("subscribe.php", { fname: $("#fname").val(), lname: $("#lname").val(), email: $("#email").val(), wname: $("#wname").val() }, function(data) {
$('#response').html(data);
});
},
// all fields are required
rules: {
fname: {
required: true
},
lname: {
required: true
},
email: {
required: true,
email: true
},
wname: {
required: true
}
}
});
});
HTML:
<form class="formee news-letter-form" id="signup" action="subscribe.php" method="post">
<div class="input-fields">
<input required="" class="email-field ng-invalid-required" name="email" id="email" placeholder="Email Address" ng-required="true" type="email" >
<input required="" class="username-field ng-invalid-required" name="fname" id="fname" placeholder="First Name" ng-required="true" type="text" >
<input required="" class="password-field ng-invalid-required" name="lname" id="lname" placeholder="Last Name" ng-required="true" type="text" >
<input required="" class="web-field ng-invalid-required" name="wname" id="wname" placeholder="Website" ng-required="true" type="website" >
<button class="right inputnew sign-up-button text-scope" type="submit" ng-click="signup()" translate="" >Sign Up</button>
</div>
</form>
<div id="response"></div>
<form class="formee news-letter-form" id="signup2" action="subscribe.php" method="post">
<div class="input-fields">
<input required="" class="email-field ng-invalid-required" name="email" id="email" placeholder="Email Address" ng-required="true" type="email" >
<input required="" class="username-field ng-invalid-required" name="fname" id="fname" placeholder="First Name" ng-required="true" type="text" >
<input required="" class="password-field ng-invalid-required" name="lname" id="lname" placeholder="Last Name" ng-required="true" type="text" >
<input required="" class="web-field ng-invalid-required" name="wname" id="wname" placeholder="Website" ng-required="true" type="website" >
<button class="right inputnew sign-up-button text-scope" type="submit" ng-click="signup()" translate="" >Sign Up</button>
</div>
</form>
<div id="response"></div>
You are handling only the first form. You should handle and the second form ..
$("#signup2").validate({
// if valid, post data via AJAX
submitHandler: function(form) {
$.post("subscribe.php", { fname: $("#fname").val(), lname:
..
I am trying to get my form to submit using http post, but when I fill the form out and press the continue button nothing happens. The http post isn't even fired in the networks tab of Chrome. Any ideas? My code is below:
my angular controller:
$routeProvider.when('/member-reg',{
templateUrl: 'index.php/routers/member_reg',
controller: 'registerAsMember'
});
app.factory("memberRegistrationService", function($http, $location) {
return {
register: function(member_info) {
return $http({
method: 'POST',
url: 'index.php/home/member_reg',
data: { member_info: member_info }
});
}
}
});
app.controller('registerAsMember', function($http, $location, $scope, memberRegistrationService) {
$scope.member_info = { username: "", password: "",
firstname: "", lastname: "", email: "" };
$scope.member_reg_submit = function() {
memberRegistrationService.register($scope.member_info).success(function(data) {
if(data.success == true) {
model('hello world');
}
}).error(function(data) {
alert('error');
});
}
});
My view:
<div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Register as a Member ...</h4>
Fill out the form below and press continue when finished.
</div>
<form ng-submit="member_reg_submit">
<label>Key in your desired username below:</label>
<input autofocus ng-model="memberinfo.username" style="width: 200pt" type="text" placeholder="Username..." required><br>
<label>Key in your desired password:</label>
<input ng-model="memberinfo.password" style="width: 200pt" type="password" placeholder="Password..." required><br>
<label>Enter your firstname:</label>
<input ng-model="memberinfo.firstname" style="width: 200pt" type="text" placeholder="Firstname..." required><br>
<label>Type in your lastname below:</label>
<input ng-model="memberinfo.lastname" style="width: 200pt" type="text" placeholder="Lastname..." required><br>
<label>Your email address:</label>
<input ng-model="memberinfo.email" style="width: 200pt" type="text" placeholder="Email..." required><br>
<button type="submit" class="btn">Continue</button><br><br>
</form>
Add ng-click="member_reg_submit()" in Continue
Remove ng-submit="member_reg_submit" from
Updated Code :
<form>
<label>Key in your desired username below:</label>
<input autofocus ng-model="memberinfo.username" style="width: 200pt" type="text" placeholder="Username..." required><br>
<label>Key in your desired password:</label>
<input ng-model="memberinfo.password" style="width: 200pt" type="password" placeholder="Password..." required><br>
<label>Enter your firstname:</label>
<input ng-model="memberinfo.firstname" style="width: 200pt" type="text" placeholder="Firstname..." required><br>
<label>Type in your lastname below:</label>
<input ng-model="memberinfo.lastname" style="width: 200pt" type="text" placeholder="Lastname..." required><br>
<label>Your email address:</label>
<input ng-model="memberinfo.email" style="width: 200pt" type="text" placeholder="Email..." required><br>
<button type="submit" class="btn" ng-click="member_reg_submit()" >Continue</button><br><br>