I have the following code for an HTML form:
<form id="idForm" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<input type="submit" name="submit" value="Submit" />
</form>
and the following Javascript code on the same page where the form is located. Also, this code is written below the form code:
$("#idForm").submit(function() {
alert("hi");
var url = "submit.php";
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(),
success: function(data) {
alert(data);
}
});
return false;
});
And here is the PHP code that I'm using to see if the form data is being posted:
if (isset($_FILES['image'])) {
$image = $_FILES['image'];
echo $image;
}
if (isset($_POST['first'])) {
$name = $_POST['first'];
echo $name;
}
With the above code, it seems as though the attached file is not being sent to the PHP file. Only the values are being sent, since they are echoed when I inspected the element using Google Chrome dev tool.
I want to be able to post both text value and files to the PHP file for processing.
Why am I getting this problem? How do I fix this?
Also, as part of the solution, I want to prevent the page from being refreshed when the submit button is clicked.
Thanks much!
Unfortunately input[type='file'] cannot be submitted by .serialize(), you have to manipulate by formData.
You will find a very good formData example in here
Related
<script>
$(document).ready(function(){
$("#date").click(function(){
start = $("#date_start").val();
end = $("#date_end").val();
});
});
</script>
<input name='date_A' type='text' id='date_start' />
<input name='date_B' type='text' id='date_end' />
<input type="button" id="date" class="button" value="check" />
The question is how to get value of "start" and "end" from the jquery to put that in PHP variable without post it first to database?
<?php
$start_date = "";
$end_date = "";
?>
The both variables above need the value of the variable "start" and "end" from jquery above
$(document).ready(function(){
$("#date").click(function(){
start = $("#date_start").val();
end = $("#date_end").val();
$.ajax({
type: 'post',
url: '/your_page_link/',
data: {start : start, end : end},
success: function (res) {
}
});
});
});
In PHP:
<?php
if(!empty($_POST)){ // If you are using same page, then it'll help you to detect ajax request.
$start_date = $_POST['start'];
$end_date = $_POST['end'];
}
?>
I fear you want to read values from jQuery and inject them in PHP in the same page, which is impossible.
You have to understand what PHP is first. It generates the page, that is then sent to the browser, that then executes jQuery code. PHP code completely disappeared from the generated page. jQuery has no idea of PHP's presence, they just can't interact this way. You must use a GET or POST query in order to send values to a PHP page, back to the server.
You want to read things like this : Difference between Javascript and PHP
This is what you have to do.
<form id="form" name="form" action="" method="post">
<div id="block">
<input type="text" name="startDate" id="startDate" placeholder="Start date" required/>
<input type="text" name="endDate" id="endDate" placeholder="End date" required />
<input type="submit" id="Download" name="Download" value="Download"/>
</div>
</form>
and put this code in the same page
<?php
$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];
?>
I have a problem when validating a form, the fields are correctly checked, but it return the current html source code instead of the value inside "ctrl.php", in other words the stuff inside the "success bloc" is done but I get nothing from "ctrl.php", just the current page in html is returned:(
Any idea ?
$("#form_contest").validate({
submitHandler: function(form){
var email=$("#email").val();
$.ajax({
url: "ctrl.php",
data:{name:$("#name").val(),email:email},
success: function(data){
alert(data); //data is the current source code??
//other stuff after is okay
}
});
return false;
}
});
the html form :
<form id="form_contest" method="post">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="submit" id="submit-contest" name="submit-contest" value="Enter" />
</form>
ctrl.php :
<?php
echo 1;
?>
the page ctrl.php couldn't be reached and I had an nginx rule that redirected 404 error to the homepage. Not easy to find.. but that's why ajax always gave me the homepage source code..
i doing image upload to ajax and send to php with a form .but i have search a lot of source but still no idea.can anyone help me complete the code ?
<form name="registerform" id="data">
<div id="formleft">
<input type="email" name="email" placeholder="Email Address"><br>
<input type="file" id="pic" name="profile_pic" class="image_input" />
<input type="button" name="register" value="Sign Up" onclick="re2()" /><br>
</div>
</form>
function re2()
{
var image=document.getElementById("pic").src;
var re_email1=$("[name=register_email]").val();
$.ajax({
type : "get",
url : "add.php",
data : "type=regis2&image="+image+"&re_email="+email,
success : function(data){
alert(data);
*/ how i get the image file from form and pass the file to here and send ?? */
}
});
}
<?php
if ($_GET['type'] == "regis2")
{
$image=$_GET['image'];
$email=$_GET['re_email'];
$target_Path = 'image/';
$target_Path = $target_Path.basename( $_FILES['image']['name'] );
move_uploaded_file($_FILES["image"]["tmp_name"] , $target_Path);
}
?>
}
how can i pass image using ajax.becuase i have search by google but still no idea. can anyone complete the code for me?
really need a lot of help
As #I Can Has Kittenz mentioned in the comment you can use FormData to upload file using ajax. but the problem is compatability, you wont get support over old browsers. For complete implementation ajax file upload using FormData check this article
sorry for the dumb question but I can't seem to get this going and I figured I best give you more info than not enough -
I have a form that I am running inside a loop in php like this:
<form name="primaryTagForm'.$post->ID.'" id="primaryTagForm'.$post->ID.'" method="POST" enctype="multipart/form-data" >
<fieldset class="tags">
<label for="post_tags'.$post->ID.'">Tags:</label>
<input type="text" value="" tabindex="35" name="postTags'.$post->ID.'" id="postTags'.$post->ID.'" />
</fieldset>
<fieldset>
<input type="hidden" name="submitted" id="submitted" value="true" />
'.wp_nonce_field( 'post_nonce', 'post_nonce_field' ).'
<button class="button" type="submit">Tag</button>
</fieldset>
</form>
I have tried adding my ajax under that form (Still within the loop so I can grab the post_id) and in my console it my tag-ajax.php file is posted just fine. Here is my weak attempt at that based on this: Save data through ajax jQuery post with form submit and other like questions.
<script>
jQuery(document).ready(function($) {
$(".button").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "'.get_stylesheet_directory_uri().'/tags-ajax.php",
data: "primaryTagForm'.$post->ID.'",
success: function(data){
//alert("---"+data);
alert("Tags have been updated successfully.");
}
});
});
});
</script>
And lastly here is what is in my tags-ajax.php file -
if(isset($_POST['submitted']) && isset($_POST['post_nonce_field']) && wp_verify_nonce($_POST['post_nonce_field'], 'post_nonce')) {
wp_set_object_terms( $post->ID, explode( ',', $_POST['postTags'.$post->ID] ), 'product_tag', true );
echo'Success!';
}
So when I try running this a couple of things happen by looking in the console, if I hit submit on one of the forms then all them forms on that page post to tags-ajax.php (Im sure it is because I am doing this in a loop but not sure how else to do it and bring in post->ID on tags-ajax.php)
The second, most important thing is that nothing actually saves, I click the "Tag" but (submit) and I get those success alerts (for each post unfortunately) but when I click through those the tags are not actually saved.
My question: How do I get the data to actually save with the ajax/php and how can I have that post refresh without reloading the page so the user sees they actually were added?
Latest Update: After making the serialize edits mentioned below I submit my form and check the console and see the post method is getting a 500 internal server error.. Im thinking if my problem is coming from because I have the form and an inline script with the ajax running in a loop? So there are technically 20 posts/forms/inline scripts on a page and when you submit one, all of them submit which may be causing the 500 internal error?
The data: option in ajax should be
data: $("#primaryTagForm'.$post->ID.'").serialize(),
Use serialize
You have to change
data: "primaryTagForm'.$post->ID.'",
to
data: $("#primaryTagForm'.$post->ID.'").serialize(),
Simplify your markup. You dont have to use id attributes everywhere. Just include a hidenn tag in your form with the value of $post->id. Also echo the ajax url at the form's acton attribute.
So the html should be similar to this:
<form method="POST" action="' . get_stylesheet_directory_uri() .'/tags-ajax.php" >
<input type='hidden" name="id" value="'.$post->ID.'">
<fieldset class="tags">
<label>Tags:</label>
<input type="text" value="" tabindex="35" name="tags" />
</fieldset>
<fieldset>
<input type="hidden" name="submitted" id="submitted" value="true" />
'.wp_nonce_field( 'post_nonce', 'post_nonce_field' ).'
<button class="button" type="submit">Tag</button>
</fieldset>
</form>
Then you can use a script like this:
jQuery(document).ready(function($) {
$(".button").click(function(e) {
e.preventDefault();
var $target = $(e.target),
$form = $target.closest('form');
$.ajax({
type: "POST",
url: $form.prop('action'),
data: $form.serialize(),
success: function(data){
//alert("---"+data);
alert("Tags have been updated successfully.");
}
});
});
});
I try writing code using JavaScript
The file sending technology AJAX
HTML code
<form action="" method="post" id="contact_form" enctype="multipart/form-data">
<input type="text" name="name" id="name">
<input type="text" name="email" id="email">
<input type="file" name="cv" id="cv">
<input type="submit" name="submit" id="contacts_send">
</form>
JavaScript code
jQuery(document).ready(function(){
jQuery("#contacts_send").click(function(){
$.ajax({
type : 'POST',
url : 'process_job.php',
dataType : 'json',
data: { cv : $('#cv').val()
name : $('#name').val(),
email : $('#email').val()},
success: function () {
alert("Data Uploaded: ");
}
});
})
})
I researched the internet I did not find a similar solution to my problem
I tried this solution but it did not work How can I upload files asynchronously?
i want my code do like this http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html
the issue that you might be having is that you are not getting the files as you should get and instead you are trying to just catch them as simple queryString objects.
Use this:
if ($_FILES["file"]["error"] > 0) {
And then run the code. It will work, since the code is going good!