jquery onclick只用一个输入从php文件中获取数据

Question

Here is the HTML (This form may use more than twice) :-(

<div class="abc">
  <div class="xyz">
    <input type="text" name="pqr" />
    <div class="clickMe">click button</div>
    <div class="showContent"></div>
  </div>
  <div class="somethingelse">some other insignificent input or something else.</div>
</div>

Here is the jQuery:

$('.clickMe').on('click', function(e){

    $.post("getdata.php", $(this).closest('.abc').children('.xyz').children('input[name="pqr"]').serialize(),  function(response) {
        $(this).closest('.abc').children('.xyz').children('.showContent').html(response);
    });

});

i need only to check data of input(pqr) with my database?
any idea, how can i it and what is wrong on my code!
Advance thanks.

Answer 1

The scope of this inside of the post is not the same as outside

$('.clickMe').on('click', function(e){
    e.preventDefault();
    var xyz = $(this).closest('.abc').children('.xyz');
    $.post("getdata.php", xyz.children('input[name="pqr"]').serialize(),  function(response) {
        xyz.children('.showContent').html(response);
    });    
});