Develop Reference

Sending two data's (image and number) via ajax

I need to pass two different datas using ajax.
I've got this:
$('#sendcover').on('click',function(){
$.ajax({
type: "POST",
url: "{{ url('articles_changecover') }}",
data: new FormData($('#test')[0]),
processData: false,
contentType: false,
success: function (data) {
alert(data);
}
});
});
<form name="test" id="test" method="post" enctype="multipart/form-data">
<input type="text" value="{{article.id}}" name="id" />
<input type="file" name="cover">
<button id="sendcover" type="submit" class="saveData">Save</button>
</form>
I need to pass two var's with data:
id and cover
id - sends {{article.id}}
cover - sends image
(and on the backend side it's uploading img and converting it - but it's already done by someone else)
Could somebody help me how to do it properly? I've never did such thing, and I can't find any working answer. :(

You could send it as an splitted up object like
data: {
myId: id,
myCover: cover
}
but currently you send the whole form that actually should look like
$('form#test').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type: "POST",
url: "{{ url('articles_changecover') }}",
data: formData
processData: false,
contentType: false,
success: function (data) {
alert(data);
}
});
});
And viewing the source looks fine to send...at least for me ^^

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

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

allow the user to update textbox value using jQuery

i am developing a project in ASP.NET MVC5 using SQL SERVER 2012
In this in one of the for i have scenario where user clicks on the Edit button and modal popup gets open with populated Email address in it(user can change it); after user changes the value of email that new email should gets stored.
my code is as below:
<tr>
<th>Email</th>
<td>
<input id="txtEmailId" name="txtEmailId"type="text" class="form-control"
placeholder="Email" size="254" style="width: 200px;"
value="#ViewBag.EmailAddress"/>
</td>
</tr>
js code is as below:
//save profile email address
$("#btnSaveProfile").click(function (e) {
debugger;
// var test = document.getElementById("txtEmail");
var userEmail = $("#txtEmailId").val();
alert(userEmail);
$.ajax({
type: "POST",
url: '/UserProfile/SaveUserDetails?EmailAddress=' + userEmail,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
if (data == "OK") {
alert("Email Saved")
}
},
error: function (msg) {
alert("Error :" + msg.responseText);
}
});
})
but it is saving older email address.

Are you referenceing the wrong input? Should you use:
$("#txtEmailId").val();

The button in the modal pop-up may need to trigger a script that assigns the new value to the input field $('#txtEmailId').
Sample html for modal pop-up.
<div class="modal-pop-up">
<input type="text" id="new-email" name="new-email">
<button id="save-btn">Assign New Email</button>
</div>
Sample script for modal pop-up.
$("#save-btn").on('click', function(e){
var $newEmail = $('#new-email').val();
$("#txtEmailId").val($newEmail);
// close modal
});
However you may not really need a modal pop-up just to allow the user to modify a single field in the original form.
It seems you are not assigning the data property:
$.ajax({
type: "POST",
url: '/UserProfile/SaveUserDetails?EmailAddress=' + userEmail,
contentType: "application/json; charset=utf-8",
data: { EmailAddress: userEmail } /* assign data property */
dataType: "json",
async: true,
success: function (data) {
if (data == "OK") {
alert("Email Saved")
}
},
error: function (msg) {
alert("Error :" + msg.responseText);
}
});

jquery submit form and then show results in an existing div

I have a simple one text input form that when submitted, needs to fetch a php file (passing the inputs to the file) and then take the result (just a line of text) and place it in a div and fade that div into view.
Here is what I have now:
<form id=create method=POST action=create.php>
<input type=text name=url>
<input type="submit" value="Create" />
<div id=created></div>
What I need is the results of create.php?url=INPUT, to be dynamically loaded into the div called created.
I have the jquery form script, but I haven't been able to get it to work right. But I do have the library loaded (the file).

This code should do it. You don't need the Form plugin for something as simple as this:
$('#create').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#created').html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});

This works also for file upload
$(document).on("submit", "form", function(event)
{
event.preventDefault();
var url=$(this).attr("action");
$.ajax({
url: url,
type: 'POST',
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
$('#created').html(data); //content loads here
},
error: function (xhr, desc, err)
{
console.log("error");
}
});
});

You must use AJAX to post the form if you don't want the page to be refreshed.
$('#create').submit(function () {
$.post('create.php', $('#create').serialize(), function (data, textStatus) {
$('#created').append(data);
});
return false;
});