so i've been trying to do a reverse image search request through ajax, and it's giving me 302 errors. looking at the firebug console, i found out that the url in the response header sent back by google is linking me to the results, but i have no idea how to access that and send another ajax query to the new location. any help would be appreciated!
this is the response header:
This is my current code:
<form action="http://images.google.com/searchbyimage/upload" id="contactForm1" method="post"
enctype="multipart/form-data">
<input type="hidden" name="image_url" id="image_url" />
<input type="hidden" name="btnG" id="btnG" value="Search" />
<input type="file" name="encoded_image" id="encoded_image" />
<input type="hidden" name="image_content" id="image_content" />
<input type="hidden" name="filename" id="filename" />
<input type="hidden" name="hl" id="hl" value="en" />
<input type="hidden" name="bih" id="bih" value="507" />
<input type="hidden" name="biw" id="biw" value="1920" />
<input type="button" name="submit" value="Submit" />
</form>
$(document).ready(function () {
$("form").bind("click", "input[type='button']", function () {
var formData = new FormData($("form")[0]);
$.ajax({
type: "post",
url: "http://images.google.com/searchbyimage/upload",
enctype: 'multipart/form-data',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (text) {
console.log(text);
}
});
});
});
I think you should try with this:
var formData = new FormData($(this).closest("form").serialize());
Related
I have a HTML form
<html>
<head></head>
<form>
<input type="text" name="question[]" />
<input type="text" name="question[]" />
<input type="file" name="image" />
<input type="submit" name="save" />
</form>
</html>
Now to submit form with ajax
I have ajax code but its not working. It's get only one value.
$("#submit").click(function() {
var que_id = $("input[type='text'][name='question[]']").val();
$.ajax({
type: "POST",
url: "action.php",
data: {"que_id": que_id},
success: function(result) {
$("#question_wrap").html(result);
}
});
});
How do I do it?
Send form data to php file using ajax
add enctype to your form
<form id="questionForm" action="" method="post" enctype="multipart/form-data">
<input type="text" name="question[]" />
<input type="text" name="question[]" />
<input type="file" name="image" />
<input type="submit" name="save" />
</form>
Pass form data to php file using serialize
$.ajax({
url: 'action.php',
data: $("#questionForm").serialize(),
method: "post",
success: function (result) {
$("#question_wrap").html(result);
}
});
access form values in PHP file using the field name
<?php
foreach($_POST['question'] as $key => $value){
// your logic
}
$filedata= $_FILES['image'];
?>
I have this code that keeps failing do do its job. I'm trying to pass file data ass well as ID to the php side, but it keeps failing. I don't know what I'm doing wrong. Please help.
$(document).ready(function() {
$('#form_upload').submit(function(event) {
event.preventDefault();
$.ajax({
url: 'updateFile.php',
type: 'post',
contentType:false,
cache: false,
processData:false,
data: {docID: document.getElementById('txt_docID').value, formUpload: new FormData($('#form_upload'))},
success: function(data){
alert(data);
}
});
return false;
});
});
<div id="divItemSelector" >
<form id = 'form_upload' class 'uploadform' action="updateFile.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileUpload" id="fileUpload" >
<input id='txt_docID' type="text" name="txt_docID" style="visibility:hidden">
<input type="button" value="Close" name="btn_close" onclick = "hideDiv()" style="float: right;">
<input type="submit" value="Upload PDF" name="submit" style="float: right;">
</form>
and on php side im trying to use
$_POST['docID']
and
$_FILES["fileUpload"]["name"]
to get to my data.
in your code type: 'post' should be method: 'post'
I am submiting form using JavaScript. Now I want to store/move image into folder using javaScript.
HTML Code -
<form id="exampleForm" method="post" action="" enctype="multipart/form-data" >
<input type="file" name="imagename" id="imagename" />
<input type="button" name="save_exit" id="save_exit" onclick="submitForm('add_question_sql.php')" value="Save & Exit" />
</form>
JavaSript Code-
function submitForm(action)
{
document.getElementById('exampleForm').action = action;
document.getElementById('exampleForm').submit();// submiting form
}
So how to sent image details (name, size, temp_name,error) to action page for move uploading process.
Try this
<form id="exampleForm" method="post" enctype="multipart/form-data" >
<input type="file" name="imagename" id="imagename" />
<button>Submit</button>
</form>
Ajax:
$("form#exampleForm").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url:'add_question_sql.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
I have two forms, one for uploading a file and another for filling the form with information. I need to upload the file without refreshing the page first and then submit the form using ajax. And here are the codes:
form_file
<h1>Insert Employee</h1>
<form id="form">
<input id="name" placeholder="arabic name.." type="text" name="name_ar"/><br>
<input id="name" placeholder="english name.." type="text" name="name_en" value=""/><br>
<input id="name" placeholder="arabic department.." type="text" name="dep_ar" /><br>
<input id="name" placeholder="english department.." type="text" name="dep_en" /><br>
<input id="name" placeholder="arabic job.." type="text" name="job_ar"/><br>
<input id="name" placeholder="english job.." type="text" name="job_en" /><br>
<input id="name" placeholder="extention#.." type="text" name="ext" /><br>
<input id="name" placeholder="office#.." type="text" name="office" /><br>
<input id="name" placeholder="mobile#.." type="text" name="mobile" /><br>
<input id="email" placeholder="email" type="text" name="email"/><br>
<br /><br />
<div class="upload_form">
<form id='form1'>
<input type="file" name="userfile" size="20" />
<input type="button" value="upload" id="upload" />
</form>
<br/><br/>
</div>
<input type="button" value="Click" id="submit"/>
<input type="reset" value="Reset"/>
</form>
</div>
AND HERE IS THE AJAX: I know how to submit data using ajax but I need help for how to upload a file using ajax without refreshing the page, and then take the name of that file, send it again with the form, and save it to database.
<script>
$(document).ready(function(){
$('#upload').click(function(){
console.log('upload was clicked');
//ajax POST
$.ajax({
url:'upload/do_upload',
type: 'POST',
success: function(msg) {
//message from validation php
//append it to the contact_form id
$('#uploud_form').empty();
$('#uploud_form').append(msg);
}
});
return false;
});
$('#submit').click(function(){
console.log('submit was clicked');
//empty msg value
//$('#msg').empty();
//Take form values
var form_data = {
name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val()
};
//ajax POST
$.ajax({
url:'',
type: 'POST',
data: form_data,
success: function(msg) {
//message from validation php
//append it to the contact_form id
$('#contact_form').empty();
$('#contact_form').append(msg);
}
});
return false;
});
});
</script>
Not sure whether I get it properly or not. I will try to answer as per my understanding.
You need to write server side code which will save the image on server.
I believe you are able to make the AJAX call to initiate point 1.
From your upload service (point 1), your should return the "relative path" of the image which was uploaded.
In success callback of your AJAX call (point 2) you should be able to capture the relative path.
Once the relative path has been captured you should add it to DOM or say any element.
Then you can start another AJAX call or post back (submit form) based on your requirement.
If this is not the problem then please be specific in what you need and provide more information.
I do it like this and it's work for me :)
<div id="data">
<form>
<input type="file" name="userfile" id="userfile" size="20" />
<br /><br />
<input type="button" id="upload" value="upload" />
</form>
</div>
<script>
$(document).ready(function(){
$('#upload').click(function(){
console.log('upload button clicked!')
var fd = new FormData();
fd.append( 'userfile', $('#userfile')[0].files[0]);
$.ajax({
url: 'upload/do_upload',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
console.log('upload success!')
$('#data').empty();
$('#data').append(data);
}
});
});
});
</script>
Trying to post some data at URL: "
$(function() {
var frm = $(document.myform);
var data = "?lm_po_id=154668&authentication=ThisisAuth&description=ThisIsDesc";//JSON.stringify(frm.serializeArray());
//var data = JSON.stringify(frm.serializeArray()); // Also tried this
alert(data + "I am about to POST this:\n\n" + data);
$.postJSON = function (url, data, callback) {
$.ajax({
'url': frm.attr("action"),
'type': 'post',
'processData': false,
'data': JSON.stringify(data),
contentType: 'application/json',
success: function (data) { callback(JSON.parse(data)); },
});
};
});
This call the right function properly but when i check it in debug mode all parameters have null values, can some one help me what wrong i am doing.
Here is my HTML form
<form action="http://192.168.0.124:8080/Ilex-WS/service/ilexmobile/poImageUpload" name="myform" method="post" enctype="multipart/form-data">
<input type="text" value="158664" name="lm_po_id" /><br />
<input type="text" value="AuthCodeMD5" name="authentication" /><br />
<input type="text" value="584" name="imagenumber" /><br />
<input type="text" value="ImgName.png" name="name" /><br />
<input type="text" value="This is desc" name="description" /><br />
<input type="file" value="" name="uploadedimage" /><br />
<input type="button" value="Submit" onclick="javascript:document.myform.submit()"/><br />
</form>
Thanks in advance....
The only thing your JavaScript does is alert a string.
You never bind an event handler to the form's submit method, and even if you did it wouldn't fire since you use form.submit() to submit the form instead of a submit button. (So this submits form encoded data instead of JSON encoded data).
You store a function in $.postJSON, but you never call it, and it has a local variable called data which would mask var data = "?lm_po... anyway (not that it would make sense to use that value since it is a string and you run JSON.stringify over data).