How can I be able to post one image and 'two textareas values to database simultaneously using AJAX and PHP?

Question

Modification to this script so that I can insert image and texts simultaneously (JSON). with jquery.form.js plugin , I want to insert both image and textarea values...Tell me if there could be any other alternatives to do it without using jquery.form.js plug in. I'm new to ajax...please help me .

Image goes to ajaximage.php and texts go to ajtest.php,When I upload image and text simultaneously, image is inserted,then texts are inserted,one submit uses two rows(when textarea and image fields are not empty), 1st row is used for image and 2nd row for text areas , This is my problem , I want to insert image and texts in one row.

Script :

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

<script type="text/javascript">
$(document).ready(function() { 


$('#photoimg').live('change', function(){ 
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();

        });
    }); 

</script>

<script type="text/javascript">
$(document).ready(function() {
$(".submit_button").click(function() {
var message = $('#content').val();
var textcontents = $("#source").val();


$.ajax({

type: "POST",
url: './ajtest.php',
data: {tc:message,ts:textcontents},
cache: true,

});

});
});
</script>

FORM :

<form id="imageform" method="post" enctype="multipart/form-data"           action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>


<form id="text" method="post" action=''>
<textarea style="width:728px; font-size:14px; height:60px; font-weight:bold;      resize:none;" name="content" id="content" placeholder="Thread content" ></textarea><br />    <br/>
<textarea style="width:728px; font-size:14px; height:40px; font-weight:bold;   resize:none;" name="source" id="source" placeholder="Thread source" ></textarea><br />


<input type="submit" value="Post" name="submit" class="submit_button"/>
</form>

Answer 1

You could use the FileApi( http://www.w3.org/TR/FileAPI/ ) to get the image data and convert it to a dataURL, and send it as a post param(string), but that really depends on the browsers that you are supporting. Alternatively you could use a hidden iframe as the forms target, so your page will not be redirected. See this link: http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html