CODEWITHSUNDEEP
phpjqueryajaxwordpress
Laishram Pilot
Laishram Pilot

Reputation: 49

How to pass a value from input-text through Jquery Ajax to php function while I type? Wordpress

I am using Wordpress, and here is my html code:

<input class="form-control text-right" name="majorhead" required="" type="number" id="majorhead"/> 
<div class="result_majorhead"></div>

JS code:

<script>
    jQuery("#majorhead").on("keyup",function(){    
        jQuery.get(ajaxurl,{'action': 'majorhead'}, 
             function (msg) { jQuery(".result_majorhead").html(msg);
                   });
      });

</script>

Here is my code in function.php

add_action('wp_ajax_nopriv_majorhead', 'majorhead_function');
add_action('wp_ajax_majorhead', 'majorhead_function');
function majorhead_function(){
  echo 'hello';
  exit();
}

For now I am able to display a simple message "Hello" in the same web page whatever I type in the input box. Now I want to display the exact value from the input-text in the display message while typing.

for example: if I type 1, it should display 1 and If I type another another 2 then it should display 12.

Upvotes: 0

Views: 1388

Answers (2)

Samuil Banti
Samuil Banti

Reputation: 1795

What you need to do in your Javascript is:

  1. Add "change" event so that you could use the arrows to control the "number" input.

  2. Get the value of the input.

  3. Add the value to your GET parameters.

    jQuery("#majorhead").on("keyup change",function(){ 
    var majorhead_value = $(this).val();
    jQuery.get(ajaxurl,{'action': 'majorhead','majorhead_value': majorhead_value}, 
         function (msg) { jQuery(".result_majorhead").html(msg);
    });

    });

In your PHP script you should display the GET value:

function majorhead_function(){
echo $_GET['majorhead_value'];
exit();
}

If you have multiple inputs you may process them like this:

jQuery("#text1, #text2, #text3").on("keyup change",function(){    
var majorhead_value = parseInt(0+$("#text1").val());
majorhead_value += parseInt(0+$("#text2").val());
majorhead_value += parseInt(0+$("#text3").val());

jQuery.get(ajaxurl,{'action': 'majorhead','majorhead_value': majorhead_value}, 
function (msg) { jQuery(".result_majorhead").html(msg);
});

});

I assume that your HTML will look like this:

    <input class="form-control text-right" name="text1" required="" type="number" id="text1"/> 
<input class="form-control text-right" name="text2" required="" type="number" id="text2"/> 
<input class="form-control text-right" name="text3" required="" type="number" id="text3"/> 
<div class="result_majorhead"></div>

Upvotes: 1

Yogesh Garg
Yogesh Garg

Reputation: 333

HTML CODE

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

Here is my Ajax Function in function.php

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

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

        }
    });

});

Upvotes: 0

Related Questions