I have this form:
<form action="/signup" method="post">
<div class="field">
<label class="label">{{ message }}</label>
</div>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Text input" value="joe">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link" type="submit">Submit</button>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
</form>
the oak server is saying i don't have a request body.
chrome dev tools is saying i do not have any Form Data.
Can anyone see why this form would post without form data?.
Request URL: https://localhost:8000/signup
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:8000
Referrer Policy: strict-origin-when-cross-origin
Specify the name attribute for your <input> element so itself and the value associated with it can be sent as name-value pairs.
Try defining <input> element like this instead:
<input name= "text-input" class="input" type="text" placeholder="Text input" value="joe">
so the request would look like this when the input would be, for e.g "myText" (shortened for demonstration purposes):
Request URL: https://localhost:8000/signup
Request Method: POST
text-input=myText
The MDN docs provide some insight on this too, you might want to visit for clarity.
Related
I have a form:
<form action="/index.html" method="POST" id="form">
<div id="namediv">
Full Name:
<input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"/ id="name" required/></div>
<div>
Date:
<input type="date"/>
</div>
<div id="emaildiv">
Email:
<input type="email" id="email" onblur="validateEmail()" required/><br>
<emailerror class="invisible">Incorrect email address!</emailerror>
</div>
<div id="urldiv">
Favorite webpage:
<input type="url" name="favurl"id="url" onblur="validateFavURL()" required/><br>
<urlerror class="invisible">Incorrect webpage!</urlerror>
</div>
<div>
<input type="button" value="Validate" onclick="validateAll()"/>
</div>
</form>
How can I trigger the name's pattern validity without submitting the form? I tried checkValidity() but didn't succeed. What is the exact syntax for it?
Not sure that I clearly understand the question. But the problem appears to be invalid regex. But the field does say "full name" so you'd likely need to allow a space as well.
<div>
<label>This field accepts upper and lowercase letters only</label>
</div>
<input type="text" pattern="[A-Z][a-z]+" id="name" required/>
I made a html form and want it to email the results to me, so I can evaluate the answer and later add it to my website. i want the email to somewhat look like this:
name: name
email: EMAIL
title: title
messige: massige
current program:
<!DOCTYPE html>
<html>
</body>
<form>
name<br>
<input type="text" name="name" id="user_input"><br>
email<br>
<input type="email" name="email" id="user_input"><br>
title<br>
<input type="text" name="title" id="user_input"><br>
message<br>
<textarea id="msg" name="user_message"></textarea>
</form>
<div class="button">
<button type="submit">submit</button>
</div>
</body>
</html>
If you don't want to use PHP/ Node.js/another technology, you can use the Formspree API. Your html would look like this:
<form action="https://formspree.io/your#email.com" method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
And you sign up for an account here: https://formspree.io/ . You will receive form submissions in your inbox.
Another alternative is to add a "mailto" link instead of the full contact form. This creates a link that opens the user's default email system (ie gmail/outlook/mail) and lets them email you from their inbox. The "%0D%0A%0D%0A" part creates a new line in the email:
<a href="mailto:YOUREMAIL#gmail.com?subject=Hello&body=Hello Owen,%0D%0A%0D%0AI'm interested in xyz thing on your website%0D%0A%0D%0A" target="_blank">
I have a contact form at codepen.io, but it is not working. I don't know where I must put the email address that messages will be sent to.
<form class="cf">
<div class="half left cf">
<input type="text" id="input-name" placeholder="Name">
<input type="email" id="input-email" placeholder="Email address">
<input type="text" id="input-subject" placeholder="Subject">
</div>
<div class="half right cf">
<textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
</div>
<input type="submit" value="Submit" id="input-submit">
</form>
Thanks in advance for any help.
If you just want a really basic form to send an email, you can set the form action to "mailto:user#email.com". This will open the users default mail client and populate the subject and body with the contents of inputs named "subject" and "body" in the form. The form itself won't send email though - you would need PHP for that.
I am trying to submit an array of objects using a regular form, without AJAX, and am finding that instead of the request body being parsed into an array of objects it just has many fields corresponding to the names of the objects.
I know that when submitting an array of primitives, you simply fill many inputs with the same name and it will populate; however, I cannot seem to wrap my head around applying this to complex objects.
My form code is fairly straightforward:
<div class="col-sm-9">
<div class="row">
<div class="col-md-6">
<div class="form">
<div class="form-group">
<label for="attachment[0].name" class="control-label">Name</label>
<input name="attachment[0].name" class="form-control" value="First Name" type="text">
</div>
<div class="form-group">
<label for="attachment[0].uri" class="control-label">URI</label>
<input name="attachment[0].uri" class="form-control" value="First URI" type="text">
</div>
<div class="form-group">
<label for="attachment[0].description" class="control-label">Description</label>
<textarea rows="4" value="First Description" name="attachment[0].description" class="form-control">First Description</textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form">
<div class="form-group">
<label for="attachment[1].name" class="control-label" >Name</label>
<input name="attachment[1].name" class="form-control" value="Second Name" type="text">
</div>
<div class="form-group">
<label for="attachment[1].uri" class="control-label">URI</label>
<input name="attachment[1].uri" class="form-control" value="Second URI" type="text">
</div>
<div class="form-group">
<label for="attachment[1].description" class="control-label">Description</label>
<textarea rows="4" name="attachment[1].description" class="form-control">Second Description</textarea>
</div>
</div>
</div>
</div>
I have made a sample repository demonstrating my issue; https://github.com/xueye/express-form-issue where you can just run node server.js, navigate to http://localhost:3000 and submit the entry; the request body will show up in your console, where it should show up as:
{ name: '',
type: '',
'attachment[0].name': 'First Name',
'attachment[0].uri': 'First URI',
'attachment[0].description': 'First Description',
'attachment[1].name': 'Second Name',
'attachment[1].uri': 'Second URI',
'attachment[1].description': 'Second Description' }
Is it possible to POST data in the way I am attempting to?
When you make a POST request, with a regular form or with JavaScript, you are sending formatted text to the server.
You can't send an array, but you can send a text representation of an array.
None of the data formats supported by forms come with a standard method to represent an array of data.
A pattern (introduced by PHP) uses square brackets to describe array-like structures.
This is similar to what you are using, except you sometimes use JavaScript style dot-notation. Switch to purely using square-brackets.
name="attachment[1][uri]"
… but you need to decode that data format on the server.
To do that in Express 4 use:
var bodyParser = require("body-parser");
var phpStyleParser = bodyParser.urlencoded({ extended: true })
and
app.post('/example', phpStyleParser, function(req, res) {
console.log(req.body);
res.json(req.body);
});
I'm using this code for a form in HTML:
<div class="login-wrapper">
<form>
<div class="popup-header">
<span class="text-semibold"><i class="fa fa-sign-in"></i> Logging in</span>
</div>
<div class="well">
<div class="form-group has-feedback">
<label>Username</label>
<input type="text" name="user" class="form-control" placeholder="e.g. andre#mail.de">
<i class="icon-users form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label>Password</label>
<input type="password" name="password" class="form-control" placeholder="Password">
<i class="icon-lock form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label>reCaptcha</label>
<div class="g-recaptcha" data-sitekey="..."></div>
</div>
<div class="form-actions text-right">
<input type="submit" id="loginbutton" name="loginbutton" value="Login" class="btn btn-primary">
</div>
</div>
</form>
</div>
<!-- /login wrapper -->
However, when I press the submit button, it does nothing but giving me a very strange url in my browser's address bar:
http://localhost/?user=&password=&g-recaptcha-response=&loginbutton=Login
Whenever I fill out fields, it kind of puts the content into the URL:
http://localhost/?user=peter%40griffin.com&password=somepass&g-recaptcha-response=&loginbutton=Login
The intended PHP code which should be run when pressing the button won't even run or load, since this HTML stuff apparently screws things up. I don't know what I have done the wrong way. Any suggestions?
In order for the form to submit somewhere else, you need to set the form elements action parameter.
<form action="some_file.php">
Alternatively, you can take the query string and append it directly to the file path to test your script.
http://localhost/some_file.php?user=peter%40griffin.com&password=somepass&g-recaptcha-response=&loginbutton=Login
Inside of some_file.php, you would then pull out each of the variables like
$user = $_GET['user'];
$password = $_GET['password'];
The very strange url is actually the result of a GET request.
The parameters are separated by an & so you have:
user=peter%40griffin.com&password=somepass&g-recaptcha-response=
"User" is the attribute name of your input and "peter%40griffin.com" is the value
First you need to send your form to an action using the attribute action="save.php", for example an pass the parameters using the method="POST", so the user can't see the values in the URL.
<form action="save.php" method="post">