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");
}
Related
I am using Bootstrap/jquery for client side. On server side I am using node.js and express
The form is as follows:
<form id="signupform" action="">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<hr>
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="number" class="form-control" id="contact" placeholder="Contact" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" required="required">
</div>
<div class="custom-file">
<label class="custom-file-label" for="cover">Profile Picture</label>
<input type="file" class="custom-file-input" id="cover">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg" id="sign-up">Sign Up</button>
</div>
</form>
My jquery is as follows:
$(document).ready(function(){
$("#sign-up").click(function(event){
event.preventDefault();
var formData = new FormData();
formData.append("username",$("#username").val())
formData.append("email",$("#email").val())
formData.append("contact",$("#contact").val())
formData.append("password",$("#password").val())
formData.append("cover",$("#cover")[0].files)
$.ajax({
url: "http://localhost:3000/users/",
type: 'POST',
data: formData,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
});
On server side, when I view the incoming request I see this:
body: {
username: 'Sree',
email: 'example#gmail.com',
contact: '1',
password: '1',
cover: '[object FileList]'
},
On the server side I am using express-fileupload, but the image is being sent in the body instead of req.files. How to send formData's file to req.files instead of body?
You should be passing a File object to append(), to access the file object use the prop method to get access to the FileList and take the item at the first index
formData.append("cover", $("#cover").prop('files')[0])
I have made a backend API that works perfect when using POSTMAN for testing the calls.
Error: cuenta_actual = post_data.get('cuenta')
AttributeError: 'NoneType' object has no attribute 'get'
127.0.0.1 - - [26/Nov/2018 18:10:48] "POST /transferencia HTTP/1.1" 500 -
I send data using json language. I have made a custom form for sending data to the backend using ajax but i got a NoneType error when getting the data on the backend. So i think the problem is on my frontend script.
$(document).ready(function() {
var frm = $('#formulario_datos');
frm.submit(function (e) {
frm.attr("disabled", "disabled");
e.preventDefault();
console.log(frm.serialize());
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
});
});
And this is my form on html
<form class="text-center border border-light p-5" id="formulario_datos" method="POST" action="transferencia">
<p class="h4 mb-4">Ingrese los datos</p>
<input type="text" id="cuenta" name="cuenta" maxlength="20" class="form-control mb-4" placeholder="Cuenta" required>
<input type="text" id="beneficiario" maxlength="35" name="beneficiario" class="form-control mb-4" placeholder="Beneficiario" required>
<div class="form-row mb-4">
<div class="col">
<select class="form-control" id="identificador" name="identificador">
<option value="V">V</option>
<option value="J">J</option>
<option value="E">E</option>
</select>
</div>
<div class="col">
<input type="text" id="identidad" name="identidad" class="form-control" placeholder="Identidad" maxlength="12" required>
</div>
</div>
<input type="email" id="email" name="email" class="form-control" placeholder="E-mail" maxlength="35" required><br>
<input type="text" id="monto" name="monto" class="form-control" placeholder="Monto" maxlength="9" required><br>
<input type="text" id="concepto" name="concepto" class="form-control" placeholder="Concepto" maxlength="35" required>
<button class="btn btn-info my-4 btn-block" id="transferir" type="submit">Enviar Pago</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()
here email should be showing null
That's why i am getting the error 412
and my code is look like
function Submit() {
var objectData =
{
"emailId": $("#emailId").val(),
"password": $("#password").val()
};
var objectDataString = JSON.stringify(objectData);
console.log(objectDataString);
localStorage.setItem("email",$("#emailId").val());
$.ajax({
type: "POST",
url: "http://localhost:8080/feasthunt/common/changePassword",
contentType: "application/json; charset=utf-8",
data: objectDataString,
dataType: "json",
success: function (data,status,xhr) {
console.log(objectDataString);
alert('success');
},
error: function () {
alert('error');
}
});
}
<div class="container">
<div class="col-md-4 col-md-offset-4">
<form role="form" id="form">
<div class="heading"><h3 class="text-center">Change Password</h3></div>
<div class="form-group" class="hidden" style="display:none">
<label for="emailId">EmailId</label>
<input type="emailId" class="form-control" id="emailId" placeholder="emailId" required />
</div>
<div class="form-group">
<label for="pwd">Old Password:</label>
<input type="password" class="form-control" id="password" placeholder="Old Password" required />
</div>
<div class="form-group">
<label for="pwd">New Password:</label>
<input type="password" class="form-control" id="password1" placeholder="New Password" required />
</div>
<div class="form-group">
<label for="pwd">Retype New Password:</label>
<input type="password" class="form-control" id="password2" placeholder="Retype New Password" required />
</div>
<input class="text-center" type="submit" class="btn btn-default" value="SAVE CHANGES" onclick="Submit()">
</form>
</div>
</div>
and above is HTML code
so how can i get email?
here the only problem is email
tell me one thing it is possible to get the email
so any one can answer this question
You don't need to stringify your object, you can just send objectData. If you really need the parameters as JSON, you will have to assign a variable name for it, like {data:JSON.stringify(objectData)}.
You're sending the old password, not the new one.
And, are your running the script at http://localhost:8080? It may not have access to http://localhost:8080/feasthunt/common/changePassword from file:// or from other domain.
Check http://localhost:8080/feasthunt/common/changePassword for errors. You may find useful the Network tab of the webkit's (Chrome/Opera/etc.) Inspector.
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.