Develop Reference

How to process dynamic added html form on NodeJS express

My JQuery code appends html form to the DOM like this.
$("#form-container").empty().append("<form method='POST' action='/process-form' id='my-form'>
<input name='myfield'>
<button type='submit'>Submit</button>
</form>")
And my server side code looks like this
//I have app.use(bodyParser.urlencoded({extended: true}) middleware
router.post('/process-form',function(req,res){
console.log(req.body)
})
The console.log returns an empty object. However, when I create a new page with just the form and submit the form, it returns the form values as expected. Any help why it behaves like that?
EDIT:
JQuery code for AJAX request
$(document).on('submit', '#my-form', function(evt) {
evt.preventDefault();
let url = $(this).attr('action')
let method = $(this).attr('post')
$.ajax({
url,
type: 'POST',
success: function(data) {
console.log(data)
},
error: function(err) {
console.log(err)
}
})
})

You aren't sending any data with our Ajax post. You have to get the data from the form and send it yourself for an Ajax call.
There are numerous ways to get the data out of the form and package it up for jQuery. One way which puts it in the URLencoded form is to get the DOM element for the form and execute const formData = form.serialize() and then send that in the data property for $.ajax().
You could put that together like this:
$(document).on('submit', '#my-form', function(evt) {
evt.preventDefault();
let url = $(this).attr('action')
let method = $(this).attr('post')
$.ajax({
url,
type: 'POST',
data: $(this).serialize(),
success: function(data) {
console.log(data)
},
error: function(err) {
console.log(err)
}
})
});

AngularJS Post data as key-value pair to a asp.net page

I am trying to post key-value pair data from angular application to a asp.net page however I am not able to receive the result at the asp.net page.
Example Data
{fullName: "Vikas Bansal", userId: "1001387693259813", userimageurl: "http://graph.facebook.com/1001387693259813/picture?width=250&height=250"}
Angular Code
var postData = {
fullName: $scope.name,
userId: $scope.userId,
userimageurl: $scope.userImage
};
var postUrl = 'http://localhost:41115/Index.aspx';
$http({
url: postUrl,
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: postData
}).then(function (responce) {
console.log(responce);
}, function (responce) {
console.log(responce);
});
Asp.net Page Code
protected void Page_Load(object sender, EventArgs e)
{
var userId = Request.Form["userId"]; /// getting null
var fullName = Request.Form["fullName"]; /// getting null
var img = Request.Form["userimageurl"]; /// getting null
}
In asp.net page all variables are null.
EDIT
By changing content type to 'Content-Type': 'application/json; charset=utf-8' in angularJs post request
and by using var strJSON = (new StreamReader(Request.InputStream).ReadToEnd()); I am able get the posted json
but I am still wondering if there is a way to get key-value pairs directly?
like this var userId = Request.Form["userId"];

It's because your payload is actually JSON but you tried to pass as a FormData object.
You'll need to make a FormData() object. Then
(1) Tell AngularJs not to serialize it by using the angular.identity function.
(2) Angular's default header for PUT and POST requests is application/json, so you'll want to override that too. The browser sets the Content-Type to multipart/form-data and fills in the correct boundary.
Try this:
var postData = new FormData();
postData.append("fullName", $scope.name);
postData.append("userId", $scope.userId);
postData.append("userimageurl", $scope.userImage);
$http.post(postUrl, postData, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}).then(function(data) {
//success
}, function(error) {
//error
});

How to get CSRF token Value at javaScript

I have requirement like that, when I send request, CSRF-token should be send with it. I Explore some SO questions, But I can't find Solution.
I have written Code like bellow to add token when request being sent,
var send = XMLHttpRequest.prototype.send,
token = $('meta[name=csrf-token]').attr('content');
XMLHttpRequest.prototype.send = function(data) {
this.setRequestHeader('X-CSRF-Token', "xyz12345");
//this.setRequestHeader('X-CSRF-Token',getCSRFTokenValue());
return send.apply(this, arguments);
}
This is Working Fine, But now i need to add CSRF-Token in function in place of xyz12345.
I have tried ajax function as below .
`
$.ajax({
type: "POST",
url: "/test/"
//data: { CSRF: getCSRFTokenValue()}
}).done(function (data) {
var csrfToken = jqXHR.getResponseHeader('X-CSRF-TOKEN');
if (csrfToken) {
var cookie = JSON.parse($.cookie('helloween'));
cookie.csrf = csrfToken;
$.cookie('helloween', JSON.stringify(cookie));
}
$('#helloweenMessage').html(data.message);
});
But it is not Yet Worked.
So my question is:
How to get js side CSRF-Token Value?

you need to do this in new Laravel
var csrf = document.querySelector('meta[name="csrf-token"]').content;
$.ajax({
url: 'url',
type: "POST",
data: { 'value': value, '_token': csrf },
success: function (response) {
console.log('value set');
}
});

I get my CSRF Token by this way,
By adding function :
$.get('CSRFTokenManager.do', function(data) {
var send = XMLHttpRequest.prototype.send,
token =data;
document.cookie='X-CSRF-Token='+token;
XMLHttpRequest.prototype.send = function(data) {
this.setRequestHeader('X-CSRF-Token',token);
//dojo.cookie("X-CSRF-Token", "");
return send.apply(this, arguments);
};
});
Where CSRFTokenManager.do will be called from CSRFTokenManager Class.
Now It is adding token in header and cookie in every request.

How to update XML file using Ajax + Jquery?

I want to update the XML file using Ajax & jquery. I am new to ajax so tried with using both POST/PUT.
For PUT: I am getting the error 405. i.e "Method Not Found"
For POST: Bad Request
vvmsUrl: is the path to xml file
Our get is working fine, but not the PUT/POST.
PUT Code:
vvmsUrl: is the path to xml file
var XMLData= "<origin>ABCbfk</origin>";
jQuery.ajax({
type: "PUT",
url: vvmsUrl,
contentType: "application/xml",
headers: { 'Prefer' : 'persistent-auth',
'Access-Control-Allow-Methods': 'PUT'},
dataType: "xml",
processData: false,
crossDomain: true,
data: XMLData,
success:function(msg)
{
alert("hello"+msg);
},
error: function(msg){
alert("Error"+msg);
LOG(xhr.status);
}
});
I am stuck from 2 days. I am not getting what goes wrong in this.

You can try : upload any file
HTML code
<input type="file" id="uploadfile" name="uploadfile" />
<input type="button" value="upload" onclick="upload()" />
Javascript code
<script>
var client = new XMLHttpRequest();
function upload()
{
var file = document.getElementById("uploadfile");
/* Create a FormData instance */
var formData = new FormData();
/* Add the file */
formData.append("upload", file.files[0]);
client.open("post", "/upload", true);
client.setRequestHeader("Content-Type", "multipart/form-data");
client.send(formData); /* Send to server */
}
/* Check the response status */
client.onreadystatechange = function()
{
if (client.readyState == 4 && client.status == 200)
{
alert(client.statusText);
}
}
</script>

You need a server side script to handle modifications to anything at the server you cannot just use client side jQuery. The script will also check who is authorized to write to the file or otherwise anyone can modify/update your XML file which is a security problem and probably is what you don't want.
Please could you include all of your code? I mean what is vvmUrl ? Are you using some web service? Is your code making call to another domain, why crossDomain: true?
EDIT:
This should work in jQuery 1.7.2+
var username = 'myUser';
var password = 'myPassword';
$.ajax
({
type: "PUT",
url: vvmsUrl,
contentType: 'application/xml',
async: false,
crossDomain: true,
username: username,
password: password,
data: xmlData,
success: function (){
alert('Works!');
}
});

File Upload without Form

Without using any forms whatsoever, can I just send a file/files from <input type="file"> to 'upload.php' using POST method using jQuery. The input tag is not inside any form tag. It stands individually. So I don't want to use jQuery plugins like 'ajaxForm' or 'ajaxSubmit'.

You can use FormData to submit your data by a POST request. Here is a simple example:
var myFormData = new FormData();
myFormData.append('pictureFile', pictureInput.files[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
processData: false, // important
contentType: false, // important
dataType : 'json',
data: myFormData
});
You don't have to use a form to make an ajax request, as long as you know your request setting (like url, method and parameters data).

All answers here are still using the FormData API. It is like a "multipart/form-data" upload without a form. You can also upload the file directly as content inside the body of the POST request using xmlHttpRequest like this:
var xmlHttpRequest = new XMLHttpRequest();
var file = ...file handle...
var fileName = ...file name...
var target = ...target...
var mimeType = ...mime type...
xmlHttpRequest.open('POST', target, true);
xmlHttpRequest.setRequestHeader('Content-Type', mimeType);
xmlHttpRequest.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');
xmlHttpRequest.send(file);
Content-Type and Content-Disposition headers are used for explaining what we are sending (mime-type and file name).
I posted similar answer also here.
UPDATE (January 2023):
You can also use the Fetch API to upload a file directly as binary content (as also was suggested in the comments).
const file = ...file handle...
const fileName = ...file name...
const target = ...target...
const mimeType = ...mime type...
const promise = fetch(target, {
method: 'POST',
body: file,
headers: {
'Content-Type': mimeType,
'Content-Disposition', `attachment; filename="${fileName}"`,
},
},
});
promise.then(
(response) => { /*...do something with response*/ },
(error) => { /*...handle error*/ },
);
See also a related question here: https://stackoverflow.com/a/48568899/1697459

Step 1: Create HTML Page where to place the HTML Code.
Step 2: In the HTML Code Page Bottom(footer)Create Javascript: and put Jquery Code in Script tag.
Step 3: Create PHP File and php code copy past. after Jquery Code in $.ajax Code url apply which one on your php file name.
JS
//$(document).on("change", "#avatar", function() { // If you want to upload without a submit button
$(document).on("click", "#upload", function() {
var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field
var form_data = new FormData(); // Creating object of FormData class
form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data
form_data.append("user_id", 123) // Adding extra parameters to form_data
$.ajax({
url: "/upload_avatar", // Upload Script
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: form_data, // Setting the data attribute of ajax with file_data
type: 'post',
success: function(data) {
// Do something after Ajax completes
}
});
});
HTML
<input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />
Php
print_r($_FILES);
print_r($_POST);

Basing on this tutorial, here a very basic way to do that:
$('your_trigger_element_selector').on('click', function(){
var data = new FormData();
data.append('input_file_name', $('your_file_input_selector').prop('files')[0]);
// append other variables to data if you want: data.append('field_name_x', field_value_x);
$.ajax({
type: 'POST',
processData: false, // important
contentType: false, // important
data: data,
url: your_ajax_path,
dataType : 'json',
// in PHP you can call and process file in the same way as if it was submitted from a form:
// $_FILES['input_file_name']
success: function(jsonData){
...
}
...
});
});
Don't forget to add proper error handling

Try this puglin simpleUpload, no need form
Html:
<input type="file" name="arquivo" id="simpleUpload" multiple >
<button type="button" id="enviar">Enviar</button>
Javascript:
$('#simpleUpload').simpleUpload({
url: 'upload.php',
trigger: '#enviar',
success: function(data){
alert('Envio com sucesso');
}
});

A non-jquery (React) version:
JS:
function fileInputUpload(e){
let formData = new FormData();
formData.append(e.target.name, e.target.files[0]);
let response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
let result = await response.json();
console.log(result.message);
}
HTML/JSX:
<input type='file' name='fileInput' onChange={(e) => this.fileInput(e)} />
You might not want to use onChange, but you can attach the uploading part to any another function.

Sorry for being that guy but AngularJS offers a simple and elegant solution.
Here is the code I use:
ngApp.controller('ngController', ['$upload',
function($upload) {
$scope.Upload = function($files, index) {
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
file: file,
url: '/File/Upload',
data: {
id: 1 //some data you want to send along with the file,
name: 'ABC' //some data you want to send along with the file,
},
}).progress(function(evt) {
}).success(function(data, status, headers, config) {
alert('Upload done');
}
})
.error(function(message) {
alert('Upload failed');
});
}
};
}]);
.Hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-controller="ngController">
<input type="button" value="Browse" onclick="$(this).next().click();" />
<input type="file" ng-file-select="Upload($files, 1)" class="Hidden" />
</div>
On the server side I have an MVC controller with an action the saves the files uploaded found in the Request.Files collection and returning a JsonResult.
If you use AngularJS try this out, if you don't... sorry mate :-)