POST без отправки и заполнения поля ввода временными данными из POST

Question

У меня возникла проблема с кодом, идея состоит в том, чтобы опубликовать номер карты и получить информацию о человеке из API другого сервера, а затем с помощью кнопки заполнить поле ввода, идентифицированное по идентификатору ввода, данными, которые я получил. из API, не сохраняя его в базе данных.

Текущий шаг:

1. Форма PHP (1.php) -> Работает
2. Ввод номера карты -> Работает
3. Отправка номера карточки с Ajax в другой файл PHP для получения ответа от API (2.php, я также отображаю здесь результат) -> Работает
4. Div Popup (Содержит ответ, повторяемый из 2.php) -> Работает
5. Использование некоторой кнопки для заполнения данных из 2.php в поле множественного ввода 1.php <- проблема здесь </li>

1.php

<script>
function checkcard()
    {
    var name=document.getElementById('card').value;
    var dataString='card='+ name;                                    
        $.ajax({                                     
               type:"POST",
               url:"../loader/2.php",                                
               data:dataString,                                  
               cache:false,
           success: function(html){
              $('#msg').html(html);
           }
    }) return false;    
       }
</script>

<div>
  <label class="col-form-label"><b>Card Number</b></label><br>                                       
  <input class="form-control" type="text" id="card" name="card">
</div>

<button type="submit" class="btn btn-primary mb-3" onclick="return 
  checkcard()">Check
</button>

<div id="msg">
</div>

<label class="col-form-label"><b>NICK</b></label><br>                                           

<input class="form-control" type="text" id="nick" name="nick">

<script type="text/javascript">                                                   
  function autoFill() {                                                      
  document.getElementById('nick').value = <?php echo json_encode($nick); ?>;
}    </script>

<button type="button" class="btn btn-primary" onClick="autoFill(); return true;">

Функция автозаполнения и кнопка находятся в 1.php, и когда я нажимаю кнопку, ничего не происходит, я также пытаюсь поместить ее в 2.php, но когда я нажимаю кнопку, страница обновляется / перезагружаетсяи ответ ушел, любая идея, какя это сделаю?

Answer 1

NICK

функция автозаполнения () {var name = $ ('# nick'). Val ();windows.location.href = "../loader/1.php"?name=" + name;}

Answer 2

Используя <?php echo json_encode($nick); ?> в 1.php, вы возвращаетесь к PHP, что бесполезно, за исключением того, что вы отправляете весь файл 1.php обратно на сервер для предварительной обработки PHP.

Помните, что вы ужеполучил данные 2.php через ajax. Вы можете сохранить эти данные в глобальной переменной, чтобы они были доступны для всего 1.php.

Это преобразование 1.php

<div>
  <label class="col-form-label"><b>Card Number</b></label><br>                                       
  <input class="form-control" type="text" id="card" name="card">
</div>

<button type="submit" class="btn btn-primary mb-3" onclick="return 
  checkcard()">Check
</button>

<div id="msg">
</div>

<label class="col-form-label"><b>NICK</b></label><br>                                           

<input class="form-control" type="text" id="nick" name="nick">

<button type="button" class="btn btn-primary" onclick="return autoFill()">

<script type="text/javascript">     
    var global_data = '';

    function checkcard()
    {
        var name = $('#card').val();
        var dataString ='card='+ name;                                   
        $.ajax({                                     
            type:"POST",
            url:"../loader/2.php",                               
            data:dataString,                                     
            cache:false,
            success: function(data){
                global_data = data;
                $('#msg').html(data);
           }
        }) 
        return false;   
    }                   

    function autoFill() {                                                        
        $('#nick').val(global_data);
        return false;
    }    
</script>

Обратите внимание, что я использую метод jQuery val() вместо свойства JavaScript value, и я возвращаю false для обоих checkcard() и autoFill() функции, чтобы избежать обновления страницы.