HTML+CSS+JavaScript

Привет. Написал такой код:

<script type='text/javascript'>   $(document).ready(function(){     $("#send").click(function(){           var name = $("#name").val();           var text = $("#text").val();          $.post("server.php", { name: name, text: text}, function(data) {          $("#comments").append(data);          });          $('#name').attr('value','');          $('#text').attr('value','');              });  });   </script>          <div id="comments"></div>          <input name="name" id='name' type="text"><br>          <textarea id="text"></textarea><br>          <button id='send'>send</button>

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

Подскажите, пожалуйста как сделать, чтобы код работал с формой такого вида:

<form id='form' action='' method='post'>          <input name="name" id='name' type="text"><br>          <textarea id="text"></textarea><br>          <input id='submit' type="submit">  </form>

Блеск!!!
Вы сотворили шедевр из цикла "нарочно не придумаешь"!

Разработал я тут технологию фокуса - "распиливание женщины".
Всё отлично работает - все думают, что женщина реально распиливается.

Но я хочу женщину по-настоящему распиливать!!!
Сделал станок, кладу женщину, пилю... и она умирает...

Подскажите, пожалуйста, как быть - чтобы и женщина была настоящая, и пилили её чтобы взаправду, но чтобы она не умирала? :-))
-----

Понимаете ли... форма с кнопкой сабмит - это такая штука, которая ВЗАПРАВДУ отправляет данные формы С ПЕРЕЗАГРУЗКОЙ страницы.
Ваш код с аяксом здесь... как дополнительный и НЕНУЖНЫЙ антураж - он вроде бы и есть, но не работает и работать не будет.
Так что... женщина ваша безусловно помрёт :-)))

Не понял...
Тот код что есть сейчас, он отправляет данные на сервер. Выводит информацию с сервера. Я просто хочу понять как отправить данные из формы?! А бред про женщину, я если честно вообще не понял.

Я вам вроде бы как ответил в разделе РНР. И вам об этом тут еще раз сказали.
В том и прелесть Ajax, что она и не собирается отправлять вашу форму, и на сервере вам не нужна форма как таковая, а нужны ее поля и их значения.
Еще раз повторять, что при щелчке по кнопке submit происходит реальная (!) отправка формы, со всеми вытекающими из этого последствиями, я не буду, пора бы это уже выучить.
"Отправка формы" вместо двух полей, это тоже самое - нужно передать методу ajax все поля этой формы и заблокировать реальную отправку формы.
Вот только, если форма будет содержать полей 30, вы так каждое поле и будет ручками прописывать? А где же ваше "я прочел", по тем ссылкам, что я ранее вам давал, да еще и пример приводил как обработать поля формы для ajax?

Это вы написали БРЕД.
Я лишь попытался вам объяснить всю глубину этого вашего бреда.

Не поняли?

Давайте по-другому объясню.
В батальных кинофильмах пиротехники готовят всякие-разные эффекты - в том числе имитируют взрывы гранат.
Шум - как при настоящем взрыве.
Столб пламени, дым - тоже как при настоящем взрыве.
Но самого взрыва - НЕТ.

Теперь представьте себе режиссёра, который для б_О_льшей убедительности ко всем этим пиротехническим эффектам решил подложить ещё и самую настоящую гранату....
-----

Нажатие кнопки сабмита в форме приведёт к НАСТОЯЩЕЙ перезагрузке страницы.
Ушедшему на сервер запросу НЕКУДА будет вернуться - страницы, которая этот запрос на сервер отправила, в браузере уже НЕ БУДЕТ.

Или настоящая форма с настоящей же перезагрузкой станицы ("реальная граната"), или же форма, но с аяксом вместо сабмита ("пиротехнический эффект").
Совмещение того и другого ("гранаты и пиротехники") - бессмысленно.
Взрыв настоящей гранаты дополнительно "усиливать" не надо :-)

Ну то есть, в первом варианте (который у меня работает) у меня правильно написано?

Ещё раз.
По буквам.

1. При отправке данных на сервер путём сабмита формы браузер формирует некую "строку", состоящую из пар "?имя=значение[&другое_имя=другое_значение...]"

Если метод отправки GET, то эту строку можно реально увидеть собственными глазами в адресной строке браузера. "Именами" из пар будут имена полей в форме, а "значениями" из пар - значения полей формы.
Если метод отправки - POST, то эту "строку" увидеть нельзя, но она - как суслик из анекдота - есть. Именно в таком же виде: "имя поля формы=значение этого поля формы[&следующая пара]"


2. При отправке ajax'ом также на сервер отправляется некая "строка".
Но вот требования к виду этой строки ПРИНЦИПИАЛЬНО изменяются в зависимости от метода отправки.
Если выбран способ отправки GET, то строка эта НИКАК не регламентирована. В этой "строке" может не быть никаких имён. Более того - там даже может вообще быть пусто.
А вот при отправке ajax'ом методом POST требования точно такие же, как и при отправке формой. Т.е. должны быть:
а) реальная форма
б) реальные поля этой формы с именами
в) реальные значения этих реальных полей формы
Но как раз реального сабмита формы - НЕ ДОЛЖНО БЫТЬ.

Форма - такая же, но без кнопки сабмита.
Вместо реального нажатия на кнопку сабмита должен быть скриптовой запуск ajax-отправки этой "строки".

Я правильно понимаю, что нужно сделать что-то вроде этого?

<form action='' method='post'>                 <input name="name" id='name' type="text"><br>         <textarea id="text"></textarea><br>         <button id='send'>send</button> </form>

Но тогда вопрос, почему инфа с сервера не отображается, после отправки?

Потому что тег <button> внутри формы делает тоже самое, что и кнопка <input type="submit">, т.е. реально сабмитит форму.

"Ну вы тупой!" (я не обзываюсь, я фильм "Ирония судьбы" цитирую)

ВМЕСТО кнопки сабмита в любом её виде (<input type="submit">, <button></button>, <input type="image">) сделайте нейтральный объект, нажатие на который не ведёт к сабмиту формы.

Это может быть кнопка <input type="button">, это может быть тег <a> с return false на событии onclick, это может быть ЛЮБОЙ плайн-тег - <div>,<span>, <b>, <u>... с обработкой события onclick. И вот на этот самый onclick "навесьте" вызов функции, коя запускает ajax-отправку данных.
<div id='send'>send</div>
<span id='send'>send</span>
...
Да хоть <ХРЕН id='send'>send</ХРЕН>, но НЕ <button id='send'>send</button>

Ок. Так сработало. Спасибо.
Скажите пожалуйста, вы где ajax учили? Сами или в вузе?
А то может посоветуете чего?