Asked  6 Months ago    Answers:  5   Viewed   116 times

Well I am trying to submit a form by pressing enter but not displaying a submit button. I don't want to get into JavaScript if possible since I want everything to work on all browsers (the only JS way I know is with events).

Right now the form looks like this:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

Which works pretty well. The submit button works when the user presses enter, and the button doesn't show in Firefox, IE, Safari, Opera and Chrome. However, I still don't like the solution since it is hard to know whether it will work on all platforms with all browsers.

Can anyone suggest a better method? Or is this about as good as it gets?

 Answers

91
Notice
Please do not use this in the year 2021+. Look down below and pick a better - more modern - answer.

Try:

<input type="submit" style="position: absolute; left: -9999px"/>

That will push the button waaay to the left, out of the screen. The nice thing with this is, you'd get graceful degradation when CSS is disabled.

Update - Workaround for IE7

As suggested by Bryan Downing + with tabindex to prevent tab reach this button (by Ates Goral):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />
Tuesday, June 1, 2021
 
the_e
answered 6 Months ago
19

It is more appropriate to approach this problem with the mentality that a form will have a default action tied to one submit button, and then an alternative action bound to a plain button. The difference here is that whichever one goes under the submit will be the one used when a user submits the form by pressing enter, while the other one will only be fired when a user explicitly clicks on the button.

Anyhow, with that in mind, this should do it:

<form id='myform' action='jquery.php' method='GET'>
    <input type='submit' id='btn1' value='Normal Submit'>
    <input type='button' id='btn2' value='New Window'>
</form>

With this javascript:

var form = document.getElementById('myform');
form.onsubmit = function() {
    form.target = '_self';
};

document.getElementById('btn2').onclick = function() {
    form.target = '_blank';
    form.submit();
}

Approaches that bind code to the submit button's click event will not work on IE.

Wednesday, June 16, 2021
 
Camsoft
answered 6 Months ago
18

Maybe you add keypress or keydown to the input fields and assign the event to function that will do the submit when enter is clicked.

Your template would look like this

    <form (keydown)="keyDownFunction($event)">
      <input type="text" />
    </form

And you function inside the your class would look like this

    keyDownFunction(event) {
      if (event.keyCode === 13) {
        alert('you just pressed the enter key');
        // rest of your code
      }
    }
Sunday, August 1, 2021
 
JontheNerd
answered 4 Months ago
30

There's no way. The simplest solution is just to ensure that the first submit button in the form is the one you want triggered by the Enter button.

Note that this submit button can be a duplicate of a button elsewhere in the form, and it doesn't have to be visible.

Monday, August 16, 2021
 
Christopher Grebs
answered 4 Months ago
12

So we set up the form and make sure your library is included, I prevent the submit button from being clicked while the recaptcha has not been completed and show a tooltip to notify the user it is needed to continue. Then enable it when it has been complete using the callback methods.

login.php

<div class="formContainer">
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <form action="loginHandler.php" method="post" name="login_form" id="loginForm" class="loginForm">  
        <h2>Login</h2>
        <p><input type="text" required placeholder="Email" name="email"></p>
        <p><input type="password" required placeholder="Password" name="password" id="password"></p>
        <div class="g-recaptcha" data-callback="captcha_filled"
                 data-expired-callback="captcha_expired" 
                 data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
        </div>
        <div>
            <p class="show-tt" data-toggle="tooltip" title="Complete the reCAPTCHA to login." data-placement="bottom">
                <input id="submitLogin" type="submit" value="Login">
            </p>
        </div>
    </form>
</div>

<script>
    //prevent submit and show tooltip until captch is complete.
    var submit = false;
    $("#submitLogin").prop('disabled', true);

    function captcha_filled() {
        submit = true;
        $("#submitLogin").prop('disabled', false);
        $(".show-tt").tooltip('destroy');
    }
    function captcha_expired() {
        submit = false;
        $("#submitLogin").prop('disabled', true);
        showTooltip();
    }
    function showTooltip () {
        $(".show-tt").tooltip('show');
    }
</script>

Now we post to loginHandler.php, or wherever your form submits too and then there we will assign your secret key and then verify the request with google.

loginHandler.php

$secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

if (isset($_POST["g-recaptcha-response"])) {

    $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secret) .
            '&response=' . urlencode($_POST['g-recaptcha-response']) . '&remoteip=' . urlencode($_SERVER['REMOTE_ADDR']);
    //ip address is optional
    $result = json_decode(file_get_contents($url), true);

    if ($result != null && $result['success'] === true) {

        //success, handle login/submit data or whatever

    } else {
        //response is bad, handle the error
        header('Location: login.php?error=4');
    }
} else {
    //captcha response is not set, handle error
    header('Location: login.php?error=5');
}
Saturday, August 28, 2021
 
octern
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share