stuck: basic ajax fuction

stuck: basic ajax fuction

Hello, i am new to jquery and i am kinda stuck here. i have a simple form and what i am trying to do is get a "confirmed message" after submission. when the form is submitted, the returned value $("#show"+Id).html("contact form submited"); does not stay in the page. it disappears. any help would be great.
Thanks

<html>
<head><title>hello world</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".comment_submit").click(function(){

var element = $(this);
var Id = element.attr("id");

var test = $("#textboxcontent"+Id).val();
var good = $("#textlength"+Id).val();
var check = $("#checkbox"+Id).val();
var dataString = 'textcontent='+ test + '&com_msgid=' + Id + '&textlength=' + good + 'chekckbox' + check;

$("#flash"+Id).show();
$("#flash"+Id).fadeIn(300000).html('<img src="ajax-loader.gif" align="absmiddle"> loading.....');
$.ajax({
type: "POST",
url: "digg.html",
data: dataString,
cache: false,
success: function() {

$("#show"+Id).html("contact form submited");

}
});
//alert(dataString);

});
return false;
});

</script>


<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.comment_box
{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
h1
{
color:#555555
}
a
{
text-decoration:none;
color:#d02b55;
}
a:hover
{
text-decoration:underline;
color:#d02b55;
}
*{margin:0;padding:0;}


ol.timeline
{list-style:none;font-size:1.2em;}ol.timeline li{ position:relative;padding:.7em 0 .6em 0; height:45px; border-bottom:#dedede dashed 1px}ol.timeline li:first-child{border-top:1px dashed #dedede;}
.comment_button
{
margin-right:30px; background-color:#dedede; color:#000; border:#000 solid 2px; padding:3px;font-weight:bold; font-size:11px; font-family:Arial, Helvetica, sans-serif
}

.comment_submit
{
background-color:#3b59a4; color:#FFFFFF; border:none; font-size:11px; padding:3px; margin-top:3px;
}
.panel
{
margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; height:45px; padding:6px; width:400px;
display:none;
}
.load_comment
{
margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; height:25px; padding:6px; width:400px; font-size:14px;

}
.flash_load
{
margin-left:50px; margin-right:50px; margin-bottom:5px;height:20px; padding:6px; width:400px;
display:none; }

</style>
</head>
<body>

<div id="show1111"></div>
<div id="flash1111" class='flash_load'></div>
<form action="" method="get" name="1111">
<input type="text" value="hello world" id = "textlength1111"><br />
<input type="checkbox" id = "checkbox1111" value="yes">What<br/>
<textarea style="width:390px;height:23px"id="textboxcontent1111" ></textarea><br />
<input type="submit" value=" Comment_Submit " class="comment_submit" id="1111" />
</form>





</body>

</html>