1 Replies - 4831 Views - Last Post: 01 July 2011 - 06:52 AM

#1 itdoell  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 239
  • Joined: 13-January 11

Submitting a file (without page refresh) using AJAX

Posted 30 June 2011 - 08:45 PM

So I'm at a stand-still at the moment, I have this message system up and running properly (when I use the regular submit) but I do not know how I submit a file using AJAX. Does anyone know how this can be accomplished?


//form
<form name="messageme" enctype="multipart/form-date"  method="POST">
<input type="hidden" name="to" id="to" value="<?php echo $id ?>">
<input type="text" id="messagetitle" name="messagetitle" value="Title" onblur="if(this.value.length == 0) this.value='Title';" onfocus="if(this.value == 'Title') this.value='';">
<textarea id="messagepost" name="messagepost" onblur="if(this.value.length == 0) this.value='Message...';" onfocus="if(this.value == 'Message...') this.value='';">Message...</textarea>
<div class="file-upload" id="mupload">
<label for="file-upload">Upload</label>
<input id="file-upload" type="file" class="file" name="file" onchange="checkext()" />
</div>
<input type="text" id="mlink" value="Add a link..." onblur="if(this.value.length == 0) this.value='Add a link...';" onfocus="if(this.value == 'Add a link...') this.value='';">
<div id="mfilestatus"></div><div id="sendbutton" class="button">Send</div>
</div>
</div>
</form>

//process form
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$('#sendbutton').click(function() {
var to = $('#to').val();
var messagetitle = $('#messagetitle').val();
var messagepost = $('#messagepost').val();
var dataString = 'to='+ to + '&messagetitle='+ messagetitle + '&messagepost=' +messagepost;
$.ajax({
type: 'POST',
url: 'http://localhost:8888/projo/execs/message.php',
data: dataString,
});
});
</script>

This post has been edited by itdoell: 30 June 2011 - 08:46 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Submitting a file (without page refresh) using AJAX

#2 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Submitting a file (without page refresh) using AJAX

Posted 01 July 2011 - 06:52 AM

Hi,

Yes you can do this. I found the jQuery Form Plugin very useful in this regard. You simply build the form as usual and use the .ajaxSubmit() method instead of the default action.

Here is a post about it from not too long ago where a demonstration was done.

Hope this helps!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1