How to use jQuery function with click OR press enter with PHP-CodePudding

I have two different text boxes (coming from loop). Right now data is submitting with "click" event. But now I want to "Post" data after "enter" button also (for example facebook comments). How can I do this?

Here is my code

foreach ...
{ 
    <!-- First text box -->
    <input type="text" placeholder="Post your comment here" id="txt'.$FeedId.'"  name="">
    
    <img  data-coin='.$CoinId.' data-max2='.$postID.' data-min2='.$postID.' data-stat='.$PostStatus.' id="button'.$FeedId.'" src="'.base_url().'/assets/social/images/feed_reply_smiley.svg" alt="img">
     
    <!-- Second text box -->
    <input type="text" placeholder="Reply to '.$UserName.'" id="txt'.$FeedId.'"  name="">
     
    <img  id="button'.$FeedId.'" src="'.base_url().'/assets/social/images/feed_reply_smiley.svg" alt="img">
}

Here is my script

$('.feed_reply_smiley2').unbind().click(function(e) {   
    //our code here
});

$('.feed_reply_smiley').unbind().click(function(e) {    
    //our code here
});

I just want whenever user press "enter" button to any text box then function should execute same as working on "click" event. How can I do this?

CodePudding user response：

Add everything inside a form tag, after which you can detect form submit

<script>
function myfunction(e) {
    e.preventDefault();
    alert("yes");
}
</script>
<form method="post" onsubmit="myfunction(event)">
    <input name="something" />
    <input type="submit" />
</form>

The preventDefault will prevent the default behaviour of submitting data

CodePudding user response：

Here's an example of how to handle enter in a text input. In your case:

$('.feed_in_input').on('keyup', function(event) {
    if (event.keyCode == 13) {
        // 13 = Enter Key
        alert('enter key pressed.');
    }
});

Next, if your goal is to fire the same code from several different events, the first step is to set up that code as a callable function. For example:

function handleClickAndEnter() {
    // our code here
    alert('Action happened!');
}

Now you can call that function from each of your handlers, for example:

$('.feed_reply_smiley').on('click', handleClickAndEnter);

$('.feed_reply_smiley2').on('click', handleClickAndEnter);

$('.feed_in_input').on('keyup', function(event) {
    if (event.keyCode == 13) {
        // 13 = Enter Key
        handleClickAndEnter();
    }
});

You could also combine the first 2 handlers into one if you want:

$('.feed_reply_smiley, .feed_reply_smiley2').on('click', handleClickAndEnter);

If your code needs to determine which event was triggered, you need to go a bit further. Click "Run Code Snippet" to see this all working.

$('.feed_in_input').on('keyup', function(event) {
    if (event.keyCode == 13) {
        // Pass the event along to the handler
        handleClickAndEnter(event);
    }
});

$('.feed_reply_smiley, .feed_reply_smiley2').on('click', function(event) {
    // Pass the event along to the handler
    handleClickAndEnter(event)
});

// Now accept the event as a parameter
function handleClickAndEnter(event) {
    // our code here
    if (event.target.nodeName == "INPUT") {
        alert('Someone hit enter!');
    } else if (event.target.nodeName == "IMG") {
        alert('Someone clicked an image!');
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Input 1: <input class="feed_in_input" type="text">
<br><img src="https://via.placeholder.com/350x65" class="feed_reply_smiley">

<br><br>Input 2:<input class="feed_in_input" type="text">
<br><img src="https://via.placeholder.com/350x65" class="feed_reply_smiley2">