This is my html form submitting using jquery
<form target="_self" onsubmit="" action="javascript: postContactToGoogle()" method="post" onsubmit="">
<span id="form-error"><?php if(isset($_SESSION['alert'])){ echo $_SESSION['alert']; unset($_SESSION['alert']);} ?></span>
<div class="form-group">
<p class="no-margin bottom5">YOUR NAME (required)</p>
<input type="text" class="form-control" name="name" id="name" required>
</div>
<div class="form-group">
<p class="no-margin bottom5">YOUR EMAIL (required)</p>
<input type="email" class="form-control" name="email" id="email" required>
</div>
<div class="form-group">
<p class="no-margin bottom5">MESSAGE</p>
<textarea class="form-control" rows="5" id="message" name="message"></textarea>
</div>
<button class="btn btn-default" type="submit">Send</button>
<div style="width: 100%; display: block; float: right; padding-top: 15px;">
<div class="requestSubmited" style="display:none; text-align: center;">Your request has been sent!</div>
</div>
</form>
This is my jquery
function postContactToGoogle(){
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
$.ajax({
url: "https://docs.google.com/a/mapplinks.com/forms/d/1r3SISt7ocWE32s7LJxBOOteMeMV-JTy166pH87hxwF4/formResponse",
data: {"entry.2028011364" : name, "entry.1745855979" : email, "entry.919224434": message},
type: "POST",
dataType: "xml",
statusCode: {
0: function (){
alert("saved0");
//Success message
},
200: function (){
alert("saved");
//Success Message
}
}
});
}
This is my form and jquery which i have been using.Im getting response 0 but google form is not getting updated.Please help me in this
Just follow that guide:
https://wiki.base22.com/pages/viewpage.action?pageId=72942000
This will helps.
Related
so, i´m trying to send some information to database with AJAX/PHP but without success, i´ve seen some codes from here but they are not working and I just get this error
TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.
HTML
<form action="javascript:void;" id="putz" class="putz" method="POST" onsubmit="send()" enctype="multipart/form-data" >
<div class="box">
<input type="text" name="name" id="name" required>
<label>Name</label>
</div>
<div class="box">
<input type="text" name="email" id="email" required>
<label>Email</label>
</div>
<div class="box">
<input type="text" name="pass" id="pass" required>
<label>Password</label>
</div>
<div class="Box">
<p style="color: red; text-align: left; margin-left: 15px">Photo</p>
<input type="file" name="photo" style="margin-right: 140px; color: red;">
</div>
<button id="submit" type="submit">Submit</button>
</form>
And here is my ajax/javascript
</script>
<script type="text/javascript">
function send()
{
var name=document.getElementById( "name" );
var email=document.getElementById( "email" );
var pass=document.getElementById( "pass" );
$.ajax({
type: 'post',
url: 'send.php',
data: {
name:name,
email:email,
pass:pass,
},
});
}
</script>
and the send.php code
<?php
include_once('conn.php');
$name = $_POST['name'];
$email = $_POST['email'];
$pass = $_POST['pass'];
$photo = $_FILES['photo']['name'];
$tmp_name = $_FILES['photo']['tmp_name'];
move_uploaded_file($tmp_name, "img/foto_perfil/" . $photo);
$sql = "INSERT INTO user (name, email, photo, pass) VALUES ('$name', '$email','$photo', '$pass')";
mysqli_query($conn, $
You didn't have the JQuery library referenced prior to your
invocation of $.ajax().
You are referring to the actual HTML Elements as the data to pass
when you should be passing the values of those elements.
You also have trailing commas after the last key/value pair in your
data object and after the data key itself.
I would also rename any/everything that you named name as this can
cause conflicts with the Global window.name property.
(FYI) You aren't using the label element correctly. You either wrap
it around the form element that it is a label for or you give it a
for attribute with a value of the id of the form element that it
is a label for.
function send() {
// Get the values of the elements, not the elements themselves:
var userName = document.getElementById( "userName" ).value;
var email = document.getElementById( "email" ).value;
var pass = document.getElementById( "pass" ).value;
$.ajax({
type: 'post',
url: 'send.php',
data: {
userName: userName,
email: email,
pass: pass
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" id="putz" class="putz"
method="POST" onsubmit="send()" enctype="multipart/form-data" >
<div class="box">
<input type="text" name="userName" id="userName" required>
<label for="userName">Name</label>
</div>
<div class="box">
<input type="text" name="email" id="email" required>
<label for="email">Email</label>
</div>
<div class="box">
<input type="text" name="pass" id="pass" required>
<label for="pass">Password</label>
</div>
<div class="Box">
<p style="color: red; text-align: left; margin-left: 15px">Photo</p>
<input type="file" name="photo" style="margin-right: 140px; color: red;">
</div>
<button id="submit" type="submit">Submit</button>
</form>
I have been using formspree on one of my sites. Everything was working fine at first then the form messages weren't sending out emails. I see the name and the message when the form is sent out, but the email just isn't registering. I looked at the shortcode and don't see anything on my end. Does anyone see the issue here?
I also have my "I'm Looking for a quote" wording overlapping my check box in most browsers. I put a p in and took it out, but I think that might be messing with the code. Anything thoughts on this as well?
Here's the HTML:
<form role="form" id="formspree" method="post">
<div class="form-group">
<label class="sr-only" for="contact-name">Your Name</label>
<input type="text" name="name" placeholder="Your Name" class="contact-email form-control" id="contact-email">
</div>
<input type="text" name="_gotcha" style="display:none">
<div class="form-group">
<label class="sr-only" for="contact-email">Email</label>
<input type="text" name="email" placeholder="Email" class="contact-email form-control" id="contact-email">
</div>
<div class="form-group">
<label class="sr-only" for="contact-message">Message</label>
<textarea name="message" placeholder="Message" class="contact-message form-control" id="contact-message" style="height: 168px;width:100%;"></textarea>
</div>
<div class="row">
<div class="col-sm-6" style="
text-align: right;
padding-right: 15px;
<div class="form-group"><label class="checkbox-inline"><input id="looking_for_quote" type="checkbox" value="quote">I'm Looking For A Quote</label>
</div>
</div>
<div class="col-sm-6">
<button type="submit" class="btn btn-lg"> Send Message</button>
</div>
</div>
</form>
and here is the script:
$(document).ready(function() {
// process the form
$('form[method=post]').submit(function(event) {
var email = "mat.mcsales#verizon.net";
if ($('#looking_for_quote').is(':checked')) {
email = "orders.mcsales#gmail.com";
}
$.ajax({
url: "https://formspree.io/" + email,
method: "POST",
data: {
message: $('textarea').val(),
from: $('input[name=name]').val(),
_reply: $('input[type=email]').val()
},
dataType: "json",
success: function() {
alert("Thanks! We'll get back to you soon.");
}
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
I figured it out I think.. I changed _reply: $('input[type=email]').val() to email: $('input[name=email]').val()
I have to pass form data with POST (converting it into JSON format), exploiting Javascript and Ajax in Laravel.
Basically, the data in the form have to became a json in order to pass it (with POST), to Controller class with a method able to uses the data.
I have a bootstrap form:
<form id="contactForm" action="#" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Now, to pass the data converting it in JSON I used:
<script>
var $contactForm = $('#contactForm');
$contactForm.submit(function(e) {
e.preventDefault();
$.ajax({
url: './getContact',
method: 'POST',
data: $(this).serialize(),
dataType: 'json',
success:success: function(data)
{
}
});
});
</script>
Exploiting Laravel routes.php
Route::post('./getContact', 'Controller#tryIt');
It is a correct way to use this service? (This due to the fact that I can't use the data form, like the POST doesn't provide any success).
Could you help me?
Thanks in advance
First you need to add the csrf token
Also try this way.
HTML
<form id="contactForm" action="#" method="post">
{!! csrf_field() !!}
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JS
<script>
$(document).ready(function() {
$(document).on('contactForm', '#reg-form', function(e) {
var data = $("#reg-form").serialize();
e.preventDefault();
$.ajax({
type: 'POST',
url: '{{url("/getContact")}}',
data: data,
success: function(data) {
alert("success");
console.log(data);
},
error: function(data) {
alert("error");
}
});
return false;
});
});
</script>
Route
Route::post('/getContact', 'Controller#tryIt');
In the tryit method u should return json response
public function tryit(Request $request){
//logic here
return response()->json("success");
}
I have written a code to pass values from a form using ajax but the values passed to another php page is not getting displayed there. I want to display the values passed in email.php file and send it as a mail to a email-id.
My script :
$(function() {
$('#send_message').on('click', function(e) {
var name = $('#exampleInputName1').val();
var email = $('#exampleInputEmail1').val();
var tel = $('#exampleInputTelephone1').val();
var cn = $('#exampleInputCountry1').val();
var message = $('#exampleInputMessage1').val();
e.preventDefault();
$.ajax({
type: 'post',
url: 'php/email.php',
data: {
name: name,
email: email,
tel: tel,
cn: cn,
message: message
},
success: function(data) {
alert(message);
}
});
});
});
html page:
<form name="contactForm1" id='contact_form1' method="post" action='php/email.php'>
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName1" placeholder="name">
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" id="exampleInputTelephone1" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputCountry1" placeholder="Country">
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage1" placeholder="message"></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div>
<!-- success message -->
<div id='mail_fail' class='error' style="display:none;">Sorry, error occured this time sending your message.
</div>
<!-- error message -->
</div>
<div class="form-group col-xs-8 padd" id="recaptcha2"></div>
<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="sendus" class="btn btn-lg costom-btn" value="send">
</div>
</form>
email.php
<?php
$temp = $_POST['name'];
echo $temp;
?>
Can anyone suggest how to do this ?
This is my javascirpt code
var form = $('#main-contact-form');
form.submit(function(event){
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
$.ajax({
url: $(this).attr('action'),
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 contact us. As early as possible we will contact you</p>').delay(6000).fadeOut();
});
});
I am not getting the field values post function is unable to fetch it
<div class="contact-form wow fadeIn" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="row">
<div class="col-sm-6">
<form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="row wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="col-sm-6">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control" placeholder="Name" required="required">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required="required">
</div>
</div>
</div>
<div class="form-group">
<input type="text" id="subject" name="subject" class="form-control" placeholder="Subject" required="required">
</div>
<div class="form-group">
<textarea name="message" id="message" class="form-control" rows="4" placeholder="Enter your message" required="required"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn-submit">Send Now</button>
</div>
</form>
</div>
This is my html code
It seems like you're just sending an empty ajax request.
You will need a method and the form data to send, for example:
$.ajax({
url: $(this).attr('action'),
type: 'post',
dataType: 'json', // <-- not sure if about this
data: form.serialize(),
beforeSend: function(){
...
Also see Submit a form using jQuery
Try setting the method to be "POST" and data in $.ajax, like this:
$.ajax({
method: "POST",
data: form.serialize(),
etc...
Also, it would help to see your PHP file.