Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменение содержимого div по клику и передача данных POST (https://javascript.ru/forum/misc/23124-izmenenie-soderzhimogo-div-po-kliku-i-peredacha-dannykh-post.html)

Serious2008 13.11.2011 03:40

Изменение содержимого div по клику и передача данных POST
 
Здравствуйте. Я начинаю только изучать аякс. Есть одна идея от которой отказаться не могу. Думаю реализовать это при помощи трёх <div>.
Помогите или советом(желательно точным, а не просто на мануал по всему аяксу).
В первом <div id='first'></div> Изначально будет содержатся какая-та форма, не принципиально какая.
Второй <div id='second'></div> Он будет изначально скрыт, в нём будет вначале пусто.
Третий <div id='three'></div> Будет кнопка с название отправить.

Так вот мне нужен пример того. Как после нажатия кнопки. Данные из формы идут в php файл. Там они обрабатываются. И потом мы получаем новую форму для <div id='first'></div> и временно прячем её, а для <div id='second'></div> Получаем сообщение, которое и выводим на экран. А так же меняем название кнопки на что-то типа следующий.

Потом нажав кнопку ещё раз. Второй див прячется, кнопка становиться снова отправить. А первый див появляется.

У меня загвоздка в том, что я не знаю как мне передавать в определённый див, определённую информацию. В один див всю информацию передавать у меня получалось.
Использовал jQuery.Forms и просто jQuery

trikadin 13.11.2011 03:48

Цитата:

Сообщение от Serious2008
В один див всю информацию передавать у меня получалось.

А что мешает передать всю информацию в какой-то другой див?

Вы написали себе план действий - так реализуйте его. Если будет не получаться что-то конкретное - спрашивайте. И почитайте документацию к jQuery, весьма вероятно, что там будут ответы на ваши вопросы.

Serg_pnz 13.11.2011 10:35

Пример
<div id="opreddiv">start</div>
$('#opreddiv').html('Определенная информация')


Ссылка
http://jquery.page2page.ru/index.php...%D1 %82%D0%B0

Serious2008 13.11.2011 20:12

Вот как у меня в оригинале.
<div id="output">

<form id="myForm" method="post" action="/poll-15-3.html">

<p align=center><b>asdasd</b></p>

<input type=radio value="0" name="vopros[]"> asdasdasd
<br><input type=radio value="1" name="vopros[]"> asdasdasdasd
<br><input type=radio value="2" name="vopros[]"> asdasdasdasd<br>&nbsp;



<input type=submit value=Отправить>



</form>



</div>

<br><p align=center><a href="http://articlesua.net/poll-all.html">Статистика</a></p>



<script type="text/javascript">

$(document).ready(function(){



  var options = { 



  	target: "#output",

    beforeSubmit: showRequest,

    success: showResponse, 

    timeout: 3000

  };

  



  $('#myForm').submit(function() { 

    $(this).ajaxSubmit(options); 



    return false;

  }); 



});



// вызов перед передачей данных

function showRequest(formData, jqForm, options) { 



    var queryString = $.param(formData); 





    return true; 

} 

 

// вызов после получения ответа 

function showResponse(responseText, statusText)  { 



$('#output').show();



}

</script>

Вот как в отладчике.


После нажатия отправить появляется новая форма. Её код не знаю как показать, но в отладчике вот так оно выгялидит


И когда на второй форме нажимаю на кнопку АЯКС не срабатывает, а срабатывает именно выполнение. Вот это и есть загвозка. Не могу понять почему не срабатывает аякс.


Часовой пояс GMT +3, время: 03:42.