I have a page with two forms. I want to submit these forms (not at the same time) via AJAX. There is no problem when I work only with one form. When I add second form and event for the second form it does not work properly, I mean this time form is submitted but not by AJAX and page reloads. This is my code.
<!DOCTYPE html>
<html>
<head>
<title>buz</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="<?php echo base_url();?>js/jquery-1.8.3-min.js"></script>
<script type="text/javascript">
$(function(){
$('form#shorten').submit(function(event){
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(text){
var response = text;
$('#shorten_msg').html(response);
}).fail(function(){
//alert fail
alert('sorry failed somehow')
});
event.preventDefault();
});
$('form#upload').submit(function(event){
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(text){
var response = text;
$('#upload_msg').html(response);
}).fail(function(){
//alert fail
alert('sorry failed somehow')
});
event.preventDefault();
});
});
</script>
</head>
<body>
<p>shorten url</p>
<label for="shorten" id="shorten_msg"></label>
<form action="shorten" method="post" id="shorten">
<input type="text" name="url" />
<input type="submit" name="shorten_submit" />
</form>
<br/>
<p>upload file</p>
<label for="upload" id="upload_msg"></label>
<form action="upload" method="post" accept-charset="utf-8" enctype="multipart/form-data" id="upload">
<textarea name="file_description"></textarea><br/>
<input type="file" name="userfile" /><br/>
<input type="submit" name="upload_button" value="upload"/>
</form>
</body>
</html>
When I submit the first form (form for shorten) it works nice, but it does not work for upload form. What is wrong with code? The upload does not work, alerts me the failure as defined in my code. Should file uploads be handled in another way?