onclick form send via ajax no page refresh

Question

I've been racking my brains for days looking at examples and trying out different things to try and get my form to submit with Ajax without a page refresh. And Its not even sending the data now.. I don't know what I'm doing wrong..Can someone run through my ajax and form please.

Toid is the users id and newmsg is the text in which the user submits. The two values get sent to the insert.php page.

I would really appreate the help. I'm new to Ajax, and I look at some of it and don't have a clue. If I finally got it working, It may help me realize what I've done wrong. I am looking up tutorials and watching videos..but it can be very time consuming for something that would be simple to someone in the know on here. It maybe that I've got the wrong idea on the ajax and it makes no sense at all, sorry about that.

<script type="text/javascript">

$(document).ready(function(){

    $("form#myform").submit(function() {
homestatus()      
event.preventDefault();
var toid = $("#toid").attr("toid");
var content = $("#newmsg").attr("content");

    $.ajax({
        type: "POST",
        url: "insert.php",
        data: "toid="+content+"&newmsg="+ newmsg,
        success: function(){
           }
    });
    });
return false;
});
</script>


<form id="myform"  method="POST"  class="form_statusinput">
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed" onsubmit="homestatus(); return false" >
</div>
</form>

INSERT.PHP

$user1_id=$_SESSION['id'];
if(isset($_POST['toid'])){

if($_POST['toid']==""){$_POST['toid']=$_SESSION['id'];}

if(isset($_POST['newmsg'])&isset($_POST['toid'])){
if($_POST['toid']==$_SESSION['id']){
rawfeeds_user_core::create_streamitem("1",$_SESSION['id'],$_POST['newmsg'],"1",$_POST['toid']);
}else{
rawfeeds_user_core::create_streamitem("3",$_SESSION['id'],$_POST['newmsg'],"1",$_POST['toid']);

Answer 1

Try using firebug to identify bugs in your code. It's a really good companion for developing javascript. Nearly all of your bugs led to error messages in the firebug console.

You had several errors in your code, here is the corrected version:

$(document).ready(function(){
    $("form#myform").submit(function(event) {
        event.preventDefault();
        var toid = $("#toid").val();
        var newmsg = $("#newmsg").val();

        $.ajax({
            type: "POST",
            url: "insert.php",
            data: "toid=" + content + "&newmsg=" + newmsg,
            success: function(){alert('success');}
        });
    });
});

And here the corrected html:

<form id="myform"  method="POST"  class="form_statusinput">
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id; ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed">
</div>
</form>

Answer 2

Actually onsubmit event has to be used with form so instead of

<input type="submit" id="button" value="Feed" onsubmit="homestatus(); return false" >

it could be

<form id="myform"  method="POST"  class="form_statusinput" onsubmit="homestatus();">

and return the true or false from the function/handler, i.e.

function homestatus()
{
    //...
    if(condition==true) return true;
    else return false;
}

Since you are using jQuery it's better to use as follows

$("form#myform").on('submit', function(event){
    event.preventDefault();
    var toid = $("#toid").val(); // get value
    var content = $("#newmsg").val(); // get value
    $.ajax({
        type: "POST",
        url: "insert.php",
        data: "toid=" + toid + "&newmsg=" + content,
        success: function(data){
            // do something with data
        }
    });

});

In this case your form should be as follows

<form id="myform"  method="POST"  class="form_statusinput">
    ...
</form>

and input fields should have a valid type and value attribute, Html form and Input.

I think you should read more about jQuery.

Reference : jQuery val and jQuery Ajax.