I have a simple form, I just want to see which fields are sent to server. But in the server side, I only get the <input type="text"> field value. Why the server can't get the <select> and <input type="file" /> value?
HTML:
<form action="http://localhost:8100/" method="POST">
<div>
<select>
<option value="op1" selected="selected">Option1</option>
<option value="op2">Option2</option>
</select>
</div>
<div>
<input type="file" value="select a file"/>
</div>
<div>
<label>Your Hero: </label><input type="text" name="hero" />
</div>
<input type="submit" value="submit" />
</form>
Server:
var http = require("http");
http.createServer(function(req, res) {
if (req.method == 'POST') {
var body = '';
req.on('data', function (data) {
body += data;
console.log(body);
});
req.on('end', function () {
console.log("request data complete");
});
res.end("post request");
} else {
res.end("get request");
}
}).listen(8100);
Your select and file input elements are missing name attribute. All form elements you wish to be submitted must have a unique name attribute. name attribute will the identifier for the value of element when the data has been submitted through POST and GET.
You can read about it in the specs in here: http://www.w3.org/TR/html5/forms.html#naming-form-controls:-the-name-attribute
I think you just forgot the "name" attributes in this form elments. Add it and it should work. Cheers
Related
I'm fairly new to coding in HTML. After hours of searching the internet for a way to do this, I failed and so I'm here. I was setting up a CSRF Proof of concept page here, I want it to redirect to another page which will execute the payload that the CSRF had implemented.
<html>
<body>
<form action="https://website.com/action.php?" method="POST">
<input type="hidden" name="fullname" value="john" />
<input type="hidden" name="address" value="street 2, 32 ave" />
<input type="submit" value="Submit request" />
</form>
</body>
</html>
So after this form is submitted using, all it does is redirect to this page
But instead of that, I want it to redirect to another URL as well as submit that form.
For anyone else having the same problem, I figured it out myself.
<html>
<body>
<form target="_blank" action="https://website.com/action.php" method="POST">
<input type="hidden" name="fullname" value="Sam" />
<input type="hidden" name="city" value="Dubai " />
<input onclick="window.location.href = 'https://website.com/my-account';" type="submit" value="Submit request" />
</form>
</body>
</html>
All I had to do was add the target="_blank" attribute to inline on form to open the response in a new page and redirect the other page using onclick on the submit button.
You need to use the jQuery AJAX or XMLHttpRequest() for post the data to the server. After data posting you can redirect your page to another page by window.location.href.
Example:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = 'https://website.com/my-account';
}
};
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
in case you are generating the form programmatically you can add this script at the end of the form
<script type="text/javascript">document.forms["FormId"].submit();</script>
What you could do is, a validation of the values, for example:
if the value of the input of fullanme is greater than some value length and if the value of the input of address is greater than some value length then redirect to a new page, otherwise shows an error for the input.
// We access to the inputs by their id's
let fullname = document.getElementById("fullname");
let address = document.getElementById("address");
// Error messages
let errorElement = document.getElementById("name_error");
let errorElementAddress = document.getElementById("address_error");
// Form
let contactForm = document.getElementById("form");
// Event listener
contactForm.addEventListener("submit", function (e) {
let messageName = [];
let messageAddress = [];
if (fullname.value === "" || fullname.value === null) {
messageName.push("* This field is required");
}
if (address.value === "" || address.value === null) {
messageAddress.push("* This field is required");
}
// Statement to shows the errors
if (messageName.length || messageAddress.length > 0) {
e.preventDefault();
errorElement.innerText = messageName;
errorElementAddress.innerText = messageAddress;
}
// if the values length is filled and it's greater than 2 then redirect to this page
if (
(fullname.value.length > 2,
address.value.length > 2)
) {
e.preventDefault();
window.location.assign("https://www.google.com");
}
});
.error {
color: #000;
}
.input-container {
display: flex;
flex-direction: column;
margin: 1rem auto;
}
<html>
<body>
<form id="form" method="POST">
<div class="input-container">
<label>Full name:</label>
<input type="text" id="fullname" name="fullname">
<div class="error" id="name_error"></div>
</div>
<div class="input-container">
<label>Address:</label>
<input type="text" id="address" name="address">
<div class="error" id="address_error"></div>
</div>
<button type="submit" id="submit_button" value="Submit request" >Submit</button>
</form>
</body>
</html>
For me this one worked pretty well.
=> form target to blank (opens in a new tab) + input id to be recognized in Javascript + script that redirects.
<html>
<body>
<form target="_blank" action="https://website.com/action.php" method="POST">
<input type="hidden" name="fullname" value="Sam" />
<input type="hidden" name="city" value="Dubai " />
<input type="submit" value="Submit request" id="submitBtn"/>
<script>
document.getElementById("submitBtn").addEventListener("click", myFunction);
function myFunction() {
window.location.href="http://programminghead.com";
}
</script>
</form>
</body>
</html>
I found it here: https://programminghead.com/submit-button-redirect-to-another-page-in-html
I am trying to get an input value with AngularJS from input field to another hidden input field (in another form in the same page) so I can transmit it later if user presses submit on the other form.
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
//down the code...
<form name="whatever" method="post">
<input type="hidden" ng-bind="name" value="">
</form>
</div>
When I inspect the code after I put data in the visible input field all looks fine - so when I change the data inside the visible input I can see it in the hidden input too but I can't see it in the POST variable after I submit the form - I guess it's because it doesn't change the value field in the hidden input just what between the and .
How can I get this to work so that I change the value of an hidden input - but not what between the opening and closing input field?
Just Replace ng-bind with ng-value like:
<input type="hidden" ng-value="name">
(Credit to Himmet Avsar)
I see you answered yourself already. Anyway you should go for more "angular way" when handling your forms, letting angular do the "posting". For example:
HTML template
<body ng-controller="MainCtrl">
<form name="form1"
ng-submit="submit()">
Name: <input type="text"
class="form-control"
name="name"
ng-model="user.name"
required>
<div class="alert alert-warning"
ng-show="form1.name.$error.required">
Required field
</div>
<input type="submit"
class="btn btn-primary"
value="submit">
</form>
<div class="alert"
ng-class="{ 'alert-success': response.status === 200, 'alert-danger': response.status !== 200 }"
ng-show="response !== null">
DATA: {{ response.data }}<br>
HTTP {{ response.status }} {{ response.statusText }}
</div>
<hr>
<form name="form2" ng-submit="submit()">
Name: <input type="text"
class="form-control"
ng-model="user.name">
Age: <input type="number"
class="form-control"
min="1"
max="100"
ng-model="user.age">
<input type="submit"
class="btn btn-primary"
value="submit" disabled>
</form>
</body>
JavaScript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.user = {};
$scope.response = null;
$scope.submit = function() {
$scope.response = null;
$http({
method: 'POST',
url: 'http://jsonplaceholder.typifcode.com/posts',
data: $scope.user,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
$scope.response = response;
}).catch(function (response) {
$scope.response = response;
});
};
});
You'll get something like
Related plunker here http://plnkr.co/edit/M7zQzp
I need to get information from my online form added in to my URL string and get it submitted to the dialler.
I have a working URL string that submits data to our dialler ok.
I need to get the first name, last name and phone number from the form submission in to the URL string.
This is how the URL string looks;
http://domain.com/scripts/api.php?user=admin&pass=password&function=add_lead&source=MobileOp&phone_number=07000000000&phone_code=44&list_id=3002&first_name=NAME&last_name=SURNAME&rank=99&campaign_id=campaign&callback=Y&callback_datetime=NOW
This is the form I have;
<form id="contact_form" method="post" action="">
<div class="contactform">
<fieldset class="large-12 columns">
<div class="required">
<label>Your First Name:*</label>
<input name="first_name" type="text" class="cms_textfield" id="first_name" value="" size="25" maxlength="80" required="required" />
</div>
<div class="required">
<label>You Last Name:*</label>
<input name="last_name" type="text" class="cms_textfield" id="last_name" value="" size="25" maxlength="80" required="required" />
</div>
<div class="required">
<label>Phone Number:*</label>
<input name="phone_number" type:"number" id="phone_number" size="25" maxlength="11" required="required"></input>
</div>
</fieldset>
<p class="right"><strong>Call us now on 01656 837180</strong></p>
<div class="submit"><input type="submit" value="Submit" class="button small radius"></div>
</div>
</form>
I am struggling to get anywhere with this. I have a basic knowledge of PHP.
If you change your form to method="GET" and the action to your url action="http://domain.com/scripts/api.php" it will include it in the URL string. That said, showing a user's password as a query string variable is probably a bad idea in the long run.
Instead, you can process the input from the form in PHP by referring to the $_POST array in your code. For example, to get the first name you'd just use $_POST['first_name']
Change
<form id="contact_form" method="post" action="">
to
<form id="contact_form" method="GET" action="">
(notice the method 'GET'). GET sends form variables through the URL.
You can use PHP for this.
if you have an input field of name attribue 'first_name', It'll be stored in the variable $_POST['first_name'] in case of POST as method and $_GET['first_name'] in case of GET method
If you have a url
http://domain.com/scripts/api.php?user=admin&pass=password&function=add_lead&source=MobileOp&phone_number=07000000000&phone_code=44&list_id=3002&first_name=NAME&last_name=SURNAME&rank=99&campaign_id=campaign&callback=Y&callback_datetime=NOW,
notice the x=y pattern repeating in it, like user=admin. Here, the first element, x becomes the key to tha PHP array and the second becomes the value.
You can use this function. on your submission page
<script type="text/javascript">
function iter() {
var str = "";
$("#contact_form .contactform .required :input").each(function () { // Iterate over inputs
if ($(this).attr('id')) {
str += $(this).attr('id') + "=" + $(this).val() + "&"; // Add each to features object
}
});
str = str.substring(0, str.length - 1);
$.ajax({
type: "GET",
url: "http://domain.com/scripts/api.php",
data: str,
async: true,
error: function (error) {
},
success: function (data) {
}
});
}
</script>
just attach it to the submit button as shown below
$("#contact_form .submit").on("click", function () {
iter();
return false;
});
i'm not a very good programmer at all but i need a little help with a webpage i'm making.
Here's what I have for a form:
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
What I want it to do is if I put in the name Fred and press submit Button, it will go to a certain page. Any other name will link to another page or popup with an error saying, "tough luck!" or something like that.
Sorry, I couldn't find anything this specific on the web anywhere. I'm sure it's simple, I'm just confused with how this works. Thank you!
using front-end only, i'd be using javascript or jquery. meaning you don't need a form element inside it.
<script>
$("#submitButton").click(function(){
window.location.replace("enter url here")
})
</script>
you can do it with JS/jQuery:
HTML
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name" id="name">
<input type="submit" id="submit-button" value="Submit">
</form>
JS
$("#submit-button").click(function(){
if ($("#name").val() == "Fred")
location.href = "goodurl";
else
location.href = "badurl";
});
There are 2 options to solve this problem.
To use JavaScript for input value's validation and depending on it to redirect user
To use server side language to check the passed value
The first option will be easier for you I guess.
You can do something like:
Name: <input type="text" name="name">
<input type="button" value="Submit" onClick="redirect();">
<script type="text/javascript">
function redirect() {
var value = document.getElementsByName('name')[0].value;
if (value == 'Fred') {
window.location.href='http://url1';
} else {
window.location.href='http://url2';
}
}
</script>
Links: 'url1' and 'url2' must be replaced with your URLs
Just add the following code in your HTML file and try it out:
<script type="text/javascript">
function handleSubmit() {
var name = document.input.name.value;
if(name == 'Fred') {
location.href = "http://www.google.com";
} else if (name == 'Jack') {
location.href = "http://www.yahoo.com";
} else {
alert("Tough Luck");
}
}
</script>
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="button" value="Submit" onclick="handleSubmit();">
</form>
When I set up my form without specifying an enctype, Firefox automatically sets it to application/x-www-form-urlencoded and req.body contains a nice, JSON representation of all the parameters entered into the form. But when I change the enctype to multipart/form-data req.body is suddenly empty.
This is my form:
<form action="/create" method="post" enctype="multipart/form-data">
<fieldset>
<div>
<label>Category:</label>
</div>
<div>
<select name="category">
<option value="standard">Standard</option>
<option value="custom">Custom</option>
</div>
<div>
<input type="text" name="description">
</div>
<div>
<label>User ID:</label>
</div>
<div>
<input type="text" name="userid">
</div>
<div>
<input type="submit" value="Go">
</div>
</fieldset>
</form>
Doing a console.log(JSON.stringify(req.body, null, 2)); prints out an empty object when enctype is multipart/form-data and when enctype is not specified, it prints out something like:
{
category: "standard",
userid: "foo"
}
Any reason this is happening?
Try use busboy-body-parser to retrieve the request body parameters and the files.
start.js
var bodyParser = require('body-parser');
var busboyBodyParser = require('busboy-body-parser');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
extended: true
}));
// parse application/json
app.use(bodyParser.json());
//parse multipart/form-data
app.use(busboyBodyParser());
controllers/someController.js
someAction: function(req,res){
if(req.method == "POST"){
res.end(JSON.stringify(req.body)+JSON.stringify(req.files));
}
}
//{"text":"testx"}{"anexo":{"data":{"type":"Buffer","data":.... }}}
//req.body = {"text":"testx"}
//req.files = {"anexo":{"data":{"type":"Buffer","data":.... }}}
views/someController/someAction.html
<form method="post" id="multipart" enctype="multipart/form-data">
<input type="text" id="text1" name="text" value="testx" />
<input type="file" id="anexo" name="anexo" />
<input type="submit" value="Enviar" />
</form>
To create a file uploaded, you need work if the stream, for example:
/* file props
{
"data":{"type":"Buffer","data":.... },
"fieldname":"anexo",
"originalname":"images (1).jpg",
"encoding":"7bit",
"mimetype":"image/jpeg",
"destination":"c:\\live\\sources\\uploads\\",
"filename":"eventclock_images (1)_1443706175833.jpg",
"path":"c:\\live\\sources\\uploads\\eventclock_images(1)_1443706175833.jpg",
"size":9986
}
*/
var fileStream = fs.createWriteStream(file.path);
fileStream.write(file.data);
fileStream.end();
fileStream.on('error', function (err) {
//console.log("error",err);
});
fileStream.on('finish', function (res) {
//console.log("finish",res);
});
Sounds like you're using express.urlencoded() instead of express.multipart().
I think #robertklep is correct, but I disagree with his answer. express.multipart() is deprecated and should not be used.
If you need multipart form processing, I highly recommend Busboy. If you want all the details, see this answer.
npm install multer --save
in main.js
var multer = require('multer');
var upload = multer()
router.route("/quotes").post(upload.array(),function(req, res, next){
name = req.body.name;
email = req.body.email;
}