将提交按钮添加到 HTML 表单答案

【问题标题】：Add submit button to HTML form将提交按钮添加到 HTML 表单
【发布时间】：2012-11-13 16:26:22
【问题描述】：

我有一个包含四个输入字段（联系人 ID、电话号码、姓名、称呼）的简单表单。如果我输入“联系人 ID”并按 Enter 按钮，该字段的其余部分将自动填充从数据库中检索。现在我想在表单中添加一个“提交”按钮，以便通过单击该按钮将这些信息保存到另一个数据库表中。我尝试添加按钮，但自动填充功能不再起作用。有人可以帮忙吗？提前致谢：）这是我的 index.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>

【问题讨论】：

使用type="button"并使用jQuery或Javascript提交表单
感谢回复.. :) 有什么例子可以参考吗？
daftspunk.com/code/…
@GBD 这对我来说似乎很复杂，因为我对 jQuery 不太熟悉 :( 请问还有其他方法吗？顺便说一句，你检查我的索引文件了吗？

标签： php html ajax

【解决方案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>

【讨论】：

是的，伙计，你明白我的意思 :) 我想在填充表单后添加提交按钮。我试过你说的，但没有运气:(
您的表单字段是否正在填充并且只是添加提交按钮不起作用，或者填充也不起作用？
当我添加按钮并设置表单操作时，填充不再起作用..
你是如何设置表单动作的？
类似于 '
' & 提交按钮类似于 '
'