change subject of formspree with ajax - javascript

I'm using formspree within an angular app. Everything is working except I can't seem to change the subject of the email.
Html...
<form id="bookingForm" action="https://formspree.io/your#email.com"
method="POST">
<input type="text" name="{{client.name}}">
<input type="{{client.email}}" name="_replyto">
<input type="hidden" name="_subject" value="Request from {{client.name}}">
<!-- some other info -->
<input type="submit" value="Send">
</form>
JS...
$bookingForm = $('#bookingForm');
$bookingForm.submit(function(e) {
e.preventDefault();
$.ajax({
url: '//formspree.io/your#email.com',
method: 'POST',
data: {
client: $scope.client.name,
email: $scope.client.email,
phone: $scope.client.phone,
// some other info
},
dataType: 'json',
});
});
The _replyto seems to be working but _subject is not.

Add '_subject' to your post request and remove the name attribute from the subject input field:
$bookingForm = $('#bookingForm');
$bookingForm.submit(function(e) {
e.preventDefault();
$.ajax({
url: '//formspree.io/your#email.com',
method: 'POST',
data: {
client: $scope.client.name,
email: $scope.client.email,
phone: $scope.client.phone,
_subject: "Text here"
},
dataType: 'json',
});
});

Related

how to send form data in ajax with multiple files without refreshing?

in my form code there is text input, checkbox input, file input type...etc,
everything working fine except the file input it's only taking one value ( multiple files upload isn't sending through ajax call ) how can i send arrays inside the serialize() function ?
Code :
<form action="#" id="postAdd" enctype="multipart/form-data">
<input accept=".png,.jpg,.jpeg" type="file" class="form-control-file d-none" id="file-upload" name="file[]" multiple required>
<input autocomplete="off" type="text" class="form-control bg-white" name="discName[]">
<button id="postAdbtn" class="btn btn-primary d-block mt-2">Submit</button>
</form> $(document).ready(function() {
$('#postAdbtn').click(function() {
var form = $('#postAdd').serialize();
$.ajax({
url: 'add-product-done.php',
method: "POST",
data: {
form: form
},
success: function(data) {
$('.fetchData').html(data);
}
})
});
});
one more thing, how can i get the files in PHP ?
and thanks
Can you try something like this?
var form = new FormData($("postAdd"));
$.ajax({
url: 'add-product-done.php',
data: form,
contentType: "multipart/form-data",
type: 'POST',
success: function(data){
console.log(data);
},
error: function(err){
console.error(err);
}
});

How do I detect submitted button with ajax and php?

I have a form on my front-end and when the submit button is clicked I want to send the details to my get-emp.php file without page reload.
The code looks like this:
index.html
<form class="form-emp-details hide" action="">
<div class="form-group">
<label for="">First name:</label>
<input type="text" class="form-control input-emp-firstname" name="input_emp_firstname">
</div>
<div class="form-group">
<label for="">Last name:</label>
<input type="text" class="form-control input-emp-lastname" name="input_emp_lastname">
</div>
<div class="form-group">
<label></label>
<button type="submit" class="btn btn-default btn-submit-1" name="submit_emp_details">Save</button>
</div>
</form>
custom.js
$(".form-emp-details").("submit", function(e) {
var input_first_name = $(".input-emp-firstname").val();
$.ajax({
type: "POST",
url: "get-emp.php",
data: {
input_emp_firstname:input_first_name,
},
success: function(data) {
console.log(data)
},
error: function(xhr,status,error) {
console.log(error);
}
});
});
get-emp.php
if(isset($_POST['submit_emp_details'])) {
$firstname = $_POST['input_emp_firstname'];
echo $firstname;
}
I want to display the submitted form data on get-emp.php file but it seems that I am not able to detect the submitted button and echo the form data on.
My goal is to capture all form data with a single request variable or identifier $_POST['submit_emp_details']
Any help is greatly appreciated. Thanks
$("#MyformId").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function(data)
{
// success..
}
});
});
You passing the POST data of firstname and lastname by:
input_emp_firstname
input_emp_lastname
so, you need to change the $_POST['submit_emp_details'] to $_POST['input_emp_firstname'] on file get-emp.php to
<?php
if(isset($_POST['input_emp_firstname'])) {
$firstname = $_POST['input_emp_firstname'];
echo $firstname;
}
Edit 2:
$.ajax({
type: "POST",
url: "get-emp.php",
cache: false,
data: {
submit_emp_details: {
input_emp_firstname:input_first_name,
input_emp_lastname:input_last_name
}
},
success: function(data) {
console.log(data)
},
error: function(xhr,status,error) {
console.log(error);
}
});

Uncaught SyntaxError: Unexpected identifier using Submit Handler

I am Creating validation script and ajax call. I face the problem is that
alert message is not working in if condition
I can't figure out what's going on here, when I run the script, in Chrome it says:
Uncaught SyntaxError: Unexpected identifier
Below is my code :
$("#myCA-Form").validate({
rules:{
field1:"required",
city:"required",
email:{
required:true,
email:true
},
phone:{
required:true,
number: true,
minlength:9,
maxlength:10
}
},
messages:{
name:"Please enter your username..!",
email:"Please enter your email..!",
phone:"Enter your mobile no"
},
submitHandler: function(form) {
var formData = $(form).serialize();
var id = $('#product_id2').val();
var name = $('#field1').val();
$.ajax({
url: "https://eaxmple.co.in/test.aspx?"+formData,
type: "POST",
cache: false,
dataType: "jsonp",
crossDomain: true,
data: {formd : formData },
success: function(data) {
}
});
if(id=='100105')
{
alert("sdfsd");
document.getElementById("msg").innerHTML='submit Successfully!!!';
}
}
});
There is no problem in your code. its working perfectly. I hope the problem is somewhere other
This is the exact copy of your code, with added HTML code
$("#myCA-Form").validate({
rules:{
field1:"required",
city:"required",
email:{
required:true,
email:true
},
phone:{
required:true,
number: true,
minlength:9,
maxlength:10
}
},
messages:{
name:"Please enter your username..!",
email:"Please enter your email..!",
phone:"Enter your mobile no"
},
submitHandler: function(form) {
var formData = $(form).serialize();
var id = $('#product_id2').val();
var name = $('#field1').val();
$.ajax({
url: "https://eaxmple.co.in/test.aspx?"+formData,
type: "POST",
cache: false,
dataType: "jsonp",
crossDomain: true,
data: {formd : formData },
success: function(data) {
}
});
if(id=='11')
{
alert("sdfsd");
document.getElementById("msg").innerHTML='submit Successfully!!!';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="myCA-Form">
<input name="field1" type="text"/>
<input name="city" type="text"/>
<input name="email" type="text"/>
<input name="phone" type="text"/>
<input value="11" id="product_id2" type="hidden"/>
<button class="save-post">Save Post</button>
</form>
You should not append formdata to the URL, if you want something like that you should be looking at GET method instead of POST. You might wanna read more about POST and GET.

Form ajax post data to php file [duplicate]

This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 5 years ago.
Hi i trying make form using ajax. But i get some problems to sending form vars to php file. I get error: Undefined index: name.
I check chrome dev tools and i see variable is sending. But when made echo json_encode i see in php file i get empty array. So i dont have any idea where i made misstake.
file Main.js
var name = $('#user_name').val();
var lname = $('#user_lastname').val();
function formLogin(name, lname)
{
$.ajax({ url: 'database/register.php',
data: {
'name' : name,
'lname' : lname
},
type: 'post',
dataType:'json',
success: function(data) {
alert(data);
}
});
}
Html form:
<form class="circleForm" id="registerForm">
Imię: <input type="text" id="user_name"><br>
Nazwisko: <input type="text" id="user_lastname">
<br>
<input class="btnCircle" type="button" id="submit" value="Przejdź dalej" onclick="formLogin(name, lname)">
</form>
Php Code:
$dane = $_POST;
echo json_encode($dane);
Chrome dev:
I just want figure how can i echo this variables(name,lname) in php file register.php
Version with serialize:
function formLogin() {
var dane = $('form').serialize();
$.ajax({
url: 'database/register.php',
data: {'dane': dane},
method: 'post',
success: function(data) {
console.log(data);
}
});
}
Then result console:
<pre class='xdebug-var-dump' dir='ltr'>
<small>D:\xampp\htdocs\szkola\database\register.php:8:</small>
<b>array</b> <i>(size=1)</i>
'dane' <font color='#888a85'>=></font> <small>string</small> <font color='#cc0000'>''</font> <i>(length=0)</i>
</pre>
jquery-3.2.1.min.js:4 XHR finished loading: POST "http://localhost/szkola/database/register.php".
But when i go to http://localhost/szkola/database/register.php
i get this:
D:\xampp\htdocs\szkola\database\register.php:8:
array (size=0)
empty
You need to change the way you define your variables in your Javascript and declare them inside your function, not outside :
function formLogin(){
var name = $('#user_name').val();
var lname = $('#user_lastname').val();
$.ajax({ url: 'database/register.php',
data: {
'name' : name,
'lname' : lname
},
type: 'post',
dataType:'json',
success: function(data) {
alert(data);
}
});
}
And you need to update your HTML the same way (formLogin() instead of formLogin(...,...)) :
<form class="circleForm" id="registerForm">
Imię: <input type="text" id="user_name"><br>
Nazwisko: <input type="text" id="user_lastname">
<br>
<input class="btnCircle" type="button" id="submit" value="Przejdź dalej" onclick="formLogin()">
</form>
Try using method instead of type.
The HTML:
<form class="circleForm" id="registerForm">
Imię: <input type="text" id="user_name" name="name"><br />
Nazwisko: <input type="text" id="user_lastname" name="lname"><br />
<input class="btnCircle" type="button" id="submit" value="Przejdź dalej" onclick="formLogin();">
</form>
The JavaScript:
function formLogin() {
// Serialize the form
var data = $('form').serialize();
// Ajax call
$.ajax({
url: 'database/register.php',
data: data,
method: 'post',
dataType: 'json',
success: function(data) {
console.log(data);
}
});
}
Also remember that you're requesting a JSON so you have to echo a json_encode($array) in your PHP file for a simple string will not be returned.

I'm trying to send multiple data using jquery and ajax to another page to check if a value is present in database or not

function checkAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'flatno='+$("#flatno").val(),
type: "POST",
success:function(data){
$("#flatno-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
<div>
<input name="block_id" type="hidden" id="block_id" value="somevalue">
</div>
<div id="frmCheckflatno">
<label>Flat Number:</label>
<input name="flatno" type="text" id="flatno" onBlur="checkAvailability()"><span id="flatno-availability-status"></span>
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>
Script sends the value flatno to check_availability.php and queries info from database. Now I need to send two values - flatno and blockno to check_availability.php so that I can check database using 2 constraints.
function checkAvailability() {
var flatnoValue = $("#flatno").val();
var blocknoValue = $("#block_id").val();
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'{flatno:flatnoValue,blockno:blocknoValue},
type: "POST",
success:function(data){
$("#flatno-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
<div>
<input name="block_id" type="hidden" id="block_id" value="somevalue">
</div>
<div id="frmCheckflatno">
<label>Flat Number:</label>
<input name="flatno" type="text" id="flatno" onBlur="checkAvailability()"><span id="flatno-availability-status"></span>
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>
Send an array to your backend:
<script>
function checkAvailability() {
$("#loaderIcon").show();
var fn = $("#flatno").val();
var bn = $("#blockno").val();
jQuery.ajax({
url: "check_availability.php",
data: {flatno: fn, blocno: bn},
type: "POST",
success: function (data) {
$("#flatno-availability-status").html(data);
$("#loaderIcon").hide();
},
error: function () {}
});
}
</script>
Of course is better to check is there any values in both fields before calling php script.

Categories