Соберите данные формы для представления ajax

У меня есть база данных, которая содержит более 50 элементов, которые необходимо проверить и, возможно, отредактировать. У меня есть веб-страница, которая извлекает данные из базы данных с помощью php и отображает ее как значения в веб-форме. Затем у меня есть серия кнопок отправки в нижней части страницы, в зависимости от того, что пользователь хочет делать. Каждая кнопка использует метод onclick для вызова функции javascript.Соберите данные формы для представления ajax

В случае, когда необходимо внести некоторые изменения, пользователь внесет изменения непосредственно в веб-форму. Например, в текстовом поле значение textarea отображает текущее содержимое элемента базы данных. Затем пользователь может редактировать содержимое. Нажатие кнопки «Сохранить изменения» вызывает функцию ajax для отправки данных обратно на сервер с помощью запроса POST.

Проблема, с которой я столкнулся, возможно, просто для того, кто знает, как собирать все обновленные данные из разных компонентов формы для отправки на сервер в переменной «FormData» ниже (предположительно, массив). Есть ли способ сделать это все сразу, или мне нужно пройти каждый элемент формы и добавить их в массив один за другим? «msg» относится к <div id="msg"></div>, где будет отображаться сообщение со страницы сервера.

Моя функция Аякса до сих пор:

function callsave() { 
    var xmlHttp, FormData; 
    xmlHttp = new XMLHttpRequest; 
    xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
      document.getElementById("msg").innerHTML = xmlHttp.responseText; 
     } 
    } 
    xmlHttp.open("POST", "savechanges.php", true); 
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    xmlHttp.send(FormData); 
}

кнопку отправки в конце формы является:

<input type="button" value="Save Changes" id="save" onClick="callsave();">

Большое спасибо за указание мне в правильном направлении. Кстати, это мое первое ajax-кодирование.

источник

2013-08-29 John

Если вы используете JQuery, это может быть легко по FormData=$('#formId').serialize(), сериализации() будет возвращать все данные формы в строку запроса стиля, как «имя = AAA & действия = BBB»

источник

2013-08-29 04:21:36 Teddy

Спасибо, это сработало кроме без '$ .param'. Не знаю, почему. 'FormData = $ ('# FormName'). Serialize()' работал отлично. – John

@John Вы правы, результат результата serialize() подобен строке запроса, поэтому не нужно использовать $ .param(). Я обновил свой ответ. – Teddy

«... как собрать все обновленные данные из различных компонентов формы ...»

Не зная, что внутри вашей полной форме и ваш обработчик (savechanges.php),

вы могли бы потянуть каждое значение POST из вашей формы, используя этот фрагмент в savechanges.php:

foreach ($_POST as $key=>$value) { 
    $post_values=$key.": " . $value . "\n"; 
}

источник

2013-08-29 04:20:58

Я не уверен, что такое ваш html, но вы можете назначить уникальный идентификатор каждой кнопке формы (это можно сделать в php, назначив первичный ключ вашей строки в db) и кнопку отправки, чтобы вы может получить форму, которую вам нужно отправить с идентификатора кнопки отправки.

Например, если форма HTML как это:

<form id="data-<?php //put the primary key of the row here ?>"> 
<!-- rest of your form attributes here --> 
<input type="Submit" id="submit" class="submit" onClick="callSave(<?php //same primary key as your form?>)" /> 
</form>

Что касается Ajax, я хотел бы предложить вам использовать $ .ajax функцию JQuery, как его гораздо проще кода, чем в родных JS.

вы могли бы сделать что-то подобное в вашей callsave функции

function callSave(formId) 
{ 
    $.ajax({ 
    type : 'POST', 
    url : //your post url, 
    data : $("#data" + formId).serialize(), 
    success : function(data){ 
     $("#msg").text(data); 
    } 
    }); 
}

Настройка JQuery является ветер.Следуйте this link

источник

2013-08-29 04:21:00

Соберите данные формы для представления ajax

ответ

Смежные вопросы