ajax upload file after choose file auto submit - javascript

I tried to make ajax upload and I don't wanna make a submit button. just let user when choose file done auto submit..
I tried use change() to get form data change but after click second time it will alert not just once. I don't know why , is there any better idea to make it work!
HTML
<div class="article-create">
<table class="table">
<td>
<form action="" enctype="multipart/form-data" method="post">
<input type="file" name="image" class="browseimage">
</form>
<li class="browseimage-fake btn btn-success btn-sm">Choose File</li>
js
$('.article-create .table').on('click', '.browseimage-fake', function() {
$(this).closest('td').find('.browseimage').click();
$(this).closest('td').find('.browseimage').change(function(){
alert('change');
// check FormData and ajax ..
});
});

Try this code. Alert calls just one time:
$(document).on('change', '.browseimage', function(){
alert('change');
// check FormData and ajax ..
});
http://jsfiddle.net/E9mPw/20/

simple JQUERY change function.
$(".browseimage-fake").change(function() {
console.log("changed")
});

This code worked for me but only when I had a valid url for the action attribute of the form.
<script>
$(".browseimage").change(function () {
document.forms[0].submit();
});
</script>

Related

How to make a Form Action work with JQuery?

My action function is not working. I am not sure if I missed something in my syntax. or you have to call it as a function in a different way. I am trying to put the form action in with JQuery instead of through the form to make sure that when it is done it goes back to the main page it called this from.
The old Code would load the form and give the user a blank screen instead of staying on the current page.
Old Code:
<form id="import_audit_form" name="import_audit_form" action='./edit_audits.php?action=process_import' method="post" enctype='multipart/form-data'>
New Code:
<script>
$(document).ready(function(){
$('#audit_submit').click(function(){
$('#import_audit_form').attr('action', 'edit_audits.php?action=process_import',{
function(data){
alert("Audit Imported");
}); //end import_audit_form
}); // End audit_submit
}); //End document function
</script>
<form id="import_audit_form" name="import_audit_form" method="post" enctype='multipart/form-data'>
<input type="submit" class="btn btn-default" name="audit_submit" id="audit_submit" value="TRANSFER" /></td>
</form>

How to add a AJAX submit form inside a notification without reloading the page?

I am using the jQuery plugin for notifications toastr js (http://codeseven.github.io/toastr/) and I am trying to add a contact form in the notification balloon and when submitted to use AJAX.
Even though that the form is working outside the toastr.info('') I can not make it happen in the script. when I click the submit, it refreshes the page.
How can i fix this ?
Ajax Script
$(function(){
$("#contactform").submit(function(event){
event.preventDefault();
$.post('mailme.php', $("#contactform").serialize(), function(data) {
});
});
});
HTML Form
<form id="contactform" method="post" name="myform">
<input name="phone" type="text"><input id="submit" name="Submit" type="submit" value="send">
</form>
toastr.info('I put the above HTML code in here')
Fiddle
http://jsfiddle.net/e0k6e0vc/2
Try unbinding submit at the end as below:
$("#contactform").on('submit',function(event){
event.preventDefault();
$.post('mailme.php', $("#contactform").serialize(), function(data) {
});
$("#contactform").unbind('submit');
return false;
});
UPDATE
Ok.. Since the form was dynamically getting added it wasn't identifying the submit event and hence below approach will do the work:
DEMO HERE
$(document).on('submit',"#contactform",function(event){
event.preventDefault();
$.post('mailme.php', $("#contactform").serialize(), function(data) {
});
$("#contactform").unbind('submit');
return false;
});

PHP doesn't process the form

I'm having a little problem here.
I have a form with a jQuery that disables the submit input when the form is submited.The problem is: I use PHP to process the data when the input submit is clicked. But apparently the button is being disabled first, then PHP can not perform the processing. I need to find a way to prevent this, take a look in the code snippets:
<form class='send' action='{$_SERVER['PHP_SELF']}' method='post'>
<!--Form data-->
<input type='submit' name='finish' value='Send'/>
</form>
jQuery function to disable:
$('.send').on('submit', function()
{
$(this).find('input[type="submit"]').prop("disabled", true);
});
And then the PHP code to process:
if(isset($_POST['finish']))
{
//Do things
}
As I said, the PHP don't process the form because JS disabled the button to prevent multiple submitions. How to process PHP before disable the button? Thanks!
Since you are disabling the submit button it will not get send over to to server in the $_POST variable so your code doesn't work, as you have said.
Another way to do what you are looking for is to create a hidden HTML input
<input type="hidden" name="form">
Then when you check if the form is send, you will use
if(isset($_POST['form']))
{
//Do things
}
You can solve it easily changing your submit button by a simple button:
<form class='send' action='{$_SERVER['PHP_SELF']}' method='post'>
<!--Form data-->
<input type='button' name='finish' value='Send'/>
</form>
$('input[name="finish"]', '.send').on('click', function(){
$(this).prop('disabled', true);
$('.send').submit();
});

using isset($_POST['upload']){ ... } and calling it on form input type file change and not the submit button

In my php page,
I have a form as:
<form enctype = 'multipart/form-data' method="post">
Select File:
<br/>
<input type="file" name="file" />
<input type="submit" name="upload" value="Upload" />
</form>
When I submit the form on clicking the submit 'upload', the following php is called which is on the same php page:
<?php
if (isset($_POST['upload'])) { ...Do stuff... }
?>
Now, I dont want to use the submit in my html form and want to trigger this php whenever a file in the input type file is selected. i.e. the form should be submitted automatically on file selection without the submit button. Also, i want a if condition such as isset($_POST['']) and dont want to use just a post check as $_SERVER['REQUEST_METHOD'] == 'POST'
Any help will be appreciated.
All you have to set an event handle for change in input file
<script type="text/javascript">
$(function() {
$("input:file").change(function (){
$('form').submit();
});
});
</script>

INPUT type Image with onclick doesn't work with JS

Newbie coder here. I'm making a rating website, and am trying to make it so that when user click "Yes" as an image, it invoke a JS which display an Ajax loader gif and then shows the results. Problem is that onclick here doesn't seem to trigger the function:
<form action="" method="get" id="myform">
<script>
$(document).ready(function(){
$("#myform").submit(function(){
$('#chart1').hide();
$('.ajax-load').show();
var data = $("#myform").serialize();
submitRating(data, false, function(){});
setTimeout($('.ajax-load').hide(),1000);
$('#chart1').show();
return false;
});
});
</script>
<div id="chart1"><div>
<input type="image" src="images/yes.png" name="yes" value="0" onclick="$('#myform').submit();"/>
</form>
Instead of $('#myform').submit(), if I try an alert(), it works, so I'm puzzled as to why this doesn't work.
Thanks!!
try using: .trigger("submit")
more info: http://api.jquery.com/trigger/
And if that doesnt work the only thing I can think of is having a blank action attribute in your form tag...
It might have to do with the fact that type=image has a default behavior of submitting when clicked. This could cause interference with your submit() function.

Categories