Using Jquery AJAX POST for form authentication - javascript

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.

Related

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.

Google recaptcha : How to access the response

For the HTML part, I have google REcaptcha widget like below
<form id="test" action="?" method="POST>
<div style="width: 298px!important;margin-left:-1px;" class="g-recaptcha" data-sitekey="6Lf2_Q4UAAAAAOf0NDqKDpEHncrFuKBRuw5bJfSO"></div>
<input type="submit" type="button" id="signin-button" class="signin-button" value="Login" />
</form>
And by the time when the user clicks on the submit button, it should run a little Ajax function and see if the result is true then the page should be redirected somewhere else otherwise it should remain the same and display an error message.
I have my ajax code below, I am nearly finished the function but I have no idea how may I get the response value for the field.
$("#signinform").on('submit', function(e) {
var ReCaptchaDetail = {
secret: "6Lf2_Q4UAAAAAOf0NDqKDpEHncrFuKBRuw5bJfSO",
response : $("#recaptcha-token").attr("value"),
//can't get the response value
//remoteip: , //optional
};
console.log(ReCaptchaDetail)
$.ajax({
url: 'https://www.google.com/recaptcha/api/siteverify',//getting the goggle api
data: JSON.stringify(ReCaptchaDetail),
type: 'POST',
contentType: "application/json; charset=utf-8", //must decode
dataType: "json", //must define data type
success: function(data){
console.log(data);
}
});

Post a form with attachments on C# server-side using 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

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