2013-11-03 58 views
1

我有這樣的代碼 HTML的Javascript jQuery的不刷新DIV

<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頁面,它顯示了警報和時,按確定它刷新整個頁面。我希望它只刷新div而不是整個頁面。 我不知道我在做什麼錯,任何建議都會升值。

+0

您需要防止表單提交的默認操作。另外,你現在還沒有使用jQuery。 – ahren

回答

1

你錯過了你的功能return false

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

你可以試試這個,

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