Passing Data from form with Ajax

Question

Wondering if someone could help me. I have next to no knowledge with Ajax, and after many attempts at trying to pass my User1_id and Text through to my insert.php I've had no luck with inserting the data I want to my database.

As my profile.php and insert.php stands, the form submits to the database, but when the user submits the form it navigates to the insert.php and would rather have the Ajax send the data and stay on the Profile.php at all times, I feel this is a much better approach when creating such functions.

I'm wondering if someone can guide me in the right direction on how I'd go about doing this.

Profile.php Form

<form id="FormId" action="" method="get">
    <input type="hidden" value="<? echo $user1_id ?>">
        <textarea placeholder="Whats New??" id="FormId" name="status"></textarea>
            <input type="submit" name="Submit" value="Submit">
            </form>

Insert.php

    <?
    session_start();
    ini_set('display_errors',1);
    error_reporting(E_ALL|E_STRICT);
    include "db_connect.php";
    if (isset($_GET['status']))  {
         $status = $_GET['status'];
    }
    $user1_id=$_SESSION['id'];



if ($_GET['status']) {
$query = mysql_query("INSERT INTO feed (status,user1_id) VALUES ('$status', '$user1_id')")  or die (mysql_error());
if($query){
    echo "Posted Into Database";
}

exit();
}
?> 

I know I need something similiar to this.. But I think I'm stuck more on the var/data part.

$("form#myFormId").submit(function() {
    var mydata = $("form#myFormId").serialize();
    alert(mydata); // it's only for test
    $.ajax({
        type: "GET",
        url: "insert.php",
        data: mydata,
        success: function(response, textStatus, xhr) {
            alert("success");
        },
        error: function(xhr, textStatus, errorThrown) {
            alert("error");
        }
    });
    return false;
});

But don't know how to go about it.

Any guidence is appreciated. Not asking anyone to write the code out for me. But good direction is welcomed.

Thanks.

Answer 1

Change your ajax part to:

$("form#myFormId").submit(function(e) {
  e.preventDefault();  //prevent default submit
  ........

Your hidden input should have name

<input name="userId" type="hidden" value="<? echo $user1_id ?>">

And in php,

$userId = $_GET["userId"];

Change id of textarea, its same to your formid and ids need to be unique, so change your textarea id, and You can try passing data as:

$.ajax({
        type: "GET",
        url: "insert.php",
        data:"status="+$("#yourTextareaId").val()+"&userId="+$("#yourHiddenInputId").val(),
        ......

Answer 2

Just like to say thank you to both of you for your time and help. I re-wrote the code and have now got it working.

Here is the final code PROFILE.PHP/JS

<script type="text/javascript">

function createstatus(content){
$.post("insert.php", { user1_id: content } );
refreshstream();
}

function createwallpost(content,user1_id){

$.ajax({
   type: "POST",
   url: "insert.php",
   data: "status="+content+"&user1_id="+user1_id,
   success: function(){
     document.location = document.location;
   }
 });

}
</script>

    <form action="insert.php" method="POST" target="ifr1" class="form_statusinput">
        <input type="hidden" name="user1_id" value="<?php echo $user1_id ?>">
        <input type="text" name="status" id="status" class="homescreen_status_input" placeholder="Say something">
        <iframe name="ifr1" id="ifr1" style="display:none;"></iframe>
    </form>

INSERT.PHP

<?
session_start();
include "db_connect.php";
if (isset($_POST['status']))  {
     $status = $_POST['status'];
}

$user1_id = $_POST['user1_id'];


if ($_POST['status']) {
$query = mysql_query("INSERT INTO feed (status,user1_id) VALUES ('$status', '$user1_id')")  or die (mysql_error());
if($query){
    echo "Posted Into Database";
}

exit();
} 


?> 

I decided to go with post instead of the GET method, as I feel its securer and passes more information through smoothly. Thanks again.