I'm submitting a simple form by using jquery post method but when I call the post method I'm getting this wierd error message
VM1233 jquery.min.js:2 Uncaught TypeError: (h.dataType || "*").toLowerCase is not a function
at Function.ajax (VM1233 jquery.min.js:2)
at Function.w.(:8000/Marketing/anonymous function) [as post] (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:78094)
at submitLeadDetails (VM1235 main.js:10)
at HTMLFormElement.onsubmit (index.html?name=haskdaskd&Contact=harish+kumar&phone=9030590437&date=12%2F04%2F2018&Time=09%3A00:33)
this is the code that I have written :
var submitLeadDetails = function(){
console.log('Post function executed');
var LeadDetailsObject = {};
LeadDetailsObject.schoolName = document.getElementById('name').value;
LeadDetailsObject.contactPerson = document.getElementById('contact').value;
LeadDetailsObject.contactPersonPhoneNumber =document.getElementById('phone').value;
LeadDetailsObject.date = document.getElementById('date').value;
LeadDetailsObject.time = document.getElementById('time').value;
console.log(LeadDetailsObject);
$.post('http://localhost:8000/webapi/leads', LeadDetailsObject, function(data){
console.log('Success');
console.log(data);
$('#leadDetailsForm')[0].reset();
}, function(error){
console.log('Error');
console.log(error);
})
}
<form id="leadDetailsForm" onsubmit="submitLeadDetails()">
<div class="form-group">
<label for="name">School Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter School Name" name="name" required>
</div>
<div class="form-group">
<label for="contact">Contact Person:</label>
<input type="text" class="form-control" id="contact" placeholder="Enter Contact Person Name" name="Contact" required>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="number" class="form-control" id="phone" placeholder="Enter Contact Person's Phone Number" name="phone" required>
</div>
<!--<div class="form-group">-->
<!--<label for="address">Address:</label>-->
<!--<textarea class="form-control" rows="5" placeholder="Enter School Address" id="address" required></textarea>-->
<!--</div>-->
<div class="form-group col-sm-6" style="padding-left: 0;">
<label for="date">Date:</label>
<input type="text" class="form-control" id="date" placeholder="Enter Date" name="date" required>
</div>
<div class="form-group col-sm-6">
<label for="time">Time:</label>
<input type="text" class="form-control" id="time" placeholder="Enter Time" name="Time" required>
</div>
<button type="submit" class="btn btn-lg pull-right" style="margin-top: 3%; background-color: #2a2c30; color:#fff;" >
Submit
</button>
</form>
The error says you are passing the wrong argument to the .post() method. The fourth argument should be dataTypeand not a callback.
See the docs: https://api.jquery.com/jquery.post/
In your case you could make use of .done() and .fail() to handle the status of the request:
var submitLeadDetails = function(){
console.log('Post function executed');
var LeadDetailsObject = {};
LeadDetailsObject.schoolName = document.getElementById('name').value;
LeadDetailsObject.contactPerson = document.getElementById('contact').value;
LeadDetailsObject.contactPersonPhoneNumber =document.getElementById('phone').value;
LeadDetailsObject.date = document.getElementById('date').value;
LeadDetailsObject.time = document.getElementById('time').value;
console.log(LeadDetailsObject);
$.post('http://localhost:8000/webapi/leads', JSON.stringify(LeadDetailsObject))
.done(function(data){
console.log('Success');
console.log(data);
$('#leadDetailsForm')[0].reset();
})
.fail(function(xhr, status, error) {
console.log('Error');
console.log(error);
});
}
jQuery tries to lowercase the values probably because of some checks. But when it tries to lowercase a number, it crashes. You have type="number" in your inputs. Probably that causes the error
Related
I am doing a simple register form, using the existing register logic of AuthController#register
The request hits the controller successfully, but when I viewed validation errors in console log,showed
"[Vue warn]: Error in v-on handler: "ReferenceError: errors is not defined"
this is my vue code
<script>
export default {
props:{errors:Object},
name:"Register",
data(){
return {
name:"",
email:"",
password:"",
image:"",
};
},
methods:{
selectimage(e){
this.image=e.target.files[0];
},
register(){
var data=new FormData();
data.append('name',this.name);
data.append('email',this.email);
data.append('password',this.password);
data.append('image',this.image);
this.$inertia.post('/register',data);
console.log(errors.name);
},
},
};
</script>
And this is html form
<form #submit.prevent="register">
{{form}}
<div class="form-group">
<label for="name">Enter Name</label>
<input type="text" class="form-control border border-danger" id="name" v-model="name">
<small class="text text-danger">Please Enter</small>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" v-model="email">
</div>
<div class="form-group">
<label for="password">password</label>
<input type="text" class="form-control" id="password" v-model="password">
</div>
<div class="form-group">
<label for="image">choose image</label>
<input type="file" class="form-control" id="image" #change="selectimage">
</div>
<button class="btn btn-sm btn-danger float-right">submit</button>
</form>
this is controller
public function postRegister(Request $request)
{
$request->validate([
'name'=>'required',
'email'=>'required',
'password'=>'required|min:8',
'image'=>'image|mimes:jpg,jpeg,png',
]);
}
(function() {
var app = angular.module('snc', []);
app.controller("QueryController", function($http) {
this.query = {};
this.sendQuery = function(contact) {
contact.querys.push(this.query);
this.query = {};
};
});
})();
<form name="queryForm" ng-controller="QueryController as queryCtrl" ng-submit="queryForm.$valid && queryCtrl.sendQuery(contact)" novalidate>
<blockquote>
<b>Name: {{queryCtrl.query.name}}</b><br/>
<b>Mobile: {{queryCtrl.query.mobile}}</b><br/>
<b>Eamil: {{queryCtrl.query.email}}</b><br/>
<b>Message: {{queryCtrl.query.message}}</b><br/>
</blockquote>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="queryCtrl.query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div class="form-group">
<label for="Mobile">Mobile:<span class="required">*</span></label>
<input type="number" ng-model="queryCtrl.query.mobile" class="form-control" id="mobile" placeholder="Enter Your Mobile Number" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" ng-model="queryCtrl.query.email" class="form-control" id="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<label for="Message">Message:</label>
<textarea type="text" ng-model="queryCtrl.query.message" class="form-control" id="name" placeholder="Enter Your Message" rows="4" required></textarea>
</div>
<div> reviewForm is {{queryForm.$valid}} </div>
<button type="submit" class="btn btn-snc">Submit</button>
</form>
I'm Using ng-app="snc" and Angularjs version 1.6, this is a simple contact form please check it and give me some advice. i want to send contact form into php page, where i use form data for send email for query and add it into database.
Try this code sample code
(function() {
var app = angular.module('snc', []);
app.controller('QueryController', function($scope, $http) {
$scope.query = {};
$scope.submit = function() {
console.log($scope.query);
$http({
method: "POST",
url: "", //php url
data: {
query
}
}).then(function mySuccess(response) {
console.log(response);
}, function myError(response) {
console.log(response);
});
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="fromvalue" ng-app="snc" ng-controller="QueryController">
<b>Name: {{query.name}}</b><br/>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div> reviewForm is {{fromvalue.$valid}} </div>
<button type="submit" ng-click="submit()" class="btn btn-snc">Submit</button>
</form>
I have this form and I tried to make a "onsubmit" that when I click submit it checks if the "email" is = to "cemail" and if username was taken before or not i got this so far
<form class="form-horizontal" action="#" method="post" onsubmit="return ValidationEvent()">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
Javascript code:
<script>
function ValidationEvent() {
var email = document.getElementById("email").value;
var username = document.getElementById("username").value;
var cemail = document.getElementById("cemail").value;
// Conditions
if (email.match != cemail.match) {
alert("Your email doesn't match!");
}
if(mysqli_num_rows($result) != 0)
{
alert("Username already taken!");
}
else {
alert("Thank you");
}
}
</script>
Am I approaching the function in the wrong way is there another easier way and is it okay i put an sql statement in my java script ?
First, don't use inline HTML event handling attributes (like "onsubmit") as they create "spaghetti code", anonymous global event handling wrapper functions and don't conform to the modern W3C DOM Event handling standard.
Second, your .php results have to be gotten from somewhere. You'll need to put a call into that file for its results before you can use them.
Next, you were using the .match() string method incorrectly to compare the emails against each other. All you really need to do is compare the values entered into the email fields (it's also a good idea to call .trim() on form values to strip out any leading or trailing spaces that might have been inadvertently added).
Once you restructure your code to use standards, the JavaScript will change as follows (FYI: This won't work in the Stack Overflow snippet environment because form submissions are blocked, so you can see a working version here):
// When the DOM is loaded:
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you will need:
var frm = document.getElementById("frm");
// Don't set variables to the values of DOM elements,
// set them to the DOM elements themselves so you can
// go back and get whatever properties you like without
// having to scan the DOM for them again
var email = document.getElementById("email");
var username = document.getElementById("username");
var cemail = document.getElementById("cemail");
// Set up a submit event handler for the form
frm.addEventListener("submit", validationEvent);
// All DOM event handling funcitons receive an argument
// that references the event they are responding to.
// We need that reference if we want to cancel the event
function validationEvent(evt) {
// Conditions
if (email.value.trim() !== cemail.value.trim()) {
alert("Your email doesn't match!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
return;
}
// You need to have already gotten the "mysqli_num_rows($result)" value
// from your .php file and saved it to a variable that you can then check
// here against "!=0"
if(mysqli_num_rows($result) != 0) {
alert("Username already taken!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
} else {
alert("Thank you");
}
}
});
<form class="form-horizontal" id="frm" action="#" method="post">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
For checking the emails with email & cemail use
email.localeCompare(cemail)
This will check the string comparison betwwen two emails
And for mysqli_num_rows , is not defined any where in javascript, so we will get the undefined error in console, so need to write a different funnction with that name.
First give a name and an action to your form
<form class="form-horizontal" id="myform" action="chkValues.php" method="post" >
....
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
....
</form>
Then put this script at the bottom
<script>
$('#myForm').on("sumbit", function(){
// cancel the original sending
event.preventDefault();
$.ajax({
var form = $(this);
var action = form.attr("action"),
method = form.attr("method"),
data = form.serialize();
})
.done: function(data) // is called wehn the call was okay
{
if( data.substr(0, 5) == "Error"){
alert(data); // sent the sting of the "error message" begining with "Error"
}else{
top.location.href = data; // sent the sting of the "success page" when all was okay and data are saved in the database
}
}
.fail(function() {
alert( "Error: Getting data from Server" );
})
});
</script>
in the php file check the values an return an error if something went wrong.
<?php
if(!isset($_POST['email']) || !isset($_POST['cemail'])){
die("Error: Please fill out both email fields.");
if($_POST['email'] != $_POST['cemail'] ){
die("Error: The Email adresses do not match.");
}
here do what you want to do with the data.
when finish just send the new url
echo "success.html";
}
?>
I was trying to print form values on submit to console.log to test. But getting a undefined message. Can't figure out where I am going wrong exactly. I have gone through various answers on StackOverflow but still no luck. Here is the code -
HTML
<form class="form-inline">
<label class="required">* required </label>
<div class="form-group">
<input type="text" class="form-control inputArea" id="fullname" placeholder="Full Name *">
</div>
<div class="form-group">
<input type="email" class="form-control inputArea" id="email" placeholder="Email *">
</div>
<div class="form-group">
<input type="tel" class="form-control inputArea" id="phn" placeholder="Phone Number *">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
JavaScript
<script>
var formInput = document.querySelectorAll('#fullname, #email, #phn');
document.querySelector('form.form-inline').addEventListener('submit', function (e) {
e.preventDefault();
console.log(formInput.value);
});
</script>
You are getting undefined because forminput is not a single object it has multiple objects which doesn't have property value.
You can get value by index like below
console.log(formInput[0].value);
You are querying the form before the values are inputted. The first line of your script should be inside the event listener:
<script>
document.querySelector('form.form-inline').addEventListener('submit', function (e) {
e.preventDefault();
var formInput = document.querySelectorAll('#fullname, #email, #phn');
console.log(formInput.value);
});
</script>
The values are being query-ed on page-load. You need to wait until the user submits before you check the values.
You can try this. Hope it helps!
function myFunction(){
var a = document.getElementById("fullname").value;
var b = document.getElementById("email").value;
var c = document.getElementById("phn").value;
console.log(a);
console.log(b);
console.log(c);
return false;
}
<form class="form-inline" onsubmit = " return myFunction()">
<label class="required">* required </label>
<div class="form-group">
<input type="text" class="form-control inputArea" id="fullname" placeholder="Full Name *">
</div>
<div class="form-group">
<input type="email" class="form-control inputArea" id="email" placeholder="Email *">
</div>
<div class="form-group">
<input type="tel" class="form-control inputArea" id="phn" placeholder="Phone Number *">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
I am trying to save user details like first name, last name and etc.along with user's profile image via Ajax calls. But I am getting error like "Uncaught TypeError: Illegal invocation" in console.So I searched over the network, and they said to add .value and the error is resolved. But now the form details are not submitted. Can any one help me to resolve this problem . Thanks in advance.
HTML Form :
<form id="userRegisterform" name="userRegisterform" method="post">
<fieldset class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter First Name" required="true">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Enter Last Name" required="true">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">UserName</label>
<input type="text" class="form-control" id="exampleInputEmail1" name="name1" placeholder="Enter UserName" required="true">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" name="email1" placeholder="Enter email" required="true">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="password1" placeholder="Password" required="true">
</fieldset>
<div class = "form-group">
<label><?php __('Select Files:', 'cvf-upload'); ?></label>
<input type="file" name="file[0]" id="file" class="profileImage" required ="true" accept="image/*" >
</div>
<input type="submit" class="btn btn-primary" name="submit" value="Submit" id="userRegister"/>
</form>
jQuery Ajax Code:
<script>
$(document).ready(function () {
$("#userRegisterform").validate({
rules: {
name1: {
required: true
},
email1: "required",
password1 : "required"
},
messages: {
name1: {
required: "Please provide your user name"
},
email1: "Please provide your email",
password1 : "Please enter password"
},
submitHandler: function (form) {
var ajaxData = new FormData();
$.each($(':input', form), function (i, fileds) { // appending all the form data
ajaxData.append($(fileds).attr('name'), $(fileds).val());
});
ajaxData.append('action', 'athleteRegister');
$.each($("input[type=file]"), function (i, obj) { // appending all the file uploads data
$.each(obj.files, function (j, file) {
ajaxData.append('file[' + i + ']', file);
})
});
console.log(ajaxData);
var url = "http://localhost/wordpress/wp-admin/admin-ajax.php";
var data = {
formData1:ajaxData.value,
action:'userRegistersave'
};
processData:false,
$.post(url,data,function(response){
alert(response);
});
}
});
});
</script>
My functions.php
function userRegistersave() {
if (isset($_REQUEST)) {
print_r($_REQUEST);exit();
}
wp_die();
}