Post a form with attachments on C# server-side using JavaScript - javascript

I need to post a form on C# server-side using Javascript.
I am using the following code
$("#Form").submit(function () {
$.ajax({
url: 'NewRequest',
data: $(this).serializeArray(),
type: 'post',
success: function (data, status, xhr) { alert("Dinesh"); },
dataType:'json',
});return false;
});
I have an attachement with other text fields in HTML
<form role="form" id="Form" method="post" enctype="multipart/form-data" > <input type="file" name="Attachment" id="Attachment" multiple="multiple" /></div> </form>
All the fields are being picked up while debugging but no the attachment one. Please help

Related

Get CKeditor Value Using FormData Object

below is my html form
<form id='add'>
<input type="text" name="title">
<textarea id="usingckeditor" name="content"></textarea>
<input type="file" name="file">
<button id="save">save</button>
</form>
and here is my javascript
$("#save").on('submit',(function(e) {
$.ajax({
url: "blog/saveblog.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
}
});
})
i'm using new FormData() to send data to saveblog.php, and saveblog.php working to upload image and get value of $_POST['title'], but $_POST['content'] is empty
how FormData to get content of textarea(that using ckeditor)?
Buttons don't have submit events, you have to bind the submit event to the form, also you have to prevent the form from submitting since you're using ajax to post the data.
CKEditor manages its own content so it's not in the textarea, you can get it by calling getData() on the CKEditor instance
<form id='add'>
<input type="text" name="title">
<textarea id="usingckeditor"></textarea>
<!-- remove name attribute so it will not pollute form data object -->
<input type="file" name="file">
<button id="save">save</button>
</form>
$("#add").on('submit',(function(e) {// attach form to submit event
e.preventDefault(); //prevent the form from submitting
var data = new FormData(this);
//add the content
data.append('content', CKEDITOR.instances['usingckeditor'].getData());
$.ajax({
url: "blog/saveblog.php",
type: "POST",
data: data,
contentType: false,
cache: false,
processData:false,
success: function(data){
}
});
})
You might use:
$(form).trigger('form-pre-serialize');
And then create new FormData()
Add this before ajax call:
var data = new FormData([form]);
data.append('[textarea_name]', CKEDITOR.instances['textarea_id'].getData());

Uploading a file from a bootstrap modal using ajax

I am attempting to upload a file to a server from a bootstrap modal window, using ajax.
The modal html is
<div class="modal-body">
<div>
<form class="form" role="form" id="attachform" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
</div>
The Javascript
$("#attachform").on('submit',function(event){
event.preventDefault();
var postData = new FormData($("#attachform")[0]);
console.log(postData);
$.ajax({
url: "attachment.php",
type: "POST",
data: data,
processData: false, // tell jQuery not to process the data
contentType: false
}).done(function(msg) {
console.log(msg);
$('#myAttachModal').modal('hide');
});
});
});
The PHP server code
print_r($_POST);
print_r($_FILES);
I am not seeing anything in the $_FILES array when I run this.
Any suggestions?
Change the data value in your Ajax post to postData. postData contains the form data.
Change this section
data: data,
To
data: postData,//this contains the form data
You just need to change the data : data kew value inside the
$.ajax({
data : postData,
});
$.ajax({
url: "attachment.php",
type: "POST",
data: postData,
processData: false, // tell jQuery not to process the data
contentType: false
}).done(function(msg) {
console.log(msg);
$('#myAttachModal').modal('hide');
});
});
});

Why ajax upload file doesn't need enctype="multipart/form-data" in the form tag?

I have a form which use to I send using Ajax with jQuery. And like you can see in the title the question is: Why ajax upload file doesn't need enctype="multipart/form-data" in the form tag?
The example something like this:
<html>
<head>
<script>
$("form1").submit(function(event){
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'formprocessing.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
}
});
return false;
});
</script>
</head>
<form id="form1">
<input name="image" type="file" />
<input type="submit" value="Submit">
</form>
</html>
You're posting the form content with ajax, so the attributes on the <form> tag are irrelevant. Your own code is basically doing the work that the browser would do if the form were posted implicitly by the browser.

Using Jquery AJAX POST for form authentication

I have the following form:
<form name="myForm" action="welcome.java" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="ticketnummer">
<input type="submit" value="Submit">
</form>
And the following AJAX POST:
var data = {"function": "List", "teamId": "****", "teamKey":"****"}
$.ajax({
type: 'POST',
contentType: 'application/json',
data : JSON.stringify(data),
url: 'http://fys.securidoc.nl/Ticket',
dataType: 'json',
success : function(response) {
console.log(response);
alert('success!');
}
});
I want my users to log in through their "ticketnumber". A list of all ticketNumbers is located at "http://fys.securidoc.nl/Ticket" as you can see. If the user enters one of those ticketNumbers in the list he/she gets access to the welcome page. Now my question is how can i make this happen? I have tried alot but i can't seem to find the solution.

AJAX formdata POST submit working in IE9/Chrome but not in Firefox

I have some AJAX script that submits a form and then updates the web page.
My Code:
HTML:
<form action='jobs.php' method='post' name='editUpdate' enctype='multipart/form-data' id="form-add">
<hr />
<textarea name='description' id="title" class="text1" placeholder="Add Update" cols='100' rows='5'></textarea>
<input type="submit" name='action' id="submit" value="Save Update"></input>
</form>
AJAX:
<script>
$('#form-add').submit(function(e){
var formObj = $(this);
var formURL = formObj.attr("action");
var formData = new FormData(this);
var prependbdDiv = $('#prependbody');
$.ajax({
url: formURL,
type: 'POST',
data: formData,
dataType: "json",
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(response) {
if(response.success == "1"){
prependbdDiv.prepend("<tr><td>"+response.datetime+"</td><td>"+response.updatedesc+"</td></tr>");
$('#title').val('');
$("#form-add").fadeToggle();
}
},
error: function(response)
{
alert("ERROR");
},
});
e.preventDefault();
});
</script>
This seems to have resolved my issue:
Submiting a form with Ajax by using FormData on Firefox and IE10+
I am curious why this is the case or is it bad programming on my behalf?
Also when using FireBug the post data does not appear similar to that of the post data from a standard HTML form. IE, with the ajax post using formdata FireBug lists no "Parts" section under the POST details.
Thanks for your help!

Categories

Resources