I've got a problem with $.ajax({ })

I've got a problem with $.ajax({ })

Well, first, I have to say I'm not an English speaker, so if I have any writting errors I'm sorry.
I'm developing a modification for an extension of a famous forum system. (It's simple , it's a forum).
I have got a form like this:
  1.            <form method="POST" action="/mostrarPedido.php">
            <fieldset>
                <legend>Agregar Pedido</legend>
                <br />
                <strong>bbcode does not exist</strong>
                <br />            
                <textarea
                    style="width:95%;height:120px;"
                    id= "id_description"
                    onclick=""
                    name="pedido" id="id_description"></textarea><br />
                <input type="hidden" name="id_member" value="2">
                <input type="hidden" name="usuario" value="crazyfrog">
                    <strong>some stuff</strong>
                <br /><br />
                <input type="submit" value="Agregar Pedido" onclick="cargando(this.form.pedido.value,this.form.id_member.value,this.form.usuario.value);" id="submit_button"/><span id="cargando" style="display:none;"><img src="/images/ajax-loader.gif"> Cargando...</span>
            </fieldset>
            </form>

















As you can see, there is a JavaScript event (onclick) on the <input> submit.
Into the event, there is a function (cargando) who needs the "pedido" value, "id_member" value and the "usuario" value.
This is the function:
  1.  function cargando(pedido,id_member,usuario){
       $.ajax({
             type: "POST",
            url: "/mostrarPedido.php",
            data: "pedido="+encodeURIContent(pedido)+"&usuario="+encodeURIContent(usuario)+"&id_member="+id_member,
            success: function(h){
                $("#cargando").css("display","inline");
                $("#add_request").slideUp("fast");
                $("#ultimo_pedido").html(h);
                $("#ultimo_pedido").slideDown("slow");
            }
        });
     }











This is the mostrarPedido.php file:
  1. <?php
    include('Settings.php');
    $con = mysql_connect($db_server, $db_user, $db_passwd);
    mysql_select_db($db_name,$con);
    include('SSI.php');
    global $context, $scripturl, $db_prefix;

    if($context['user']['id']=='')
    {
        echo'<span style="color: red;" class="size11"><b>Logueate rata...</b></span>';
    }
    else
    {
    $id_member = $_POST['id_member'];
    $usuario = $_POST['usuario'];
    $pedido = $_POST['pedido'];
    $fecha = date("l, j F Y");
    $fecha2 = date("g:i:s A");
    $fecha3 = $fecha . ' a las ' . $fecha2;

    mysql_query("INSERT INTO {$db_prefix}pedidos (ID_MEMBER, usuario, pedido, fecha) VALUES ('$id_member','$usuario','$pedido','$fecha3')");
    $query = mysql_query("SELECT ID FROM {$db_prefix}pedidos ORDER BY ID DESC");
    $obj = mysql_fetch_object($query);
    $last_id = $obj->ID;

    echo'
            <span id="',$last_id,'" style="display:block;">
            <strong>Por <a href="', $scripturl, '?action=profile;u=', $id_member, '">', $usuario, '</a> el ',$fecha, '.</strong>
            <br />
            <div style="font-size:11px; margin-top:5px;margin-bottom:5px;">
            ', $pedido, '
            </div>      
            <form method="post"><input size="5" maxlength="5" name="cerrar" />
            <input type="submit" value="Cerrar" name="enviar" /> <input type="hidden" name="request_id" value="', $last_id, '" />(Para cerrarlo ingresá el post ID)</form>
            <div style="border-bottom: 1px dotted #aaa; margin: 15px 35px 10px 0px;"></div>
            </span>';
    }
    ?>




































I hope you understand, now the question is:
Can you tell me why when I click on the submit button does not load de Ajax?

If fact, I think I do all the things right, but the Ajax does not load, it shows the mostrarPedido.php, but not in the page I want to load it in. I'm new in jQuery .

Sorry for my English, thank you!