Javascript jQuery无法刷新div

Question

I have this code HTML

<form id="myForm" method="post" onsubmit="return updateValues(this)">
    <input id="id" type="hidden" value="<?php echo $row[0]; ?>" />
    <input type="text" id="dd" value="<?php echo $row[1];?>" />
    <input type="text" id="da" value="<?php echo $row[2];?>" />       
    <input type="text" id="db" value="<?php echo $row[3];?>" />
    <input type="submit" id="submit" value="Save Changes" />
</form>

<div id="successNote"></div>

and using javascript to pass the values to php file to perform the update.

function updateValues(thisForm)
{
   if (thisForm == "")
   {
      document.getElementById("successNote").innerHTML = "please fill form.";
      return;
   } 
   var id = document.getElementById('id').value;
   var dd = document.getElementById('dd').value;
   var da = document.getElementById('da').value;
   var db = document.getElementById('db').value;
   var str = 'id='+id+'&dd='+dd+'&da='+da+'&db='+db;

   if (window.XMLHttpRequest)
   {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
   }
   else
   {
       // code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("successNote").innerHTML = "Form has been updated";
        alert('Form has been updated successfully!');
      }
    }   
   xmlhttp.open("GET","update_myForm.php?"+str,true);
   xmlhttp.send();
}

My javascript code is passing the values to php file (PHP is updating these values fine), however, when it return to the html page, it shows the alert and when press ok it is refreshing the whole page. I want it to refresh only the div not the whole page. I have no idea what I am doing wrong, any suggestion will be appreciatted.

Answer 1

You missed the return false in your function:

function updateValues(thisForm)
{
   // your code...
   xmlhttp.send();
   return false;
}

Answer 2

Can you try this,

        <form id="myForm" method="post" onsubmit="return updateValues(this)">
            <input id="id" type="hidden" value="<?php echo $row[0]; ?>" />
            <input type="text" id="dd" value="<?php echo $row[1];?>" />
            <input type="text" id="da" value="<?php echo $row[2];?>" />       
            <input type="text" id="db" value="<?php echo $row[3];?>" />
            <input type="submit" id="submit" value="Save Changes" />
        </form>

        <div id="successNote"></div>

        <script>

        function updateValues(thisForm)
        {

           if (thisForm == "")
           {
              document.getElementById("successNote").innerHTML = "please fill form.";
              return false;
           } 
           var id = document.getElementById('id').value;
           var dd = document.getElementById('dd').value;
           var da = document.getElementById('da').value;
           var db = document.getElementById('db').value;
           var str = 'id='+id+'&dd='+dd+'&da='+da+'&db='+db;

           if (window.XMLHttpRequest)
           {
              // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
           }
           else
           {
               // code for IE6, IE5
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
           xmlhttp.onreadystatechange=function()
           {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
                document.getElementById("successNote").innerHTML = "Form has been updated";
                alert('Form has been updated successfully!');
              }
            }   
           xmlhttp.open("GET","update_myForm.php?"+str,true);
           xmlhttp.send();

           return false;
        }


        </script>