У меня немного странная проблема. Мне нужно убедиться, что текстовые поля в моей форме получают автозаполнение с помощью двух объектов JSON, созданных в PHP-скрипте, на основе ввода пользователем из другого текстового поля в форме.
HTML:
<p>Number: <input type="text" name="numbox" id="numbox" maxlength="10"></p> <p>First Name: <input type="text" id="firstnamebox" maxlength="20" name="firstnamebox"></p> <p>Last Name: <input type="text" id="lastnamebox" maxlength="20" name="lastnamebox"></p> JQuery:
$(document).ready(function () { $("#numbox").keyup(function () { var el = $(this); if (el.val().length === 10) { $.ajax({ url: "http://localhost/test.php", dataType: "json", type: "POST", data: {el.val()}, success: function (result) { $("#firstnamebox").val(result.firstname); $("#lastnamebox").val(result.lastname); } }); } }); });
test.php
<?php $num=$_POST["numbox"]; if ($num="0123456789") { $fill = array('firstname' => "John", 'lastname' => "Smith",); echo json_encode($fill); } else { echo "Bad input."; } ?>
Строка JSON работает на моем сервере, поэтому я не думаю, что мой PHP плохой. Предполагается, что логика должна быть там, где пользователь вводит 0123456789 в первое текстовое поле, а остальные 2 заполняются соответственно Джоном и Смитом. Автозаполнение не работает вообще (возможно, из-за моего кода jQuery / AJAX), поэтому я был бы признателен за любую помощь, которую вы можете мне дать в решении этой проблемы.
EDIT: Я понял через консоль ошибок, что мой jQuery не смог подключиться к моему локальному хосту. Я исправил это, разрешив передачу по перекрестному происхождению. Пришлось добавить
header("Access-Control-Allow-Origin: *");
в верхней части моего PHP-скрипта, чтобы разрешить соединение. Его также можно изменить с панели управления сервером. Следующий выпуск был вызван моим кодом jQuery. Более опытный разработчик предложил некоторые изменения кода, и теперь он выглядит так:
$(function () { $("#numbox").keyup(function () { var el = $(this); if (el.val().length === 10) { $.ajax({ url: "http://localhost/test.php", dataType: "json", type: "POST", data: "numbox="+el.val(), success: function (result, success) { $("#firstnamebox").val(result.firstname); $("#lastnamebox").val(result.lastname); } }); } }); });
Я просто рад, что это работает. Спасибо всем, кто помогал мне в этом.