Загрузка контента без перезагрузки страницы

soleg · 15.10.2011, 23:30 **Вверх**

Всем привет. Нашёл вот такой код.

Код:

<!-- 
    http://codething.ru -  уголок веб-разработчика 

    AJAX и JavaScript. Загрузка контента без перезагрузки страницы.
    Пример.
-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script>
    function showContent(link) {

        var cont = document.getElementById('contentBody');
        var loading = document.getElementById('loading');

        cont.innerHTML = loading.innerHTML;

        var http = createRequestObject();                    // создаем ajax-объект
        if( http ) {
            http.open('get', link);                            // инициируем загрузку страницы
            http.onreadystatechange = function () {            // назначаем асинхронный обработчик события
                if(http.readyState == 4) {
                    cont.innerHTML = http.responseText;        // присваиваем содержимое
                }
            }
            http.send(null);    
        } else {
            document.location = link;    // если ajax-объект не удается создать, просто перенаправляем на адрес
        }
    }

    // создание ajax объекта
    function createRequestObject() {
        try { return new XMLHttpRequest() }
        catch(e) {
            try { return new ActiveXObject('Msxml2.XMLHTTP') }
            catch(e) {
                try { return new ActiveXObject('Microsoft.XMLHTTP') }
                catch(e) { return null; }
            }
        }
    }
</script>
</head>

<body>

    <p>Какую страницу желаете открыть?</p>
    
    <form>
        <input onclick="showContent('page1.php')" type="button" value="Страница 1"> <input onclick="showContent('page2.php')" type="button" value="Страница 2">
    </form>zz
    
    <div id="contentBody">
    </div>

    <div id="loading" style="display: none">
    Идет загрузка...
    </div>
    
</body>
</html>

Я добавил в формы значения

PHP код:


			
<table><tr><td>

    <form action="" method="post">

    <input type="hidden" name="test1" value="test1">

        <input onclick="showContent('page1.php')" type="button" value="Страница 1"> 



    </form>

</td></tr></table>    

<table><tr><td>

    <form action="" method="post">

    <input type="hidden" name="test1" value="test1">

    

        <input onclick="showContent('page2.php')" type="button" value="Страница 2"> 



    </form>

</td></tr></table>

почему то данные формы не передаются.

Или подскажите как сделать следующее.
1) Есть форма, в ней пользователь вводит данные
=> на следующей странице пользователю выводятся введённые им данные и предлагается дополнить некоторые поля формы и принять соглашение
=> далее на следующей странице ему выводится инфа о том что данные добавлены

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

Злой · 16.10.2011, 00:35 **Вверх**

Сообщение от soleg

почему то данные формы не передаются

а они и не должны передаваться, функция showContent только вызвращает страницу по переданному ей адресу.

Совет: добавь формам name и обращайся к содержимому внутри фнукции showContent по такому принципу - form1name.test1.value, анпример alert(form1name.test1.value);
Хотя не особо понятно чего хочешь добиться...

Совет намбер ту: вкуривай jquery, уже никто на голом яваскрипте не кодит....