Как заполнить форму, когда пользователь нажимает на строку, не обновляя страницу?

Question

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

Есть ли способ сделать это без обновления страницы?

Answer 1

Если вся информация, в которой нуждается форма, уже присутствует на странице, тогда AJAX будет излишним, и простой Javascript отлично справится с этой задачей. Это не проверено, но;

<form id="myform">
  <input id="name" type="text" ... />
</form>

<tr> 
   <td onclick="populateFormElement('myform', 'name', this);">Bob</td>
</tr>

в JavaScript;

function populateFormElement(formName, inputName, element)
{
   document.formName.inputName.value = element.firstChild.data;
}

Это работает для одного элемента, но должно быть разумной отправной точкой, поскольку процесс легко адаптировать к целым строкам. Просто поместите событие onclick в элемент tr и еще раз пройдитесь по различным дочерним элементам, чтобы извлечь соответствующие данные.

Answer 2

Есть ли способ сделать это без обновления страницы?

Итак, ключ асинхронный . Первый A в Ajax обозначает то же самое слово. Вы также отметили вопрос с помощью Ajax. Поэтому я ожидаю, что у вас есть определенные знания об этом.

Но настоящий вопрос вообще не требует аяксического решения. Вам вообще не нужно отправлять и получать данные со стороны сервера, просто потому что все необходимые данные уже доступны внутри того же HTML DOM дерева.

Единственный возможный язык, который может обращаться к дереву HTML DOM на клиентской стороне и обходить его, - Javascript. Это не обновляет страницу вообще. Просто напишите соответствующий код и выполните его во время события onclick строки таблицы.

Если у вас действительно есть проблема в написании кода Javascript соответственно, то вам нужно немного подробнее рассказать об этом в своем вопросе. Не спрашивайте "Есть ли способ?" - ответ в 99,99% случаев yes, но просто спросите «Как мне это сделать?», предоставив соответствующую информацию о кодировке, которую вы имеете.

Answer 3

Получите JQuery и посмотрите на его функции AJAX. Вам нужно будет подготовить данные в PHP и создать специальную страницу для их обслуживания. Функция AJAX будет вызываться, когда пользователь нажимает кнопку, он загружает данные с сервера, затем анализирует их и заполняет сетку ...