locked
How submit form inputs values to a function?

    Question

  • I have a form, and a function that will get the input values and use it, but when I insert a input type submit like:

    <input type="submit" value="Ok">

    and after, submit the form, it navigates to default.html and crashes. If I use a input type button and use onclick like:

    <input type="submit" value="Ok" onclick="receiveData();">

    I will need to implement a listener for ENTER key, to submit the form, but when the Enter key is pressed a beep sounds...

    All this happen because I want use ENTER to submit the form...

    Thursday, September 6, 2012 5:05 PM

Answers

  • Sure, here's some sample code.

    The HTML:

    <form id="loginForm">
        Username: <input type="text" id="username" /><br />
        Password: <input type="password" id="password" /><br />
        <button type="submit">Submit</button>
    </form>

    The JavaScript:
    function pageLoaded() {
        // setup the form
        var form = document.getElementById("loginForm");
        form.addEventListener("submit", submitHandler);
    };
    
    function submitHandler(eventArgs) {
        var form = eventArgs.srcElement;
        var username = form.children.username.value;
        var password = form.children.password.value;
    
        // do something 
    
        // prevent the page from navigating
        eventArgs.preventDefault();
        eventArgs.stopPropagation();
    };

    Thursday, September 6, 2012 6:01 PM

All replies

  • Set the onsubmit handler on the form element.

    <form onsubmit="submitHandler"> ...

    Thursday, September 6, 2012 5:13 PM
  • This not keep on the page, still navigates to default page...
    Thursday, September 6, 2012 5:17 PM
  • Look at the eventArgs object in the handler. You should be able to call stopPropagation and/or preventDefault, that might help out.
    Thursday, September 6, 2012 5:29 PM
  • Sorry about my stupidity, could you please explain with some example code, ou more specific?
    Thursday, September 6, 2012 5:32 PM
  • Sure, here's some sample code.

    The HTML:

    <form id="loginForm">
        Username: <input type="text" id="username" /><br />
        Password: <input type="password" id="password" /><br />
        <button type="submit">Submit</button>
    </form>

    The JavaScript:
    function pageLoaded() {
        // setup the form
        var form = document.getElementById("loginForm");
        form.addEventListener("submit", submitHandler);
    };
    
    function submitHandler(eventArgs) {
        var form = eventArgs.srcElement;
        var username = form.children.username.value;
        var password = form.children.password.value;
    
        // do something 
    
        // prevent the page from navigating
        eventArgs.preventDefault();
        eventArgs.stopPropagation();
    };

    Thursday, September 6, 2012 6:01 PM
  • It works fine! Thanks a lot!
    Thursday, September 6, 2012 6:19 PM
  • I got the same problem. I tried the above, but didnt worked.

    I had a form not in the default page. when i submit the button it is getting navigated to default.

    Monday, February 11, 2013 6:38 PM