Использование jQuery для «автозаполнения» второго текстового поля на основе ввода из первого

Question

Хорошо, поэтому в основном я пытаюсь использовать значение (которое в большинстве случаев является автозаполнением) текстового поля, чтобы заполнить другое текстовое поле данными, извлеченными из базы данных.

Пользователь вводит имя в одном поле, и как только этот ввод теряет фокус, автоматически заполняется секунда с адресом электронной почты, связанным с именем.

Я видел несколько разных плагинов jQuery, которые похожи на то, что я хочу, но работают только для селекторов (что мне не нужно, поскольку есть вероятность, что имя будет новым, которое будет добавлено).

Я знаю, что кто-то скажет что-то вроде: «Ну, почему бы вам просто не взять имя и адрес электронной почты из базы данных и не заполнить форму при загрузке страницы». Ответ: потому что имя будет добавлено на лету (подумайте в русле программного обеспечения для отслеживания заказов, когда вы добавляете новый заказ).

Я использую PHP, MySQL и, конечно, jQuery.

Заранее спасибо.

Answer 1

Вам не нужен плагин для этого, просто вызовите $ .post с событием размытия

$("#name").blur(function () {
    $.post(your_php_file, { name: $(this).val() }, function (data) {
        $("#email").val(data);
    });
});

В вашем php-файле вы сможете получить имя с помощью $_POST["name"] и отправить электронное письмо обратно в javascript, просто повторить его

Если вам нужно загрузить больше данных, чем только строку, вы должны использовать json_encode () для кодирования массива

$name = $_POST["name"];
//pick data from db
$arr = array("email"=>$email, "otherstuff"=>$otherstuff);
echo json_encode($arr);

И измените свой почтовый звонок на этот:

$.post(your_php_file, { name: $(this).val() }, function (data) {
    $("#email").val(data.email);
    $("#otherstuff").val(data.otherstuff);
});

Answer 2

вы можете сделать что-то вроде этого ...

$('#input_1').blur(function(){ // blur event, when the input box loses focus...
   var data = this.value;     // get the data of the this inputbox, in our case id="input_1"
   $.ajax({
       url: 'some/url.php', // your php that is used to query MySql
       method: 'get',       // method to be used , get/post
       data: {
           'foo' : data // the data to be passed, e.g. ?foo=data
       }
       success : function(msg){   // when connection to server is successful, msg is the data returned from 'some/url.php'
           $('#input_2').val(msg); // populate the second inputbox with msg... 
       }
   });
});

из вышеуказанных кодов jQuery, вы можете сделать $_GET['foo'] в php ... и вам нужно echo необходимые данные длявторое поле ввода ....

Answer 3

Вот как это может выглядеть на стороне клиента:

$('#name').blur(function(){
  str = $('#name').val()
  $.get("lookupemail.php", { name: str}, function(data){
    $('#email').val( data );
  });      
});

Когда поле «имя» теряет фокус, отправьте запрос в lookupemail.php с параметром «имя», установленным в поле «имя». Когда запрос будет возвращен, укажите его в поле «email».