How to trigger an event in input text while typing?

Question

I am using the following code in html:

Text 1: <input class="form-control text-right" name="majorhead" id="text1" required="" type="number" /> 
<div class="result_area"></div> 

<button class="my_button" type="button" role="button">Click Me</button>

My JS:

<script>        
    jQuery(".my_button").click(function () {
        jQuery.get(ajaxurl, {'action': 'sayhello'},
                function (msg) {
                    jQuery(".result_area").html(msg);
                });
    });
</script>

For now I am able to achieve my result when I click the button. But I want to achieve the same result while typing(my code will need to check for every keys typed) in the input text.

how do I select only for id="text1"

Laishram Pilot
– Laishram Pilot

2018-08-02 05:06:37 +00:00
Commented Aug 2, 2018 at 5:06 — Laishram Pilot
– Laishram Pilot, Commented Aug 2, 2018 at 5:06

Bhushan Kawadkar · Accepted Answer · 2018-08-02 05:20:24Z

3

Try this:You can bind keyup event handler to text1 and call your function in it.

jQuery(document).ready(function(){
      jQuery("#text1").on("keyup",function(){  
        if($(this).val()) {
           jQuery.get(ajaxurl,{'action': 'sayhello'}, 
             function (msg) { jQuery(".result_area").html(msg);
           });
        } else { // once value deleted from text1, reset the result
          jQuery(".result_area").html('');
        }
      });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Text 1: <input class="form-control text-right" 
        name="majorhead" id="text1" required="" type="number" /> 
<div class="result_area"></div> 
<button class="my_button" type="button" role="button">Click Me</button>

edited Aug 2, 2018 at 5:20

answered Aug 2, 2018 at 5:09

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sakezzz Over a year ago

also input event can be used

Laishram Pilot Over a year ago

Thanks for your quick and accurate answer

Bhushan Kawadkar Over a year ago

happy to help you :)

Laishram Pilot Over a year ago

One more, how can I reset the result if I delete the text in the textbox?

Bhushan Kawadkar Over a year ago

@LaishramPilot, i have updated my code to reset result if all value deleted

|

Sajith Dinuka Vikasitha Wisump · Accepted Answer · 2018-08-02 05:13:18Z

2

use oninput event in text field.

<input type="text" oninput="scriptName">

answered Aug 2, 2018 at 5:13

Sajith Dinuka Vikasitha Wisump

313 bronze badges

Comments

PHP Geek · Accepted Answer · 2018-08-02 05:16:50Z

0

You can use keyup or keydown event to perform oprations. for example :

$(".className").on("keyup",function(){
   //Code goes here
 });

answered Aug 2, 2018 at 5:16

PHP Geek

4,0632 gold badges19 silver badges32 bronze badges

Comments

Yogesh Garg · Accepted Answer · 2018-08-02 07:37:57Z

Here is HTML

<input class="form-control" placeholder="Search Service" id="search_service" name="service" autocomplete="off" value="" type="text">

This is JS Code

jQuery( "#search_service" ).keyup( function() {

var search_ser = jQuery(this).val();

var ajax_url = jQuery('#ajax_url_input').val();

jQuery.ajax({

type:'POST',
url: ajax_url,
data: {
    action: 'search_service',
    search_ser: search_ser,
},
beforeSend: function(){
},
success:function(data){

    jQuery("._services_list").html(data);

}

});

Here is my Ajax Function in function.php

/* Ajax Function to Search Service. */

function search_service() {

$search_ser = $_POST['search_ser'];

echo $search_ser;

die();

}

add_action('wp_ajax_search_service', 'search_service');

add_action('wp_ajax_nopriv_search_service', 'search_service');

Collectives™ on Stack Overflow

How to trigger an event in input text while typing?

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related