Hi everyone, this is my first post here and I've tried to search extensively before asking this question.

I've attempted to use the following examples without success:

• jquery submit form and then show results in an existing div

• Form submit in DIV using jQuery

Here's my question:

I have a situation where there is a div containing a form like this:

<div id="mydiv">
<form id="myform" method="post" action="action.php?id=1&lang=en">
...
</form>
</div>

The issue at hand are:

1) Unable to submit form results to the "mydiv" div

2) The desired outcome is to submit without refreshing the page

Unfortunately, neither 1 nor 2 work for me.

JavaScript used:

$(document).ready(function() {
  $('#myform').submit(function () {
    $.post('action.php?id=1&lang=en', 
    $('#myform').serialize(), 
    function (data, textStatus) {
        $('#mydiv').append(data);
    });
    return false;
   });  
});

Edit: I am utilizing two different files:

The main file, and the second file (containing "myform") is used within the "mydiv".

Upon submitting, the form redirects to a new page (not intended) and does not load any jQuery/JavaScript scripts (as they are in the mainfile).

Example:

FILE_1 main.php (with loaded jquery/js scripts) 

loads inside "mydiv" 

FILE_2 action.php (contains the form)

Complicated, right?

---

An update to my question:

I have created a basic script to showcase what I am attempting to achieve here:

divform.html

<title>test</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>

<!-- THIS SCRIPT ALLOW TO USE A DIV AS A TARGETED IFRAME -->    
<script type="text/javascript">
    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""

    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }

    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }

    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }   
</script>   
</head>

<body>

<div id="centerbody" style="width: 600px; height: 300px; border: 1px solid #ccc; margin: 0 auto;">

    <div id="linkzone" style="width: 120px; height: 250px; border: 1px solid #f00; float: left; display: inline;">

    <a href="javascript:ajaxpage('action.php?i=link1', 'mydiv');">goto link1</a>
    <br>
    <a href="javascript:ajaxpage('action.php?i=link2', 'mydiv');">goto link2</a>

    </div>

    <div id="mydiv" style="width: 400px; height: 200px; border: 1px solid #000; float: right; display: inline;">
    </div>
</div>

</body>
</html>

and a php script that is loaded inside "Mydiv" / do the form thing:

action.php:

<script type="text/javascript">


    /** THIS SCRIPT IS SUPPOSED TO ALLOW A FORM SUBMITION BEING loaded in the same div, without refreshing it */
    $(document).ready(function() {
            $('#myform').submit(function () {
                $.post('action.php?i=link2', $('#myform').serialize(), function (data, textStatus) {
                     $('#mydiv').append(data);
                });
                return false;
            }); 
    });
</script>
<?
if ($_GET['i']=="link1") {
    echo "link 1";
    ?>
    <br><a href="javascript:ajaxpage('action.php?i=link2', 'mydiv');">goto link2</a>
    <?  
}
if ($_GET['i']=="link2") {
    $error="0";
    $sent="";
    if (isset($_POST['submit'])=="go") {
        if ($_POST['form_1']!=""){
            echo "good...( {$_POST['form_1']} )...<p>";
            $sent=1;
        }
        else{
            $error=1;
        }
    }
    if ($sent=="1"){
        echo "...gogogogo...  should refresh to another link...5 secs after... (inside here)";
    }
    else{
        echo "link 2";
        ?>
        <br><a href="javascript:ajaxpage('action.php?i=link1', 'mydiv');">goto link1</a>
        <form id="myform" method="post" action="action.php?i=link2">
        input zone: <input type="text" name="form_1"> <input type="submit" value="go" name="submit">    
        </form>
        <?
        if ($error=="1") {
            echo "* mandatory fields"; 
        }
    }
}
?>

You should now have a better understanding of what I am trying to accomplish. Thank you, and apologies for any confusion in my initial post as this is my first time posting and I'm still learning the ropes :)