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.'" class="feed_in_input" name="">
<img class="feed_reply_smiley2" 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.'" class="feed_in_input" name="">
<img class="feed_reply_smiley" 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?
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
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">