Блог

Главная - Вопросы по программированию - Как заполнить данные одной формы в другую форму на той же странице перед нажатием кнопки отправки с помощью ajax или js?

Как заполнить данные одной формы в другую форму на той же странице перед нажатием кнопки отправки с помощью ajax или js?

#php #javascript #ajax

#php #javascript #ajax

Вопрос:

Я новичок в ajax и javascript. Я хочу заполнить данные формы ввода в другую форму на той же странице перед отправкой.

Это означает, что я хочу отобразить имя, пол и т.д. регистрационной формы в другой форме на той же странице, прежде чем она будет отправлена с помощью события click button.

Пожалуйста, кто-нибудь разместит несколько примеров.

Комментарии:

1. Можете ли вы уточнить? Неясно, что вы пытаетесь сделать. Вы просто пытаетесь заполнить поля на странице из других полей на странице без отправки на сервер? Можете ли вы привести какой-нибудь издевательский пример?

2. Да, я хочу заполнить введенные данные в полях другой формы на той же странице перед отправкой данных, вот пример vistaprint.co.uk/vp/ns /…

Ответ №1:

(В ответ на ваш комментарий к вопросу выше …)

Ах, этот пример значительно сложнее, чем предполагалось ранее. Целью в этом примере является не форма, а изображение. В вашем серверном коде уже есть функциональность для генерации изображения?

Отправка AJAX на сервер — очень простая часть в этом случае. Например, используя jQuery, вы можете сделать что-то вроде этого:

 $.ajax({
  type: 'POST',
  url: 'somepage.php',
  data: data,
  success: function() {
    alert('success!');
  },
  dataType: 'json'
});

Переменная ‘data’ будет создана из элементов вашей формы. Возможно, что-то вроде этого:

 var data = '';
data = data   'somevalue='   $('#formElement').val();
data = data   'anothervalue='   $('#aDifferentElement').val();
// etc.

По сути, код отправляет HTTP POST на указанный URL с предоставленными данными, а затем запускает предоставленную функцию «success» при успешном результате. Вы также можете добавить функцию «ошибка» для результата ошибки.

В вашем случае результат выглядит как изображение. Таким образом, вы в конечном итоге устанавливаете src атрибут в img теге для результирующего изображения. Что-то вроде этого:

 $('#imageElement').attr('src', someString);

Я не уверен точно, как они это делают в этом примере, но вы, безусловно, можете просмотреть код и пошагово выполнить его в Firebug, чтобы увидеть, что вы можете найти. Ответ, похоже, представляет собой фактическое изображение, а не ссылку на изображение. Но вы можете создать свой в любом случае.