Triggering .click function with enter

Question

I'm trying to make some kind of form. User have to click in order to send data further, but when user press 'enter' it returns error.

Script:

$('a.rec_submit').click(function(){
    form_update_mail(1);
    $('input.rec_submit_actual').click();
    return false;
}

HTML:

<a      class="rec_submit">SEND</a>
<input  class="rec_submit_actual" type="submit" />

I've searched a bit, and found that i can use keyup function in order for 'enter' to work also.

example:

$('a.rec_submit').on('keyup click', function(e){
    if (e.which === 13 || e.type === 'click') {
    form_update_mail(1);
    $('input.rec_submit_actual').on('keyup click', function();
    return false;
)}
});

Yet this doesnt work. Could someone explain what i'm doing wrong?

///// EDIT

None of the answers do work.

Form doesn't want to pass email further with 'enter', with 'click' it works just fine.

Error goes: email addres is not valid

Full script:

/*function form_update_mail()
{
var tresc_maila='';
$('#body_mail').val(tresc_maila);
};*/
var mail_string = '';

function form_update_mail(x) {
mail_string += $('input#component_recommend_to').val() + ',';
if (x == 1) mail_string = mail_string.substring(0, mail_string.length - 1);
$('#component_recommend_to_actual').val(mail_string);
}
$(document).ready(function() {
$('a#suggestproduct').click(function() {
    $(this).parent().fadeOut(500);
});
$('div.projektor_left_frame a, a.u10_polec').click(function() {
    $('div#component_projector_suggestproduct2').fadeIn(500);
    return false;
});
$('#component_recommend input').click(function() {
    if ($(this).attr('value') == 'wpisz e-mail' || $(this).attr('value') == 'wpisz imię') $(this).attr('value', '');
});
$('a.recommend_add_next').click(function() {
    form_update_mail(0);
    $('input#component_recommend_to').attr('value', '');
    $('input#component_recommend_name_to').attr('value', '');
    return false;
});
$('a.rec_submit').keypress(function(e) {
    if (e.which == 13 || e.which == 1) {
        form_update_mail(1);
        $('input.rec_submit_actual').click();
        return false;
    }
});
$('#component_recommend_body').val(tresc_maila);
tresc_maila = 'x';
$('#component_recommend_body').val(tresc_maila);
if ($('div.sender_email').length) $('#component_recommend_email').val($('div.sender_email').text());
if ($('div.sender_name').length) $('#component_recommend_name').val($('div.sender_name').text());
});

HTML:

<div id="component_recommend">
    <form action="contact.php" method="post">
        <input name="suggest_shop" type="hidden" value="submit">
        <div class="rec_main">
            <div class="rec_sub">
                <div style="margin-top: 30%; margin-bottom: 2%; font-size: 1.4em;">
                    Data 1:
                </div>
                <input  id="component_recommend_name"   name="firstname"    type="text" placeholder="Your name" class="rec_form" /><br />
                <input  id="component_recommend_email"  name="email"        type="text" placeholder="Your e-mail" style="margin-top: 5%" class="rec_form" />
                <div    style="margin-top: 8%; margin-bottom: 2%; font-size: 1.4em;">
                    Data 2:
                </div>
                <input      id="component_recommend_name_to"    name="name_to"  type="text" placeholder="His name" class="rec_form" /><br />
                <input      id="component_recommend_to"                         type="text" placeholder="His email" style="margin-top: 5%" class="rec_form" />
                <input      id="component_recommend_to_actual"  name="to"       type="text" placeholder="His email" style="display: none;" class="rec_form" />
                <textarea   id="component_recommend_body"       name="body"></textarea>
                <a          class="rec_submit">SEND</a>
                <input      class="rec_submit_actual" type="submit" />
            </div>
        </div>
    </form>
</div>

Case closed Thanks to @Mohit Bhardwaj it works

Proper code:

$('a.rec_submit').click(function(){
form_update_mail(1);
$('input.rec_submit_actual').trigger( "click" );
return false;
});

$('a.rec_submit').on('keyup', function(e){
var code = e.keyCode ? e.keyCode : e.which;
if (code == 13) {
form_update_mail(1);
 $('input.rec_submit_actual').trigger( "click" );
  return false;
}
});

why not just have `rec_submit_actual` and style it as the `a`? — BenG, Jun 22 '16 at 10:48
http://stackoverflow.com/questions/15802858/jquery-call-function-if-enter-hit look here — webta.st.ic, Jun 22 '16 at 10:52
@BenG - Well, it's kinda complicated. This is part of more complex teamwork, and there are some things i shouldn't change, because they are connected with few others and it would make some disturbance in group. — Rahtid, Jun 22 '16 at 10:54
do you need to trigger a native browser `click` or a jquery `click`? does any of the answers fix your problem? — BenG, Jun 22 '16 at 11:49

score 1 · Answer 1 · answered Jun 22 '16 at 10:47

1

try this

$('a.rec_submit').click(function(){
    form_update_mail(1);
    $('input.rec_submit_actual').trigger( "click" );
    return false;
}

answered Jun 22 '16 at 10:47

Lalji Tadhani

14,041
3
23
40

tried that, not only 'enter' still doesn't work, click stops triggering anything – Rahtid Jun 22 '16 at 13:56

Mohit Bhardwaj · Accepted Answer · 2016-06-22T14:31:03.917

0

You are facing this issue, because where you are handling both keyup and click events, you are checking for which key was pressed and only execute the code if enter key was pressed. But in case of enter also, this returns false and hence your code is not executed.

You can write the same function for both events separately. If you do not want to repeat code, you can define the common code in a separate function and call that function from both event handlers.

$('a.rec_submit').click(function(){
    form_update_mail(1);
    $('input.rec_submit_actual').trigger( "click" );
    return false;
}//click

$('.rec_main input[type=text]').on('keyup', function(e){
    var code = e.keyCode ? e.keyCode : e.which;
    if (code == 13) {
      $('input.rec_submit_actual').trigger( "click" );
      form_update_mail(1);
      return false;
    }
});

edited Jun 22 '16 at 14:31

answered Jun 22 '16 at 10:47

Mohit Bhardwaj

9,650
3
37
64

tried that, not only 'enter' still doesn't work, click stops triggering anything – Rahtid Jun 22 '16 at 13:56
same thing, when i press 'enter' it says that email is invalid, and when i click button nothing happens. I was trying to get into 'contact.php' which handles data, but it's not my part of the project atm, and person responsible for it is offline – Rahtid Jun 22 '16 at 14:04
after closing click function - ');' was missing - clicking works again, but 'enter' still doesnt – Rahtid Jun 22 '16 at 14:28
Please check now. I had not checked your html and had binded keyup to anchor tag. Now, I have tried binding it on input tags. Please check now. – Mohit Bhardwaj Jun 22 '16 at 14:31
aaaaaand it works. Made a typo - forgot closing tag at the end. Thank you very much! – Rahtid Jun 22 '16 at 14:31
Glad to hear you got your problem solved :) All the best. – Mohit Bhardwaj Jun 22 '16 at 14:32

Kuldeep Kumawat · Answer 3 · 2016-06-22T10:56:26.353

0

try this

$('a.rec_submit').on('keyup', function(e){
        if (e.which === 13 || e.type === 'keyup') {
            form_update_mail(1);
            $('input.rec_submit_actual').click();
            return false;
        }
});

edited Jun 22 '16 at 10:56

answered Jun 22 '16 at 10:50

Kuldeep Kumawat

56
6

tried that, not only 'enter' still doesn't work, click stops triggering anything – Rahtid Jun 22 '16 at 13:56

Triggering .click function with enter

3 Answers3