Add submit button to HTML form

Question

I have a simple form with four input field (contact id, tel number, name, salutation). if i input 'contact id' & press Enter button, the rest of the field will auto filled retrieve from DB. now I want to add a 'submit' button to the form, so that those info can be save to another DB table by clicking on that button. i've tried to add the button, but the auto fill function is not working anymore. anyone can help? thanks in advance :) here is my index.html file:

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

Use type="button" and use jQuery or Javascript to submit form — GBD
– GBD, Commented Nov 13, 2012 at 16:29
@GBD it seems complex to me because i'm not much familiar with jQuery :( any other way please? btw, did you check my index file? — atiquratik
– atiquratik, Commented Nov 13, 2012 at 16:48

Sean · Accepted Answer · 2012-11-13 17:30:18Z

1

If you want to add the submit button after you populate the form, you can do this by a using 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
}
...

And in your table add a <div id="buttons"> to where you want to add the submit button

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

edited Nov 13, 2012 at 17:30

answered Nov 13, 2012 at 17:12

Sean

12.4k3 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

atiquratik Over a year ago

yeah mate, you got my point :) i want to add the submit button after populate the form. i tried what you told but no luck :(

Sean Over a year ago

Are your form fields populating and just the adding of the submit button not working, or is the populating not working either?

atiquratik Over a year ago

when i add the button & set the form action, the populating isn't working anymore..

Sean Over a year ago

How are you setting the form action?

atiquratik Over a year ago

its like '<form action="insert.php" method="post">' & the submit button is like '<td><div id="buttons"><input type="submit"></div></td>'

Collectives™ on Stack Overflow

Add submit button to HTML form

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related