Develop Reference

upload a form's file and text data to PHP using jQuery and AJAX

Good morning. I'm trying to make the form submission of a message more fluid avoiding the reload of the page for the sending of it. Since the message may be text or image, I need to send both of them to a PHP page for upload. I'm using this code in the html page:
<form id="newmessage" enctype="multipart/form-data">
<textarea form="newmessage" id="messagetext" name="messagetext" ></textarea>
<input type="submit" name="submit" value="send" onclick="return newMessage();">
<input type="file" accept="image/*" id="image" name="image">
</form>
<script>
function newMessage(){
var messagetext = document.getElementById("messagetext").value;
var image = document.getElementById("image").value;
$.ajax({
type:"post",
url:"new_message.php",
data:
{
"messagetext" :messagetext,
"image" :image,
},
cache:false,
success: function(html) {
document.getElementById("messagetext").value = "";
}
});
return false;
}
</script>
As you can see, I'm allowing users to type in the textarea or upload a file. When they submit the form, the newMessage() method is invoked and sends image and messagetext to new_message.php, which process them:
// new_message.php
$messagetext = $_POST["messagetext"];
$image = $_FILES["image"]["tmp_name"];
if((!empty($messagetext) || isset($image))) {
if(!empty($messagetext)) {
// create text message
} else if(isset($image)) {
// create image message
}
}
When I write a text message it works perfectly, but it doesn't send anything if it's image. Maybe the image variable in AJAX is not taking the file properly. I excuse if this question is unclear, but I'm a beginner in StackOverlow and I'm open to edits. Thanks for all replies.

can you try this. you don't need to worry about the file and message in textarea. Make sure you have added jQuery.
$("#newmessage").on("submit", function(ev) {
ev.preventDefault(); // Prevent browser default submit.
var formData = new FormData(this);
$.ajax({
url: "new_message.php",
type: "POST",
data: formData,
success: function (msg) {
document.getElementById("messagetext").value = "";
},
cache: false,
contentType: false,
processData: false
});
return false;
});

JQuery toggle() - Element only displayed after JQuery submit function

I'm trying to display a loading gif at the beginning of a JQuery submit function, but the gif is only displayed after the submit function ends. (Each of the alerts are displayed before the gif)
For the ajax, I currently set it to always respond with an error saying "No video chosen".
JQuery
$("#myForm").submit(function(e){
e.preventDefault();
$("#loading_gif").toggle();
alert('The gif should be displayed');
var Fdata = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: "/send_video",
data: Fdata,
processData:false,
contentType: false,
async:false,
cache: false,
success: function(data){
alert('success');
//commented or else the gif is never displayed
//$("#loading_gif").toggle();
},
error: function(error){
alert('error');
e = document.getElementById("error");
e.innerHTML = JSON.parse(error.responseText);
//commented or else the gif is never displayed
//$("#loading_gif").toggle();
}
});
});
HTML
<div id="error"></div>
<form id="myForm" action="/" method="post" enctype="multipart/form-data">
<input id="video" type="file" name="video">
<input id="submit" type="submit" value="Send">
<img id="loading_gif" style="display:none" src="mysite/img/loading.gif">
</form>
I don't think $.ajax is the problem, because I removed it and still didn't work.
I already tried to separate toggle() from the rest of the submit by doing this:
$("#submit").click(function(){
$("#loading_gif").toggle();
$("#myForm").submit();
});
But it changed nothing.
Thanks a lot.

You don't want async:false remove this and your problem should go away.

Running an Ajax click event on a div added by another Ajax click event

For some reason I can't run the Ajax click on a div that was just added by another ajax click event on the exact same page.
Both ajax requests use the same request page, but contain a different data string.
These are my two Ajax functions
$(document).ready(function(){
$('#log_login').click(function(event){
event.preventDefault();
var email=$("#log_email").val();
var login=$("#log_login").html();
var dataString = 'email='+email+'&login='+login;
$.ajax({
type: 'POST',
url: '$language_rewrite/$administrator_login/forgotpassword',
data: dataString,
beforeSend: function(){
$("#login-msg").hide();
$("#log_login").html('$translate_login_8...');
},
success: function(html){
if(html){
if(html.indexOf("$forgot_translate_1") > -1){
$("#p_log_email").html('$forgot_translate_1');
$("#log_verify_code").html('<input id="log_code" type="text" name="email" placeholder="$admin_f_subject"/><br>');
$("#log_verify_btn").html('<div id="log_verify" name="login" class="standard-button">$admin_verify_btn</div>');
}
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('error');
}
});
});
});
$(document).ready(function(){
$('#log_verify').click(function(event){
event.preventDefault();
var code = $("#log_code").val();
var verify = $("#log_verify").html();
var dataStringTwo = 'code='+code+'&verify='+verify;
$.ajax({
type: 'POST',
url: '$language_rewrite/$administrator_login/forgotpassword',
data: dataStringTwo,
beforeSend: function(){
$("#login-msg").hide();
$("#log_verify").html('$admin_verify_btn...');
},
success: function(html){
if(html){
if(html.indexOf("1") > -1){
$("#log-verify").html('<div id="log_login2" name="login" class="standard-button">FINISHED</div>');
}
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('error');
}
});
});
});
This is the HTML code that is being changed
<div id="log_verify_code">
<input id="log_email" type="text" name="email" placeholder="<?php echo $translate_login_2; ?>"/><br>
<input id="log_code" type="hidden" value=""/>
</div>
<div id="log_verify_btn">
<div id="log_login" name="login" class="standard-button"><?php echo $translate_login_8; ?></div>
<input id="log_verify" type="hidden" value=""/>
</div>
The first Ajax functions works perfectly, and it changes the input field, however when I press the second button nothing happens. Not even an error, or a PHP error. Nothing. How come?

Event handlers are bound only to existing elements. For future elements you must use delegated events and bind to existing ancestor, or for instance the document itself.
$(document).on("click", ".future-elem", function() {
// code here
});
Source: $.on - read: direct and delegated events
EDIT: just saw this was already being commented

How to postback to a different form using javascript

I have a form with a textbox in it, I want to submit the value of the textbox to another page after an ajax call is successfully made, how can I achieve this?
This is my ajax method:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "http://test.net/getData",
data: "{some:data}",
success: function (response) {
document.forms.form1.txtData.value = "value1";
document.forms.form1.submit();
},
error: function (response) {
alert("error");
}
});
and then I have my form in page Page1 as:
<form id="form1" runat="server">
<input type="hidden" id="txtData" value="" runat="server" />
</form>
But this will send my data back to the original page (Page1) not to Page2 form.

You can specify action url in action attribute of form.
Take look on documentation
<form id="form1" runat="server" action="Page2.aspx">
<input type="hidden" id="txtData" value="" runat="server" />
</form>

You can use query string, this will redirect to another page with your textvalue
success: function (response) {
var value=response.d
// document.forms.form1.txtData.value = "value1";
// document.forms.form1.submit();
window.location = "http://YourPageName.aspx?id="+value;
}
Code Behind:
On page load you can retrieve the value by using Request.QueryString
if (Request.QueryString["id"] != null)
{
string getTxtValue = Request.QueryString["id"].ToString();
}

You can set the 'action' attribute of the form to action name you need and then submit the form, e.g. like this.
success: function (response) {
var $form = $("#form1");
$form.attr("action", "your-action-name");
$form.submit();
},
About HTML action Attribute

Having trouble submitting a form with AJAX

HTML:
<form id="message">
<input id="message-text" name="message" type="text" value="" autofocus="autofocus" />
<input type="submit" value="Send" />
</form>
JAVASCRIPT:
$(document).ready(function () {
// submit new message
var request;
$("#message").submit(function(event) {
// abort any pending request
if (request) {
request.abort();
}
var $form = $(this);
var $inputs = $form.find("input, select, button, textarea");
var postData = $form.serialize();
// note: we disable elements AFTER the form data has been serialized
$inputs.prop("disabled", true);
request = $.ajax({
url: "submit.php",
type: "POST",
data: postData
})
.done(function(response, textStatus, jqXHR) {
console.log('Success: ' + textStatus, jqXHR);
})
.fail(function(jqHXR, textStatus, errorThrown) {
console.error('Error: ' + textStatus, errorThrown);
});
});
});
I've confirmed that submit.php works when not using AJAX to submit, so I don't think that's the problem. The console log simply says: Error: error on line 66: console.error('Error: ' + textStatus, errorThrown); which is completely non-descriptive nor helpful... The page also refreshes when I hit enter or click submit, which isn't supposed to happen.
Any ideas what I'm doing wrong?

This happens because you use submit input, this is the default behavior of submit input, so you have 2 options first is disable the submit using event.preventDeafult(); on the submit process, or you can easily change your send button:
<input type="submit" value="Send" />
to
<input type="button" value="Send" />

$("#message").submit(function(event) {
event.preventDefault();
...

I prepare demo for you please download it from
https://www.dropbox.com/s/24h0o9n08iuvpo1/ajaxdemo.rar
Change as per your requirement. I think it is helpful