Rahtid Rahtid - 5 months ago 9
Javascript Question

Triggering .click function with enter

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;
}
});

Answer

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;
    }
});