Form Submit using HREF and then Load results in DIV

Form submission in HREf and then load results in DIV layer

[paperso]

header.tpl

<script type="text/javascript">
$(document).ready(function(){
$("#shout_me").click(function(){
$("#shout_list").load("{PSOUP_SITE_URL}psoup-request.php?mode=shout");
});
});
</script>

psoup-request.php

$mode = sanitize($_GET['mode']);
if (!isset($mode) || empty($mode)) { $mode = 'index'; }
switch($mode) {
case 'shout':
if (! $db->Query("SELECT * FROM " . COMMENTS_TBL . " WHERE comments_approved='1' AND comments_spam='0' AND comments_postid='0' ORDER BY comments_id DESC"));
$db->MoveFirst();
while (! $db->EndOfSeek()) {
$row = $db->Row();
echo '<div class="rows"><a href="' . displayHTMLentities($row->comments_url) . '" class="shout_user">' . displayHTMLentities($row->comments_name) . '</a>&nbsp;' . displayTEXT($row->comments_text) . '</div><!--s,e.rows-->';
}
echo 'Posted!';
break;
}

homepage.tpl

<form action="" method="post" name="postForm">
<center><textarea name="comment_text" id="watermark" class="shout" rows="20" cols="60"></textarea></center><br />
<div align="right" style="margin-top:-10px;">
<input type="text" name="" value="Name" />&nbsp;
<input type="text" name="" value="URL" />&nbsp;
<input type="text" name="" value="EMAIL" />
</div>
<div class="shout_right">
<span class="show"><a href="javascript:void(0);">Show/Close</a></span>&nbsp;&nbsp;
<span class="show"><a id="shout_me" class="share"> Share</a></span>
</div>
</form><br class="spacer" />
<div id="shout_list"></div>


<script type="text/javascript">
// displays div#rankings
$("span.show").click(function () {
if ($("div#shout_list").is(":hidden")) {
$("div#shout_list").show(10);
} else {
$("div#shout_list").hide(10);
}
});
</script>

Hello guys! I have the code above where I can successfully click the Share Link (button) and then prints the results in <div id="shout_list"></div> like Twitter. Oky that goes well. But my problem is...

How can I submit this form without using submit button and then load the results in DIV id="shout_list" without PAGE LOAD?

As you can see, I'm using a link to post the form. I can get around this by including a href="javascript: submitform()" in the link but the page reloads.

What I want to achive is:

1. Submit the form in HREF
2. Load the form in DIV id="shout_list"
3. Without PAGE LOAD!

It's confusing and thank you guys hoping for a response^^

[paperso]

Note: I have no problem in adding mysql records on the psoup-request.php. I just forgot to include it in my post above.

[paperso]

HElp!

[Fotiman]

It looks like you might be using jQuery. So you should look into the jQuery Ajax API [api.jquery.com]. In particular, the jQuery.post() [api.jquery.com] method. You would want to do something along the lines of:

header.tpl

<script type="text/javascript">
$(document).ready(function(){
  $("#shout_me").click(function(){
    // 1. Submit the form in HREF (Without PAGE LOAD!)
    $.post('', $('form').serialize(), function (data) {
      // Do you need to do anything with the results?
    });
    // 2. Load the form in DIV id="shout_list" (Without PAGE LOAD!)
    $("#shout_list").load("{PSOUP_SITE_URL}psoup-request.php?mode=shout");
  });
});
</script> 

[paperso]

Hello @ Fotiman, thanks for the reply i'll check the jQuery.port() you recommended.