Jquery, . val() does not take input text

Asked

Viewed 2,300 times

0

I have a following code:

INPUT

<div class="row">
    <div class="form-group">                                                                
        <div class="col-sm-3">                                                                      
            <div class="form-group input-group">
                <input id="contact-input" type="text" id="search" class="form-control input-search-doc" placeholder="Documento" required>
                <span class="input-group-btn">
                    <button class="btn btn-default btn-search-doc" type="button">
                    <i class="fa fa-search"></i>
                </button>
                </span>
            </div>
        </div><!-- <div class="col-sm-3"> -->                                                                                           
    </div><!-- <div class="form-group"> -->
</div><!-- <div class="row"> -->

AJAX

$(".btn-search-doc").on("click",function(){
    var title = $(this).find('input.input-search-doc').val();
    alert(title);   
    $("#result").html("<img src='ajax-loader.gif'/>");

    $.ajax({
        type:"post",
        url:"../connect/post/select.php",
        data:"title="+title,
        success:function(data){
            $("#result").html(data);
            $("#search").val("");
         }
      });

});

It should take the text inside the input and send via Ajax to my select, but it can’t get the text inside the input "input-search-doc", always returns to me in var_dump : string 'Undefined' (length=9)

Someone has an idea why he’s not getting any value?

javascript jquery
  • 1

    Your selector should look like this: var title = $('.input-search-doc'). val(); it makes no sense to use this in this case, only if it were a form, and you were to give a Ubmit

  • Thank you was right.

2 answers

4


Simply use:

$('#contact-input').val();

Or

$('.input-search-doc').val();

  • To get a component by passing the controller ID on the selector, use "#" as in the @Jonathan example. Nothing more.

0

Hello, all right?

I believe the problem is when you instantiate the variable 'title':

$(".btn-search-doc").on("click",function(){
    var title = $(this).parents('.input-group').find('input.input-search-doc').val();
    alert(title);   

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
    <div class="form-group">                                                                
        <div class="col-sm-3">                                                                      
            <div class="form-group input-group">
                <input id="contact-input" type="text" id="search" class="form-control input-search-doc" placeholder="Documento" required>
                <span class="input-group-btn">
                    <button class="btn btn-default btn-search-doc" type="button">
                    <i class="fa fa-search"></i>
                </button>
                </span>
            </div>
        </div><!-- <div class="col-sm-3"> -->                                                                                           
    </div><!-- <div class="form-group"> -->
</div><!-- <div class="row"> -->

To keep the context where your button is enclosed using $(this), you need to use ". parents('.input-group')" to change the context of the button to the div containing the button and input field, only then to use the ". find()" to find the field.

Or

Since you are setting a unique identifier pro input, you could still fetch it: $('#contact-input').

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.