attempts to trigger "click" on enter not working

Question

I am trying to trigger my onclick of a button when i hit enter to make my site more user friendly. I have tried all of the below methods and all of them have the same error

this is my html (please note im using pug)

input#userInterests.form-control(type='text' placeholder='Interests' name='userInterests')
button#AddInterest.btn.btn-success.btn-block.btn-lg(type='button', onclick='add_interest()', value='interests') Update Interests

this is the posting function:

function    add_interest() {
    var interests = document.getElementById('userInterests').value;

    interests = interests.split(" ");
    interests.forEach(function (data) {
        if (!validInterest(data))
        {
            swal(
                'Error!',
                `${data} is not a correctly formatted interest`,
                'error'
            )
            return ;
        }
    });
    interests.forEach(function (data) {
        if (validInterest(data))
        {
            let form = 
            {
                interest: data
            }
            $.ajax({
                type: "POST", 
                url : '/user/account/addinterest',
                data: JSON.stringify(form),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
            });
        }
    });
    document.getElementById("interestsPara").innerHTML = "Updated your interests";
    $('#userInterests').val('');
}

these are all the methods ive attempted and none of them work. please note i am obviously not doing all of these at the same time and uncommented each one one at a time for testing. I have tested all of these with and without $(document).ready

$(document).ready(function(){
    $("#userInterests").keyup(function(event) {
        if (event.keyCode === 13) {
            $('#AddInterests').trigger("click");
            $('#AddInterests').click(add_interest());
            $("#AddInterests")[0].click();
            $("#AddInterests").click();
            setTimeout(function(){ $('#AddInterests').click()}, 100);
            setTimeout(function(){ $('#AddInterests')[0].click()}, 100);
            add_interest();
            document.getElementById("AddInterests").onclick();
            document.getElementById("AddInterests").onclick = add_interest();
            $('#AddInterests').trigger('click');
            $("#AddInterests")[0].click(add_interest());
        }
    })
});

This is my 'error'

Cannot POST /user/account

my function does work and posts correctly when i manually click the button

(this is a group project and some of this isnt mine so please dont flame me too hard and give constructive criticism)

Remove `$(document).ready` from your condition *!* move it before `$("#userInterests")` — Pedram, Jan 27 '20 at 09:49
The doc.ready *inside* the keyup does nothing - if you call doc.ready after the doc is ready then the inner function runs immediately. However, moving it *outside* the keyup event handler declaration will help to ensure #userInterests exists before the handler is added (assuming it's not added after doc ready, dynamically) — freedomn-m, Jan 27 '20 at 10:11
Looks like you have *just* `
` - if this is the case then pressing enter inside the input will *cause the form to post*. Your error is can't post to `/user/account` but your url is `/user/account/addinterest` - so it's **not calling your add_interest function** (or is, but not giving an error there). Some simple debugging/console.log() would show what's going on. To confirm, add a second (temporary) input. To fix, add `return false` to the end of your input's keyup event. — freedomn-m, Jan 27 '20 at 10:16
@Pedram thank you i understand that, i have updated and tried it and still doesnt work — bwebb, Jan 27 '20 at 10:17
@freedomn-m Thank you! i had no idea this feature was a thing. Disabling it fixed my problem. I need to work on my debugging :) — bwebb, Jan 27 '20 at 10:37

score 0 · Answer 1 · answered Jan 27 '20 at 10:34

Thank you @freedomn-m

The problem was the default form behaviour to submit on enter that i didnt realise existed. I set my form to onsubmit return false as follows and this worked

<form onsubmit="return false;">

as described by This Post

I tried to use event.preventDefault() but it did not work

attempts to trigger "click" on enter not working

1 Answers1