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

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

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

Related

How To Submit Two Forms With One Button?

Please I have these two forms below. The first is the form that submit it's data to my database after my customer buys my product and were redirected to the registration page where the form is, while the second form is the form that submit it's data to my getresponse autoresponder campaign.
Now only the first form is what I wanted to be visible, I don't want the second form to be visible and I want to use one button to submit the two forms at one time, please how will I do that?
Thanks!
<!--====================================================================
Form that submit to my database and register my customers after purchase
======================================================================-->
<form class="form-horizontal templatemo-contact-form-1" role="form" action="sold.php" method="post">
<input type="text" class="form-control" id="name" placeholder="Enter Your First Name Here..." name="fname" required><br>
<input type="text" name="lname" class="form-control" id="name" placeholder="Enter Your Last Name Here..." required><br>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email Here..." required><br>
<input type="text" name="phone" class="form-control" id="name" placeholder="Enter Your Phone Number Here..." required><br>
<input type="password" name="pword" class="form-control" id="website" placeholder="Enter Your Password Here..." required><br>
<input type="password" name="cpword" class="form-control" id="subject" placeholder="Re-enter Your Password Here..." required><br>
<input type="text" name="addrss" class="form-control" id="name" placeholder="Enter Your Address Here..." required><br>
<input type="submit" value="Register" class="btn btn-success pull-right">
</form>
<!--======================================================
Form that submit to my getresponse autoresponder campaign
========================================================-->
<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<input type="text" name="name" value="Enter your name here..." type=text style="width: 100%">
<input type="text" name="email" value="Enter your email here..." type=text style="width: 100%">
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="ljqOk" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://www.moneycreativesecret.com/spages/smf-sp1/"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="post" />
<input type="submit" value="100% Free Access" class="btn btn-success pull-right">
</form>

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

show custom messages in jquery validate engine

There are two fields username and password and I used validate[required] class.
<input id="username" name="username" class="validate[required] text-input" placeholder="Enter your username" type="text">
<input id="password" name="password" class="validate[required] text-input" placeholder="Enter your password" type="password">
jQuery("#loginForm").validationEngine('attach', {
promptPosition: "topRight",
scroll: false
});
Now when I click on the submit button it shows its standard messages, but I want to show my custom messages. What is the best way to do this?

Not sure why it wasn't working for you. Here is a working example.
Javascript
$("#formID2").validationEngine({'custom_error_messages' : {
'#text1' : {
'required': {
'message': "Why you no give name?"
}
}
}
});
HTML
<form id="formID2">
<label for="text1">Please enter your name:</label>
<input type="text" class="validate[required]" id="text1" />
</form>
https://jsfiddle.net/pt4tjdtd/

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

AngularJS HTTP POST not firing at all

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>

Develop Reference

JavaScript is the programming language of the Web.

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

Related

How To Submit Two Forms With One Button?

Angular - Use form post values in controller

show custom messages in jquery validate engine

multiple forms on one page posting data via ajax

AngularJS HTTP POST not firing at all

Categories

Resources