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 ^^

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

Javascript and Ajax function not working

I am trying to update my database when the user clicks a certain link (links have different values, so when user clicks one link number goes up by 1, another by 2, and so on).
I need to submit a form to another page containing the data from #form with a variable behind it, but this function doesn't seem to be working.
JavaScript
function update_number(x) {
$.ajax({
type: "POST",
url: "update_likes.php",
data: $("#Form"+x).serialize(),
dataType: "json",
return false;
};
HTML
<input type='image' src='...' onclick'update_number(2);' />
Any help appreciated.

It seems that your JavaScript is not closed correctly.
Try changing your JavaScript with this:
function update_number(x) {
$.ajax({
type: "POST",
url: "update_likes.php",
data: $("#Form"+x).serialize(),
dataType: "json",
success: function(json) {
alert( json );
return false;
}
});
}

Combining jQuery Validate and ajax form submission

I have a simple form like
<form id="invite_form">
<input type="text" name="invite_email" id="invite_email" />
<textarea name="invite_message">Hello!</textarea>
<div id="send_div">
<span id="send_btn">Send</span>
</div>
</form>
My JS is as follows to submit the form via Ajax:
$('#send_btn').live('click', function(event){
event.preventDefault();
var form = $('#invite_form');
$.ajax({
url: '/invite',
type: "POST",
data: form.serialize(),
dataType: "html",
success: function(html) {
$('#send_div').html('Success!');
}
});
});
This works fine.
Now I would like to wrap a jQuery Validate function around this code to make sure [1] the email field is filled and [2] is valid email.
I am using Jorn's bassistance.de jQuery validation plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/.
Can anyone give a roadmap of how to tie the validation call to this ajax?
Thanks for helping, much appreciated.

Try this:
$('#send_btn').live('click', function(event){
event.preventDefault();
var form = $('#invite_form');
if(form.valid()) {
$.ajax({
url: '/invite',
type: "POST",
data: form.serialize(),
dataType: "html",
success: function(html) {
$('#send_div').html('Success!');
}
});
else {
; //do whatever if the form is not valid
}
});

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