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

Question

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.

just use this $('#majorhead').val(); and not this jQuery(".result_majorhead").html(msg); — Cananau Cristian
– Cananau Cristian, Commented Aug 2, 2018 at 6:43

Samuil Banti · Accepted Answer · 2018-08-02 12:16:17Z

1

What you need to do in your Javascript is:

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

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>

edited Aug 2, 2018 at 12:16

answered Aug 2, 2018 at 7:16

Samuil Banti

1,8351 gold badge16 silver badges31 bronze badges

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

2 Comments

Laishram Pilot Over a year ago

Thanks it works! What if I have multiple input-text boxes with ID="text1","text2","text3" and so on.... and how to pass the value of text1 and text2 together in text3?

Samuil Banti Over a year ago

I've added an example that calculates the sum of a few inputs.

Yogesh Garg · Accepted Answer · 2018-08-02 07:47:16Z

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

        }
    });

});

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related