div with form, and that form being displayed inside the same div

Question

My first post here, and Ithink i searched a lot BEFORE asking this question.

I used these examples but without sucess:

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

• Form submit in DIV using jQuery

My question is:

I have a div with a form inside it

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

the problem is:

1) I can't submit the form result to the div "mydiv"

2) the goal is to submit without doing a refresh

neither 1 nor 2 works 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 use 2 files:

1 is the main file, and the second file (the one that have the "myform") is used inside the "mydiv".

when i SUBMIT, the form JUMP to a new page (not supposed) but without any Jquery/javascript scripts loaded (because they are in the mainfile).

example:

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

loads inside "mydiv" 

FILE_2 action.php (with the form)

complicated?

---

an update to my question:

i created a simple script to show you what im trying to do 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"; 
        }
    }
}
?>

probably now you can understand better what im trying to fix/do.

thanks, and sorry for some bad-posting, as i said, my 1st post and im not very used to this :)

Answer 1

$('#myform').submit(function (e) {
  e.preventDefault(); // prevent usual submit and refreshing

  $.ajax({
    // pass needed parameters

    success: function (data) {
      // do what you want with data you get through ajax
    }
  }); 
});