I want to upload a file with jquery.form plugin but the action isn't work with change function based on input type file.
This is the code:
HTML :
<form method='POST' id='upload_image' action='ajax-upload_unpublished_image' enctype='multipart/form-data'>
<input type='file' id='photo_post' name='posting_photo'>
</form>
<div id='#prev'></div>
JS:
$(document).ready(function(){
$('#photo_post').change(function(){
alert('ganti');
$('#upload_image').ajaxForm({
beforeSend: function(){
$('.uu').html('sending');
},
success: function(html){
$('#prev').html(html);
},
error: function(data){
console.log(data);
}
});
});
});
I want the file to upload at every input change, like facebook upload photo, why is the ajaxForm function not working, while if I use another button to do the ajaxForm function with a click function, the file uploads.
like :
<button class='upload'>Upload</button>
$('.upload').click(function(){
//do ajaxForm function and it work
});
I dug around and this seems to work for other people.
$('#photo_post').on('change', function(){ });
Related
I am trying to create the following scenario:
A form in my index file collects input from a user, which is used to do some computation. The results of this computation should be echoed to him in a nice interface on the same page without reloading.
Currently, the results.php page is receiving the inputs correctly. Now, I just want to show it back inside the results div on the main page without reloading the results.php. .load is the wrong command for that. I need something like ".show"... Any ideas?
html:
<form action="results.php" method="post" class="ajaxform">
//all the inputs
<input type="submit" value="see your results" class="button"/>
</form>
<div id="results">
//here he should see the results.php output
</div>
jQuery
jQuery(document).ready(function(){
jQuery('.ajaxform').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( data ) {
alert('Form is successfully submitted');
setTimeout(function() {
$('#results').load('results.php');
}, 1000);
},
error : function(){
alert('Something wrong');
}
});
return false;
});});
change this
$('#results').load('results.php');
To
$('#results').html(data);
if the returned results in data variable.
If i understood your problem correctly, results.php recieves the output you would show in the div #result.
To use the return-data from ajax-request you have data as javascript variable. To show the result in the div you need the following statment in the success function from ajax-call.
$("#result").html(data);
I have a html file input box:
<input id="fileupload" type="file" data-url="/FilePage/Upload" />
<input id="up_btn" type="button" value="Upload" />
in the browser (repeatable in IE/FF and chrome) after clicking the browse button and selecting a file, no file name is displayed in the box.
I am using jquery file upload to do this, so I wonder if it is somehow interfering with the box.
$(document).ready(function(){
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").off('click').on('click', function () {
data.submit();
});
}
});
});
EDIT:
Bizarrely, changing the final line to )}; makes it work, but this is invalid syntax. Looks like it is something related to the Jquery.fileupload function
I am using the jquery file upload library ( https://github.com/blueimp/jQuery-File-Upload)
What I am trying to do
I have a HTML form which looks like this:
[input text field]
[submit button].
I want the output results to display in only a small part of the page (don't want to refresh the entire page after the button is clicked).
What I have done so far
I am using jquery load() as follows:
<script type="text/javascript">
function searchresults(id) {
$('#myStyle').load('displaysearchresults.php?id=' + id ; ?>);
}
</script>
Results will appear in a div which is exactly what I want:
<div id='myStyle'></div>
The problem
The script above works just fine (I used a variation of it elsewhere). But I have 2 problems:
1-How to call the load() script from the form. I tried this but it doesn't work:
<form id="form" name="form" method="post" action="searchresults('1')">
2-If I am not able to call the load() script from the form, how do I pass what is into the input text field to the load() script so in the end it can be proceessed by the displaysearchresults.php file???
Thanks
Currently its not working since you have a typo:
function searchresult(id) {
/^ no s
$('#myStyle').load('displaysearchresults.php?id=' + id ; ?>);
}
Here:
action="searchresults('1')"> // this should be on the onsubmit
^
Since you're intention is to submit the form without reloading, you could do something like:
$('#form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: 'displaysearchresults.php',
data: {id: 1},
type: 'POST',
success: function(response) {
$('#myStyle').html(response); // assuming the markup html is already done in PHP
}
});
});
Of course in the PHP side, just call it like a normal POST variable:
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$id = $_POST['id'];
// other stuff you have to do
// echo markup stuff
exit;
}
Ok I have been able to do what I wanted to do, i.e., displaying search results in part of the page without reloading.
Actually it is not necessary to use the ajax load() function. You can do it with the script below:
<form id="form" method="POST">
<input type="text" id="textbox" name="textbox" />
<input type="submit" name="test" />
</form>
<div id="myStyle"></div>
<p>
<script src="jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#form').on('submit', function(e){
e.preventDefault(); // prevent the form from reloading
$.ajax({
url: 'displaysearchresults.php',
type: 'POST',
dataType: 'html',
data: {text:$('#textbox').val()},
success: function(response) {
$('#myStyle').html(response);
}
});
});
});
</script>
So what is this doing:
It will "read" what the user entered in the textbox,
When the user click the "submit" button, it will put that into a POST variable and send it to "displaysearchresults.php" without reloading the page,
The search results will be displayed between the "mystyle" div.
Pretty nice.
Note for beginers: do not forget to copy the jquery file to your root folder otherwise ajax just won't work.
I need refresh <myDiv> on my webpage when the Submit button is clicked.
I created an example of what I need. I want to display the user input text inside <myDiv> when the Submit button is clicked. Currently it's not showing anything. How can I fix this?
http://jsfiddle.net/NathaliaZeed/8dn5j/2/
Thanks everybody.
You need to use complete: not done:, then, assign your val1 variable to myDiv.
Working fiddle: http://jsfiddle.net/8dn5j/14/
See below:
$('#btn').click(function(e) {
var val1 = $('#val1').val();
e.preventDefault();
$.ajax({
type: 'post',
data: {'val1':val1},
complete: function(jqXHR, textStatus){
$("#myDiv").html(val1);
}
});
});
The code in your example is good, except you forget to load the jQuery library.
If you make sure you include jQuery, the javascript code should work.
Also, your example should run on a PHP server. JSfiddle does not interpret PHP code, so that is also why the example does not work.
If you don't have a PHP server, Google for WAMP for Windows or MAMP for Mac.
Not Sure why you need php and ajax if there is only need to update the div on button click and not doing any server side processing for the need you described in question this code will work
<div class="myDiv" id="myDiv"></div>
<div class="sear">
<form action="" method="post">
Search Word: <br />
<input type="text" name="val1" id="val1" /><br />
<input type="button" value="Submit" id="btn" />
</form>
</div>
Js
$('#btn').click(function(e) {
var val1 = $('#val1').val();
$("#myDiv").html(val1);
$("#myDiv").toggle("slow");
});
By the way, you don't need to use the form-tag..
I would do it this way:
$('#btn').click(function(e) {
var val1 = $('#val1').val();
$.ajax({
type: 'post',
data: {val1:val1},
success: function(data) {
$("#myDiv").text(data);
}
});
});
For me it doesn't do anything with Ajax request.
$('#btn').click(function(e) { e.preventDefault();
$("#myDiv").html($('#val1').val());
//..ajax stuff..
});
I have an input file field to select files to upload, and I use ajax to send these pics to server. For execute all script after a file is selected, I use submit, but I think it could be better not to include the submit button and use jquery to detect when I select the file and process the submit action then.
My code:
<script>
jQuery(document).ready(function () {
jQuery('#form_up').ajaxForm({
dataType: 'json',
success: bol
});
});
function bol(datab) {
if (datab.field_empty == "bad") {
jQuery(".bol_request_fail").fadeIn(3000);
} else {}
}
</script>
<form name="form" method="post" id="form_up" runat="server" action="indexer_upload_user_pic.php" enctype="multipart/form-data" style="margin:0px;">
<input type="file" name="upload[imagen][]" id="logo2" class="file-upload"/>
</form>
I use one plugin for send the fields and all form by this you can see ajaxForm function.
The question is: How I can avoid using submit and instead send the pic when it is selected via file input?
I didnt test it, but this might work:
jQuery(document).ready(function () {
$("#logo2").change(function(){
jQuery('#form_up').ajaxSubmit({
dataType: 'json',
success: bol
});
});
});
Check the Plugin API if this dont work, I just quick checked it, and saw there is a ajaxSubmit...