Question posted in
You can find the official documentation here.

Jquery ajax – How to find the next input with a specific name and get its value using jQuery?

I need to rewrite some of my code because new DOM that is loaded through ajax is not working with my set variables.

With my code I autofill a place and streetname when zipcode and housenumber are filled in.

This is that code:

$("body").on("input","input[name='postcode']",function(e){
    e.preventDefault();
    var value = $(this).val();
    var housenumber = $(this).find("input[name='huisnummer']").val();
    console.log(value);
    console.log(housenumber);
    if(housenumber.length >= 1) {
        if (value.length == 6) {
                url = 'includes/postcodecheck.php';

                var $postcode = $("input[name='postcode']").val();
                var $huisnummer = $("input[name='huisnummer']").val();

                var posting = $.post( url, { postcode: $postcode, huisnummer: $huisnummer} );
                posting.done(function( data ) {
                    var obj = JSON.parse(data);
                    var status = obj[0].status;
                    var straat = obj[0].straat;
                    var woonplaats = obj[0].woonplaats;
                    if (status == 'error') {

                    }else if(status == 'success'){
                        $('input[name="woonplaats"]').val(woonplaats);
                        $('input[name="straat"]').val(straat);
                    }
                    // var content = $( $.parseHTML(data) );
                    // $( "#postcoderesult" ).empty().append( content );
                });
        }else {

        }
    } else {
        alert('Vul eerst je huisnummer in voor dat je verder kan.');
        $("input[name='postcode']").val('');
    }
});

The problem is this part:

var housenumber = $(this).find("input[name='huisnummer']").val();

This is always empty, so my check if housenumber is not empty never starts. Why is that? I want to get the value of input[name='huisnummer'] after input[name='postcode'].

This is my html markup:

<form class="editadres">
  <div class="col-md-12 col-sm-12 pb-10">
      <label for="">Naam (bijvoorbeeld: thuis, werk etc) *</label>
      <input type="text" name="naam" value="Test123">
  </div>
  <div class="col-md-12 col-sm-12 pb-10">
      <label for="">Huisnummer</label>
      <input type="text" name="huisnummer" value="10" maxlength="9">
  </div>
  <div class="col-md-12 col-sm-12 pb-10">
      <label for="">Tussenvoegsel</label>
      <input type="text" name="tussenvoegsel" value="">
  </div>
  <div class="col-md-12 col-sm-12 pb-10">
      <label for="">Postcode</label>
      <input type="text" name="postcode" value="3202GP" maxlength="6">
  </div>
  <div id="postcoderesult" class="col-lg-12">
    <div class="row">
      <div class="col-md-12 pb-10">
        <label for="">Straatnaam</label>
        <input type="text" name="straat" class="readonly1" value="Winston Churchilllaan" readonly="" required="">
      </div>
      <div class="col-md-12 pb-10">
        <label for="">Woonplaats</label>
        <input type="text" name="woonplaats" class="readonly1" value="Spijkenisse" readonly="" required="">
      </div>
    </div>
  </div>
</form>

Above HTML is loaded in a modal from an ajax call. I also tried to put the entire function in the ajax callback, but this has the same issue. It always starts the alert which means my code thinks housenumber does not have a length bigger than 0.

Tags:

2

Answers


  1. 0

    The issue is because find() searches within the current element to retrieve the selector you provide. As input elements cannot be nested this obviously cannot work.

    Instead you can traverse the DOM to find the nearest common parent of both the current element and the target using closest(), then use find(). Try this:

    var housenumber = $(this).closest('.editadres').find("input[name='huisnummer']").val();

    That being said, if there is only ever one "input[name='huisnummer']" element (as is implied later in your code when you select straat and woonplaats directly, then the DOM traversal is moot and you can select housenumber directly too:

    var housenumber = $("input[name='huisnummer']").val();
    Login or Signup to reply.
  2. 0

    The problem is the use of $(this) which is instantiating the input element input[name='postcode'].

    Probably what you really want is:

    var housenumber = $("input[name='huisnummer']").val();

    However, as I can see, you should set an Id to that element in order to maintain a cleaner markup.

    <input type="text" name="huisnummer" id="huisnummer" value="10" maxlength="9">
                                     ^

    That way, you can access as follow:

    $("#huisnumber").val(); //Using Id is the fastest selection in jQuery
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search