I'm having some problems with Jquery/Ajax.
This is my code for the form :
<form class="form-auth-small" method="POST" id="form" enctype="multipart/form-data">
<div class="form-group">
<label for="signin-email" class="control-label sr-only">Email</label>
<input type="email" class="form-control" name="email" value="samuel.gold#domain.com" placeholder="Email">
</div>
<div class="form-group">
<label for="signin-email" class="control-label sr-only">Name</label>
<input type="text" class="form-control" name="name" value="John">
</div>
<div class="form-group">
<label for="signin-email" class="control-label sr-only">Phone</label>
<input type="text" class="form-control" name="phone" placeholder="938434928">
</div>
<div class="form-group">
<label for="signin-email" class="control-label sr-only"></label>
<input type="password" class="form-control" name="password" placeholder="****">
</div>
<div class="form-group">
<input name="image" type="file" />
</div>
<button type="submit" id="submit" class="btn btn-primary btn-lg btn-block">Register</button>
</form>
And this is my code to AJAX/Jquery:
<script>
$(".submit").on("click", function(e) {
var form = $("#form");
// you can't pass Jquery form it has to be javascript form object var formData = new FormData(form[0]);
console.log(formData);
$.ajax({
type: "POST",
url: '/user/signup/',
data: formData,
contentType: false, //this is requireded please see answers above processData: false, //this is requireded please see answers above //cache: false, //not sure but works for me without this error: function (err) { console.log(err);
success: function(res) {
console.log(res);
},
});
});
</script>
When i do console.log to check that from form i don't receive any value, and when i check in network i dont see any HTTP callback.
Your code doesn't work because you were using the class selector token . (dot) instead of the id selector token # hashtag. Further details can be found on the documentation
Change this instruction
$(".submit").on("click", function(e) // …
to
$("#submit").on("click", function(e) // …
You dont have submit class. You have id="submit"
$("#submit").on("click", function(e) {
Use this and it should work.
Also change type="submit" to type="button" or in your js code you need to add
e.preventDefault();
Related
When I click the submit button on my form my registration page refreshes without the form data being posted to my database.
My HTML markup looks like this -
<form id="reg">
<div class="form-group">
<label style="color: white; text-align:center" for="username">Username</label>
<input style="color: #C0C0C0;" type="text" name = "username" class="form-control" id="username" placeholder="Enter Username">
</div>
<div class="form-group">
<label style="color: white; text-align:center" for="password">Password</label>
<input style="color: #C0C0C0;" type="password" name = "password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label style="color: white; text-align:center" for="email">Email</label>
<input style="color: #C0C0C0;" type="text" name = "email" class="form-control" id="email" placeholder="Enter Email">
</div>
<button type="submit" name = "submit" class="btn btn-primary">Submit</button>
And my jquery code -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#reg').on('submit', function(e) {
e.preventDefault
$.ajax({
url:'script/register.php',
data: $(this).serialize(),
type:'POST',
success:function(results) {
$(".result").html(results);
}
});
});
</script>
I am not sure where I am going wrong. The page refreshes and I see the forms variables and values in the url bar. Any help with the above is greatly appreciated. Thanks
Check your syntax: preventDefault is a function.
$('#reg').on('submit', function(e) {
e.preventDefault() <---- Here fails
$.ajax({
url:'script/register.php',
data: $(this).serialize(),
type:'POST',
success:function(results) {
$(".result").html(results);
}
});
});
Replace your ajax code with the following
<script>
$('#reg').on('submit', function(e) {
$.ajax({
url:'script/register.php',
data: $(this).serialize(),
type:'POST',
success:function(results) {
$(".result").html(results);
}
});
return false;
});
</script>
You should return false to prevent page refresh.
I'm trying to submit a form using formspree I get two different errors. When I try to submit the form after I refresh the page I get an error on a new page saying
Cannot POST /Contact
When I go back and try to submit the form again I get an error in the console saying:
POST https://formspree.io/sheabathandbody#mail.com 400 () jquery.min.js:4
send # jquery.min.js:4
ajax # jquery.min.js:4
(anonymous) # main.js:8
dispatch # jquery.min.js:3
r.handle # jquery.min.js:3
I've used this method/code to submit my forms before so i don't know what the problem could be
Contact.vue form
<form id="contact" name="contact-form" method="post" action = "">
<fieldset>
<input placeholder="Your name" name="name" type="text" id="name" tabindex="1" required="required">
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="email" id="email" type="email" tabindex="2" required="required">
</fieldset>
<fieldset>
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." tabindex="5" name="message" id="message" required="required"></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="submit_btn" >Submit</button>
</fieldset>
</form>
Here's my main.js
(function($) {
$(window).on("load", function() {
// Contact form
var form = $("#contact");
form.submit(function(event) {
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
$.ajax({
url: "https://formspree.io/sheabathandbody#mail.com",
method: "POST",
data: $(this).serialize(),
dataType: "json",
beforeSend: function() {
form.prepend(
form_status
.html(
'<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>'
)
.fadeIn()
);
}
}).done(function(data) {
form_status
.html(
'<p class="text-success">Thank you for contacting us. We will be in touch.</p>'
)
.delay(3000)
.fadeOut();
});
});
});
})(jQuery);
Guess this has nothing to do with VueJS since it does not use at all vue in that chunks of code you shared, this is pure jQuery.
Said that, the problem sending the form was because you were not listening correctly to submit event.
form.on('submit', function () { ... })
On the other hand, ajax call is not working correctly; you should check documentation of formspree.io and correct it.
Check next code
$(document).ready(function() {
// Contact form
var form = $("#contact");
form.on('submit', function(event) {
alert('Hola hola. This is working now!');
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
$.ajax({
url: "https://formspree.io/sheabathandbody#mail.com",
method: "POST",
data: $(this).serialize(),
dataType: "json",
beforeSend: function() {
form.prepend(
form_status
.html(
'<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>'
)
.fadeIn()
);
}
}).done(function(data) {
form_status
.html(
'<p class="text-success">Thank you for contacting us. We will be in touch.</p>'
)
.delay(3000)
.fadeOut();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact" name="contact-form" method="post" action="">
<fieldset>
<input placeholder="Your name" name="name" type="text" id="name" tabindex="1" value="blah" required="required">
</fieldset>
<fieldset>
<input value="email#email.com" placeholder="Your Email Address" name="email" id="email" type="email" tabindex="2" required="required">
</fieldset>
<fieldset>
<input value="123123123" placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." tabindex="5" name="message" id="message" required="required">Damn</textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="submit_btn">Submit</button>
</fieldset>
</form>
You can create a method for example postNow.
methods: {
postNow() {
const link = "https://formspree.io/sheabathandbody#mail.com"
var data = new FormData();
data.append('_replyto',this.email)
data.append('message',this.message)
this.axios.post(link,data , {
headers: {
'Accept': 'application/json',
},
// body: data,
}).then(res =>{
console.log("response ===" ,res)
this.email = "" ;this.message=""; //don't forget to create your data
}).catch(err =>{
console.log(err)
});
}
},
And in your template you can use the simple HTML form with few tweaks ofc,
<form #submit.prevent="postNow" method="POST" >
<label>
Your email:
<input type="email" name="_replyto" v-model="email" />
</label>
<label>
Your message:
<textarea name="message" v-model="message"></textarea>
</label>
<button type="submit">Send</button>
</form>
I have problem with AJAX and jQuery. I write function for login to system, but it works only first time. Here is my code:
html in modal:
<form role="form" onsubmit=" return login()" method="post" action="" >
<div class="form-group">
<label for="userName"><span class="glyphicon glyphicon-user"></span>E-mail</label>
<input type="email" name="emailLogin" class="form-control" id="userName" placeholder="e-mail" required>
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-eye-open"><span>Password</label>
<input type="password" name="passLogin" class="form-control" id="password" placeholder="Password" required>
</div>
<button type="submit" class="btn btn-success btn-block">Login<span class="glyphicon glyphicon-log-in"></span></button>
</form>
here is jquery:
function login(){
login=document.getElementById('userName').value;
pass=document.getElementById('password').value;
var dataString="emailLogin="+login+"&passLogin="+pass;
$.ajax({
type: "POST",
url: "models/handler/KlientHandler.php",
cache: false,
data: dataString,
success: function(text){
if(text=='0'){
$("#loginError").removeClass('hidden');
}else{
$("#loginOk").removeClass('hidden');
$("#myModal").modal('hide');
$("#loginLi").html("<a id=\"user\">"+login+" (Profile)<span class=\"glyphicon glyphicon-user\"></span></a>");
$("#regLi").html(""+login+" (Logout)<span class=\"glyphicon glyphicon-log-out\"></span>");
}
}
});
return false;
}
You are overwriting your login function with a string.
function foo() {
alert('foo');
foo = function () {
alert('bar');
}
}
<a onclick="foo()">
click me!
</a>
See how the second click here causes a different alert? In your case you're replacing the function with a string instead of a function, causing a syntax error. Don't forget to var your variables.
var login=document.getElementById('userName').value;
var pass=document.getElementById('password').value;
The snippet tests your logic and there was a console error for your login and pass variables. I set them as 'var' and put your success logic in the 'error' section of the ajax request since I cannot reach your server, but it does create the logout button. Is that what you wanted?
function login() {
var login = document.getElementById('userName').value;
var pass = document.getElementById('password').value;
var dataString = "emailLogin=" + login + "&passLogin=" + pass;
$.ajax({
type: "POST",
url: "models/handler/KlientHandler.php",
cache: false,
data: dataString,
success: function(text) {
/* Success logic */
},
error: function() {
alert('Test - success logic');
$("#loginOk").removeClass('hidden');
//$("#myModal").modal('hide');
$("#loginLi").html("<a id=\"user\">" + login + " (Profile)<span class=\"glyphicon glyphicon-user\"></span></a>");
$("#regLi").html("" + login + " (Logout)<span class=\"glyphicon glyphicon-log-out\"></span>");
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" onsubmit=" return login()" method="post" action="" >
<div class="form-group">
<label for="userName"><span class="glyphicon glyphicon-user"></span>E-mail</label>
<input type="email" name="emailLogin" class="form-control" id="userName" placeholder="e-mail" required>
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-eye-open"><span>Password</label>
<input type="password" name="passLogin" class="form-control" id="password" placeholder="Password" required>
</div>
<button type="submit" class="btn btn-success btn-block">Login<span class="glyphicon glyphicon-log-in"></span></button>
</form>
<div id="loginLi"></div>
<div id="regLi"></div>
<div id="loginOk">Login OK</div>
I want to submit the form when a gcapcha was clicked. I tried submit with (my silly) jquery function that I know. But it's not work.
Here is my code (what's wrong with it).
Javascript
var verifyCallback = function(e) {
document.getElementById("form-contact").submit();
$.ajax({
type : 'POST',
url : 'inc/contact_sent.php',
data : $(this).serialize(),
success : function(data){
$("#contact").html(data);
}
});
return false;
};
var onloadCallback = function() {
grecaptcha.render("captcha", {
sitekey: "xxx",
callback: verifyCallback
})
};
HTML
<div id="contact" class="contact-form">
<form class="ajaxForm detailedsearch inline-style" method="post" id="form-contact">
<input type="text" class="form-control" name="cntc_name" placeholder="Your name" required>
<input type="email" class="form-control" name="cntc_email" placeholder="Your email" required>
<input type="text" class="form-control" name="cntc_tel" placeholder="Your phone">
<input type="text" class="form-control" name="cntc_subj" placeholder="Subject" value="<?=(isset($_POST['ptitle']))?"Queries for $_POST[ptitle]":""?>" required>
<textarea class="form-control" name="cntc_desc" rows="6" placeholder="Your Detail" required></textarea>
<div class="form-group">
<div id="captcha" class="center-captcha"></div>
<div id="gcaptcha" style="transform:scale(0.50);-webkit-transform:scale(0.50);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
<span class="text-danger">*Please complete the form to proceed.</span>
</div>
<!-- <button type="submit" class="btn btn-success btn-block"><i class="fa fa-envelope-o"></i> Submit Form</button> -->
</form>
</div>
You should do this....
//register a event for form submit
$( "form" ).submit(function( e ) {
e.preventDefault();
$.ajax({
type : 'POST',
url : 'inc/contact_sent.php',
data : $(this).serialize(), //serialize the form data
success : function(data){
$("#contact").html(data);
}
});
});
var verifyCallback = function(e) {
//submit form
$("#form-contact").submit();
return false;
};
var onloadCallback = function() {
grecaptcha.render("captcha", {
sitekey: "xxx",
callback: verifyCallback
})
};
At the moment I create a register "page". Here is the html code of the form
<form class="register_form" method="POST" action="insert.php">
<label class="label_register">Benutzername*:</label>
<div class="input_group">
<input class="input_register" id="register_username" name="username" type="text"/><span class="register_span">-</span>
</div>
<label class="label_register">Passwort*:</label>
<div class="input_group">
<input class="input_register" id="register_password_1" name="password" type="password"/><span class="register_span">-</span>
</div>
<label class="label_register">Passwort wdh.*:</label>
<div class="input_group">
<input class="input_register" id="register_password_2" name="password2" type="password"/><span class="register_span">-</span>
</div>
<label class="label_register">E-Mail Adresse*:</label>
<div class="input_group">
<input class="input_register" id="register_email" name="email" type="text"/><span class="register_span">-</span>
</div>
<button class="button button_register">Jetzt kostenlos registrieren</button>
<p class="register_hint">
* Pflichtfeld
</p>
</form>
Here is my jquery code
var username_bool = true;
var password_bool = true;
var email_bool = true;
$('.register_form').on('submit', function(){
if(username_bool == true && password_bool == true && email_bool == true){
$.ajax({
type: "POST",
url: "insert.php",
data: $(this).serialize(),
success: function(response){
console.log(response);
alert(response);
},
});
}
else{
alert("---");
}
return false;
});
And here is the php code
<?php
if(isset($_POST["username"]) && isset($_POST["password_1"]) && isset($_POST["email"])){
echo "response";
}
?>
Now I have sent the form, but the respone is empty. I use Firebug to debugg. What is my mistake? And I made also other mistakes?
Thanks for you help.
You seem to be checking for a field named password_1
isset($_POST["password_1"])
while it's named password
<input class="input_register" id="register_password_1" name="password" type="password"/><span class="register_span">-</span>
You'll have to make sure the name attribute matches the value you're checking
The problem i see is you check on isset($_POST["password_1"]) and that is not in the form as you named your password field "password"
<input class="input_register" id="register_password_1" name="password" type="password"/><span class="register_span">-</span>
you need to check using isset($_POST["password"])