Как найти следующий вход с указанным c именем и получить его значение с помощью jQuery?

Question

Мне нужно переписать часть моего кода, потому что новый DOM, загруженный через ajax, не работает с моими переменными набора.

С моим кодом я автоматически заполняю место и название улицы, когда заполнены почтовый индекс и номер дома в.

Это тот код:

$("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('');
    }
});

Проблема заключается в этой части:

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

Это всегда пусто, так что я проверяю, если номер дома не пуст никогда не начинается Это почему? Я хочу получить значение input[name='huisnummer'] после input[name='postcode'].

Это моя html разметка:

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

Выше HTML загружается в модальном режиме из ajax вызова. Я также попытался поместить всю функцию в обратный вызов ajax, но это та же проблема. Всегда начинается alert, что означает, что мой код считает, что housenumber не имеет длины больше 0.

Answer 1

Проблема заключается в использовании $(this), который создает экземпляр элемента ввода input[name='postcode'].

Вероятно, вы действительно хотите:

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

Однако, как я вижу , вы должны установить Id для этого элемента, чтобы поддерживать чистую разметку.

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

Таким образом, вы можете получить доступ следующим образом:

$("#huisnumber").val(); //Using Id is the fastest selection in jQuery

Answer 2

Проблема заключается в том, что find() ищет в текущем элементе, чтобы получить выбранный вами селектор. Поскольку input элементы не могут быть вложенными, это, очевидно, не может работать.

Вместо этого вы можете пройти через DOM, чтобы найти ближайшего общего родителя как текущего элемента, так и цели, используя closest(), затем используйте find(). Попробуйте это:

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

При этом, если существует только один элемент "input[name='huisnummer']" (что подразумевается позже в вашем коде, когда вы выбираете straat и woonplaats напрямую, тогда обход DOM Это спорный вопрос, и вы также можете выбрать номер дома напрямую:

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