When I try to submit my form everything seems to work, but it doesn't actually work when I add the $ _FILES variable to my PHP file.
This is my code and it doesn't work:
action.php
<?php
if (isset($_FILES['logoUp']['name'][$key])){
echo 'success form submit';
}
echo $_POST['test'];
?>
form.html
<form id="co-heared4us-form" name="co-heared4us-form" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="file" id="logoUp" name="logoUp[]" accept=".ai, .pdf, .eps, .svg, image/png, image/jpeg, image/jpg" multiple="multiple"/>
<input type="text" name="test" value="test" id="test" />
<input type="submit" value="send" />
</form>
<script>
$("html").on("submit", "form#co-heared4us-form", function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'action.php',
data: $('form#co-heared4us-form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
</script>
I noticed that if I run the action.php without submit ajax the action.php works correctly even with $ _FILES.
How can i do?
Related
PFB my Html code :
<form id="form" enctype="multipart/form-data">
<label>File One</label>
<input type="file" name="file[]" id="file[]">
<br/>
<label>File Two</label>
<input type="text" id="name" name="name">
<input type="file" name="file[]" id="file[]">
<br/>
<label>File Three</label>
<input type="file" name="file[]" id="file[]">
<input type="submit" id="submit" name="submit" value="Submit">
</form>
I am trying to submit this form using ajax as below :
<script type="text/javascript" >
$(function() {
$('#form').submit(function(event) {
var name = $("#name").val();
var file[] = $("#file[]").val();
var dataString = 'name='+name+'&file[]='+file[];
$.ajax({
type: "POST",
url: "k.php",
data: dataString,
success: function(data123){
alert(data123);
}
});
return false;
});
});
</script>
But its not working. i:e the below line :
var file[] = $("#file[]").val();
var dataString = 'name='+name+'&file[]='+file[];
Any help would be highly useful.
I need to submit multiple photos along with text fields using ajax function but I am stuck in this issue from the past many days.
For uploading files using ajax, you need to do some extra work using the FormData object.
Check out http://blog.teamtreehouse.com/uploading-files-ajax for an example of how to do this.
I'm not sure what's wrong with my code but my AJAX isn't working. I've included the jQuery library file but the program just won't load up the PHP file when I call on AJAX. As you'll see below, the .ajax call has a URL to "mail.php" but on submit, this file never loads. I can manually name the action tag for the form to "mail.php" but that just loads up "mail.php", which defeats the point of AJAX. What am I doing wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form method="post" name="myForm" action="tac.php">
<label>Name:</label> <br />
<input name="sender">
<br /> <br />
<label>Email address:</label><br />
<input name="senderEmail">
<br />
<label>Message:</label> <br />
<textarea rows="5" cols="20" name="message"></textarea>
<br /> <br />
<input type="submit" name="submit">
</form>
<script>
$(document).ready(function() {
$("#myForm").submit(function() {
var roy = new Object();
roy.sender = $('#sender').val();
roy.senderEmail = $('#senderEmail').val();
roy.message = $('#message').val();
var jo = JSON.stringify(roy);
$.ajax({
type: "POST",
url: "mail.php",
data: {roy: jo},
success: function(msg){
alert(msg);
}
});
return false;
});
});
</script>
Change
<form method="post" name="myForm" action="tac.php">
To
<form method="post" id="myForm" action="tac.php">
This code
$("#myForm")
is looking for an element with id="myForm" not name="myForm"
Cheers
It's not working because you are trying to trigger an event of an id that doesn't exist.
$("#myForm").submit(function() { the id "myForms" it doesn't exist on < form > tag
put id="myForm" in < form > and it will work fine.
Like this: <form method="post" id="myForm" action="tac.php"> and also remove the name="myForm" because it has no use on form tags ...
I can't process the uploaded image file with php ajax requuest. It's process the text field but can't process uploaded file. Following is my form. can you tell me what is wrong in my simple code and how can i solve it ?
and without upload file i saw that it's not redirect after successfull.
html form
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/css/screen.css" />
<script src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>
// JQuery Script to submit Form
$(document).ready(function () {
$("#commentForm").validate({
submitHandler : function () {
// your function if, validate is success
$.ajax({
type : "POST",
url : "process.php",
data : $('#commentForm').serialize(),
success : function (data) {
$('#message').html(data);
}
});
return false;
}
});
});
</script>
<form class="cmxform" id="commentForm" method="get" action="" enctype="multipart/form-data">
<fieldset>
<p>
<input type="text" name="text"/>
</p>
<p>
<input type="file" name="img"/>
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
<div id="message"></div>
php process page:
<?php
$text = $_POST['text'];
$file = $_FILES['img']['name'];
if(empty($text) && empty($file))
{
echo "Both field is empty ";
}
else
{
header("Refresh:3, url=ajax_form.php");
}
?>
I'm trying to post some form data and return results but I am having trouble getting this to work:
The javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#sendthis").click(function () {
$.ajax({
type: "POST",
data: $('#theform').serialize(),
cache: false,
url: "form.php",
success: function (data) {
alert(data);
}
});
return false;
});
});
</script>
The HTML:
<form id="theform">
<input type="text" class="sized" name="name" id="name"><br />
<input type="text" class="sized" name="email" id="email">
</form>
Submit
The page to post to (form.php):
<?php
if (isset($_POST['name'])){
$result = $_POST['name'];
}
echo $result;
?>
Now, it is my understanding that when the form is submitted, it would post to form.php, and the input value of "name" would be returned in an alert box. However, I can't seem to get the form data posting (or maybe returning) correctly.
Is it a problem with $('#theform').serialize()? Maybe something else?
Any help is much appreciated.
Try this and see if it works
<form id="theform" action="/form.php">
<input type="text" class="sized" name="name" id="name"/><br />
<input type="text" class="sized" name="email" id="email" /><br />
<input type="submit" name="submit" value="Submit" />
</form>
The jquery
$("#theform").on('submit', function () {
$.post($(this).attr('action'), $(this).serialize(), function(data) {
alert(data);
});
return false;
});
I would add an error callback to your ajax request to catch if there are issues being encountered during the post. Do you have a debugger like firebug that can show you what data is being posted (and where)?
I want to upload a file with ajax
here is my code
php, html:
<form action="uploadVideo.php" method="POST" enctype="multipart/form-data">
<input type="file" name="choosefilebtn" id="choosefilebtn" size="50" />
<input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />
</form>
jquery:
$(function() {
$('#uploadbtn').click(function() {
var filename = $('#choosefilebtn').val();
alert(filename);
$.ajax({
type: "POST",
url: "uploadVideo.php",
enctype: 'multipart/form-data',
data: {
file: filename
},
success: function() {
alert("Data Uploaded: ");
}
});
});
});
when I use type sumbmit for upload button ( without ajax) it works, but with ajax it doesnt work, can any body help me,
Thanks
Edit:
Added uploadVideo.php code
$publish->remotehost=$ftpremotehost;
$publish->username=$ftpusername;
$publish->password=$ftppassword;
$publish->remotedir=CONSTANT_SERVERROOT.$folderName;
$publish->filename=$_FILES['choosefilebtn']['name'];
$publish->FTPLogin();
$publish->filecontent = fread( fopen($_FILES['choosefilebtn']['tmp_name'], "rb"),
$_FILES['choosefilebtn']['size']);
$publish->makedir($publish->remotedir);
$result=$publish->Publish();
You'll notice with the ajax call you are sending the filename, and not the contents of that file:
$.ajax({
//...
data: {
file: filename //just a name, no file contents!
},
//...
});
the only way that I am aware of sending file data via ajax is using a hidden iframe and submitting a form to that
i.e. have
<iframe style="display: none" id="formtarget" />
<form action="uploadVideo.php" method="POST" enctype="multipart/form-data"
target="formtarget">
<input type="file" name="choosefilebtn" id="choosefilebtn" size="50" />
<input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />
</form>
markup
<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="FileInput" id="FileInput" type="file" />
<input type="submit" id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="progressbox">
<div id="progressbar"></div>
<div id="statustxt">0%</div>
</div>
<div id="output"></div>
jquery
$(document).ready(function () {
var options = {
target: '#output', // target element(s) to be updated with server response
beforeSubmit: beforeSubmit, // pre-submit callback
success: afterSuccess, // post-submit callback
uploadProgress: OnProgress, //upload progress callback
resetForm: true // reset the form after successful submit
};
$('#MyUploadForm').submit(function () {
$(this).ajaxSubmit(options);
return false;
});
});