2012-11-13 43 views
1

我有一个简单的形式与四个输入字段(联系人ID,电话号码,姓名,称呼)。如果我输入'联系人ID'&按Enter按钮,该字段的其余部分将自动从数据库填充检索。现在我想在表单中添加一个'提交'按钮,以便通过单击该按钮可以将这些信息保存到另一个数据库表中。我试图添加按钮,但自动填充功能不再工作。任何人都可以帮忙在这里先谢谢了:) 是我的index.html文件:将提交按钮添加到HTML表单

<html> 
    <body> 
     <script language="javascript" type="text/javascript"> 

    function ajaxFunction(e){ 
    var e=e || window.event; 
    var keycode=e.which || e.keyCode; 
    if(keycode==13 || (e.target||e.srcElement).value==''){ 
    var http; // The variable that makes Ajax possible! 

    try{ 
     // Opera 8.0+, Firefox, Safari 
     http = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      http = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       http = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 

    var url = "getagentids.php?param="; 
       var idValue = document.getElementById("agid").value; 
       var myRandom = parseInt(Math.random()*99999999); // cache buster 
       http.open("GET", "getagentids.php?param=" + escape(idValue) + "&rand=" + myRandom, true); 
       http.onreadystatechange = handleHttpResponse; 
       http.send(null); 
     function handleHttpResponse() { 
        if (http.readyState == 4) { 
         results = http.responseText.split(","); 
         document.getElementById('agfn').value = results[0]; 
         document.getElementById('agsal').value = results[1]; 
         document.getElementById('agtel').value = results[2]; 
         document.getElementById('agid').value = results[3]; 
        } 
       } 
    } 
} 

</script> 

     <form> 
      <table> 
       <tr> 
        <td>Contact ID:</td> 
        <td><input id="agid" type="text" 
           name="contactid" onkeyup="ajaxFunction(event)"></td> 
       </tr> 
       <tr> 
        <td>Tel Number:</td> 
        <td><input id="agtel" type="text" 
           name="contacttel"></td> 
       </tr> 
       <tr> 
        <td>Name:</td> 
        <td><input id="agfn" type="text" 
           name="contactfullname"></td> 
       </tr> 
       <tr> 
        <td>Salutation:</td> 
        <td><input id="agsal" type="text" 
           name="contactsalutation"></td> 
       </tr> 
       <tr> 
        <td><input type="reset" value="Clear"></td> 
        <td></td> 
       </tr> 
      </table> 
     </form> 

    </body> 
</html> 
+0

使用jqu它更容易 –

+0

使用'type =“按钮”'并使用'jQuery'或'Javascript'来提交表格 – GBD

+0

感谢您的回复.. :) 任何示例参考? – atiquratik

回答

1

如果你想通过使用innerHTML

... 
if (http.readyState == 4) { 
    results = http.responseText.split(","); 
    document.getElementById('agfn').value = results[0]; 
    document.getElementById('agsal').value = results[1]; 
    document.getElementById('agtel').value = results[2]; 
    document.getElementById('agid').value = results[3]; 
    document.getElementById('buttons').innerHTML = "<input type=\"submit\" name=\"submit\" value=\"Submit\"/>"; // add Submit button by innerHTML 
} 
... 
以添加填充表单后提交按钮 ,你可以这样做

而在你的表<div id="buttons">添加到您要添加的submit按钮

<tr> 
    <td><div id="buttons"></div><input type="reset" value="Clear"></td> 
    <td></td> 
</tr> 
+0

yeah队友,你有我的观点:)我想在填充完成后添加提交按钮形成。我试过你告诉,但没有运气:( – atiquratik

+0

是你的表单域填充,只是添加提交按钮不工作,或者是填充不工作? – Sean

+0

当我添加按钮&设置表单动作,填充isn 't不再工作了.. – atiquratik