Google recaptcha : How to access the response - javascript

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);
}
});

Related

Fill Data to control from success response which is on another page

I bring my ajax response on success call and after that I want to redirect to new aspx page where all my 30 input type text controls are their. So What I want is I want to fill all the values their. So how could I achieve it. Please suggest.
Here is what I tried till now
function getDataForDashboard(rjSapId) {
$.ajax({
type: "POST",
url: "Dashboard.aspx/GetDashboardDataOnFacId",
data: JSON.stringify({ rjSapId: rjSapId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
window.location.href = "http://localhost:39800/DashboardData.aspx?Id=" + rjSapId + "";
},
error: function (response) {
alert('Something went wrong..!!');
}
});
}
The another page some controls are below:-
<span>Site Type:</span>
<input type="text" id="txtSiteType" />
<br />
<span>Facility Type:</span>
<input type="text" id="txtFacilityType" />
<br />
May be you can save all your data in a hidden field by doing a stringify or, save it in local storage and then in the next page ajax ready you can retrieve it

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');
});
});
});

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 success request "message text" to be displayed back

I have a web page that calls AJAX request that sends the data to the database and updates it. I need to display the message back to the user on the webpage that the data has been updated, however currently, nothing is being displayed. Moreover, no error message is being generated.
My HTML looks like this:
<div class="input-group" id = "contentID">
<input type="submit" class="btn btn-info" name="showname" value="Show Fields" id = "showName" style="margin-right: 5px;"/>
</div>
My ajax request looks like below:
$.ajax({
type: "POST",
dataType: "json",
url: "update.php",
data: {'postData':JSON.stringify(postData)},
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function(data) {
successmessage = 'Data was succesfully updated';
$("#contentID").text(successmessage); #Is this correct?
},
error: function(data) {
successmessage = 'Error';
$("#contentID").text(successmessage);
},
});
Your Ajax code has an error:
Please Change:
$("contentID").text(successmessage);
To
$("#contentID").html(successmessage);

Getting an "Unsupported media type-415" on an ajax call- Jquery,ajax

I'm calling an ajax function to update a certain record and I'm getting a 415-Unsupported Media type. Below is the js:
$("#update").on("click", function(){
event.preventDefault();
return $.ajax('/update/record',{
method: 'PUT',
data:{
date: date
},
success: function(){
alert("record updated successfully");
}
});
html:
<form>
<button type="submit" id="update-cc">Update</button>
</form>
I don't know what I'm doing wrong here or what I need to add to get the correct form of the ajax call.Any ideas????
Thanks!
I believe you need to set the contentType and dataType in your ajax request
contentType: "application/json",
dataType: "json",

Categories

Resources