We Keep Coding

jquery formdata returns null in express req.files

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])

The Ajax in JQuery is not executing

I want to make two post requests to the back end, Flask. I successfully got the login request yesterday, because I can see the information printed in the browser console. But After adding the second click event, both are failed.
And the "login" post and "search" post request failed differently, because for the first I can see "clicked" in the console, but for the second nothing.
I also used request.get_data() and request.get_json(), but got nothing. I have used an easier way to get post request from Flask, like request.form. However, I am still very confused what's wrong with the code.
Thank you for offering help!
Below is the .js file
$(document).ready(function () {
// login, for sending the email and password
$(function () {
$("form#formLogin").on('click','button#buttonLogin', function () {
console.log('clicked');
$.ajax({
url: "http://127.0.0.1:5000",
type: "POST",
data: $('form#formLogin').serialize(),
contentType: 'json; charset=UTF-8',
cache: false,
success: function (response) {
console.log(response.d);
console.log("login info sent");
},
fail: function (response) {
console.log(response.d);
console.log("failed");
}
})
});
})
// search, for executing sql
$(function () {
$('form#formSearch').on('click', 'button#buttonSearch', function () {
console.log('begin sending select');
$.ajax({
url: "http://127.0.0.1:5000",
type: "POST",
data: $('form#formSelect').serialize(),
contentType: 'json; charset=UTF-8',
cache: false,
success: function (response) {
console.log(response.d);
console.log("search info sent");
},
fail: function (response) {
console.log(response.d);
console.log("failed");
}
})
});
})
})
Below is .html, the login part
<form id="formLogin" class="formLogin" method="post">
<h1 class="h3 mb-3 font-weight-normal">Please Login</h1>
<input type="hidden" name="post" class="form-control" value="login"/>
<label for="inputEmail" class="sr-only">Email:</label>
<input type="email" id="inputEmail" name="userEmail" class="form-control" placeholder="Email address" required autofocus/>
<label for="inputPassword" class="sr-only">Password:</label>
<input type="password" id="inputPassword" name="userPwd" class="form-control" placeholder="Password" required/>
<label for="buttonLogin" class="sr-only">Login:</label>
<button id="buttonLogin" class="btn btn-lg btn-primary btn-block" value="login">login</button>
</form>
Below is .html, the search part
<form id="formSearch" method="post">
<input type="hidden" name="post" class="form-control" value="select"/>
<div class="input-group mb-3 mt-4">
<label for="selectRecord" class="sr-only">SelectRecord:</label>
<input type="text" id="selectRecord" name="selectRecord" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" required autofocus/>
<div class="input-group-prepend">
<label for="buttonSearch" class="sr-only">Search:</label>
<button id="buttonSearch" name="buttonSearch" class="btn btn-outline-secondary search" value="search">Search</button>
</div>
</div>
<label for="checkBoxRegion" class="sr-only">Region:</label>
<input id="checkBoxRegion" name="checkBoxRegion" type="checkbox"> <span class="checkboxFontSize">Region</span>
<label for="checkBoxProductName" class="sr-only">ProductName:</label>
<input id="checkBoxProductName" name="checkBoxProductName" type="checkbox"> <span class="checkboxFontSize">Product Name</span>
<label for="checkBoxStoreName" class="sr-only">StoreName:</label>
<input id="checkBoxStoreName" name="checkBoxStoreName" type="checkbox">
<span class="checkboxFontSize">Store Name</span>
</form>

How to get string from html form and store to JSON?

I'm coding a signup website, the layout is finish with html and css but I don't know how to get the user name, email and password from the html code and combine them to create a JSON file to send to the server.
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="biker" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="biker#gmail.com" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="Register" id="registerbtn" />
</li>
<li>
<a class="signup__link" href="#">I am already a member</a>
</li>
</ul>
</div>
</form>
I heard using javascript and jquery can do this but I have not learned Javascript yet, so I do all the search but still no luck.

Did you try googling your case?
There are multiple similar treads on Stack Overflow too, e.g. https://stackoverflow.com/a/22195193/6108936
Long story short, if you add id to your form
<form action="#" id="myForm">
then you can simply serialize whole form. This requires includind jQuery though.
<script>
var formData = JSON.stringify($("#myForm").serializeArray());
$.ajax({
type: "POST",
url: "yourRoute",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"
});
</script>
Side note. As you have signup form there, I strongly suggest adding
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="subject" autofill="off" tabindex="-1" value="">
</div>
inside your form. Then, before validation (either before posting everything as JSON of already in backend) check if subject has content. If yes, congrats, you can avoid the spamming.
Why it works? Bots do not understand whenever the field is hidden and fills all the fields. Only exception when the spam is submitted by a real person, not a bot.
And, unless you have your project under firewall, trust me, you want to do this or any other bot prevention.

My Formspree contact form isn't sending out the email information

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()

Form to JSON with javascript and Ajax POST [LARAVEL]

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");
}