AngularJS HTTP POST not firing at all

AngularJS HTTP POST not firing at all - javascript

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>

Related

How to allow all character types into an input

Im attempting to limit what the user can enter in each input... Everything is working as planned except the nothing() function:
I want this function to allow ALL characters to be entered into the inputs where onKeyDown="nothing();". For some reason the ones within the nothing() function follow the same layout as username (which is text and numbers only).
please help it will be much appreciated. Thanks for your time..
<?php
session_start();
?>
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" onKeyDown="nothing()">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" onKeyDown="nothing()">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>
</body>
<footer>
<script>
function ValidateName() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateFname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateLname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateIGN() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function nothing() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z|^-,]/g, ''));
}) //IE
}
</script>
</footer>
</div>
</div>
</html>

Remove all onKeyDown="functionNameXXX();" from input tag.
The problem is you are registering event every time when input value changes.
I just modified your code and it worked well.
JS Code remove all html inline method and add two handlers one for username and second for other names nothing to do with password and email if you are not willing to validate them.
//for validating username
$('input[name="username"]').keyup( function (e,i) {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) ;
//for validating fname, lname and IGN
$('.name').keyup(function (){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
});
HTML remove onkeydown from all input and added class in fname, lname and IGN fields
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" class="name" >
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" class="name"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" class="name">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" >
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" >
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" >
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>

First of all your pattern for nothing is wrong (will throw error) ,
you said it will accept all charcter , so just remove the keyDown event no need for the nothing function ...
function ValidateName() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
function ValidateFname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateLname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateIGN() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
/*
function nothing() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z][^-,]/g, ''));
}) //IE
}
*/
input {display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>

Wrong parts:
You can't use this when you are using html inline event listeners.
$('input') means every input, which will bind same events to every input, causing duplication every times when you input text.
What should you do:
Try not to use inline event listeners.
This is more like an advice, but it makes your code harder to read and harder to manage. Try to bind events from JS.
Again, $('input') means literally every input in document, which will prevent you from making separate filters. You should select elements with more specific selectors, such as $("input[name='username']"). You can see various selectors from here : https://www.w3schools.com/cssref/css_selectors.asp
This will be your code :
$("input[name='username']").on('input', function(){
$(this).val( $(this).val().replace(/[^0-9A-Za-z]/g, ''));
})
$("input[name='fname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='lname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='ingame']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" name="fname">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" name="lname"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</div>
</form>
</body>
</html>

Passing object from javascript to PHP via AJAX, undefined variables in php?

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");
?>

How to send alert using inputted text

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>

Angular - Use form post values in controller

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

multiple forms on one page posting data via ajax

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:
..

Develop Reference

JavaScript is the programming language of the Web.

AngularJS HTTP POST not firing at all - javascript

Related

How to allow all character types into an input

Passing object from javascript to PHP via AJAX, undefined variables in php?

How to send alert using inputted text

Angular - Use form post values in controller

multiple forms on one page posting data via ajax

Categories

Resources