Javascript jQuery無法刷新div

Question

我有這段代碼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>

並使用javascript將值傳遞到php文件以執行更新。

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();
}

我的JavaScript代碼將這些值傳遞給php文件（PHP很好地更新了這些值），但是，當它返回html頁面時，它會顯示警報，而在按下ok時，它將刷新整個頁面。 我希望它僅刷新div而不刷新整個頁面。 我不知道我在做什么錯，任何建議都會受到贊賞。

Answer 1

您錯過了函數中的return false ：

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

Answer 2

你可以試試這個嗎

        <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>