Вывод формы табов и дальнейшая отправка через ajax, записывает только первый таб.

ayn · 1 Апр 2014

код для табов

Код:

(function($) {
$(function() {
    $('ul.tabs').on('click', 'li:not(.current)', function() {
        $(this).addClass('current').siblings().removeClass('current')
            .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
    })
    var tabIndex = window.location.hash.replace('#tab','')-1;
    if (tabIndex != -1) $('ul.tabs li').eq(tabIndex).click();
    $('a[href*=#tab]').click(function() {
        var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1;
        $('ul.tabs li').eq(tabIndex).click();
    });
})
})(jQuery)

код на странице

Код:

 echo '<h3 style="text-align:center; float:left; width:72%">Вопросы теста</h3>';
 $questions_query = "SELECT * FROM `questions` WHERE `test_id` =".$test['test_id'];
$questions_result = mysql_query($questions_query);
$questions_rows = mysql_num_rows($questions_result);
for($i = 0; $i < $questions_rows; $i++){
    $questions[$i] = mysql_fetch_assoc($questions_result);                                      
}
echo '<div class="section" style="margin-left:10px; width:770px;">';
echo '<ul class="tabs">';
//цикл формирования вкладок
for($i = 0; $i < /*count($questions)*/50; $i++){
    $quest_number = $i+1;
    echo '<li';
    if(isset($_POST['active_tab'])){
        if($_POST['active_tab']==$quest_number){echo ' class="current"';}else{echo '';};
    }else{
        if ($i==0){echo ' class="current"';} else{echo '';};
    }    
    echo '><a style="color:#777;" href="#tab'.$quest_number.'">'.$quest_number.' </a></li>';
        ?><!--<script>                                                  
    function onAjaxSuccess(data)
{
  // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
  alert(data);
}    
        </script>--> <?php               }
echo '</ul>';
   //цикл формирования содержимого вкладок, прогоняем его столько раз, сколько у нас вкладок
for($i = 0; $i < /*count($questions)*/50; $i++){
$qusetions_shuffle[0] = $questions[$i]['true_opt'];
$qusetions_shuffle[1] = $questions[$i]['false_opt1'];
$qusetions_shuffle[2] = $questions[$i]['false_opt2'];
$qusetions_shuffle[3] = $questions[$i]['false_opt3'];
$qusetions_shuffle[4] = $questions[$i]['false_opt4'];
$quest_number = $i+1;
    echo '<div';
    if(isset($_POST['active_tab'])){
        if($_POST['active_tab']==$quest_number){echo ' class="box visible" style="height:250px; width:750px; padding-top:5px; padding-left:5px;"';}else{echo ' class="box" style="height:250px; width:750px; padding-top:5px; padding-left:5px;"';};
    }else{
        if ($i==0){echo ' class="box visible" style="height:250px; width:750px; padding-top:5px; padding-left:5px;"';} else{echo ' class="box" style="height:250px; width:750px; padding-top:5px; padding-left:5px;"';};
    }
    echo '>';
    $quest_number = $i+1;
    //$questions = array_merge($questions);
    echo $quest_number;
        $quest_number2=$quest_number+'1';
                          ?>            
    <?php
    ?><form method="POST" action="index.php#tab<?=$quest_number2?>">';
<?php  
   echo '<a onclick="send();"  style="color:#fff;" href="#tab'.$quest_number2.'">Следующий вопрос </a>';
                                                  echo '<table>';
    echo '<tr>';
    echo '<td style="color:white; vertical-align:top; ; width:100px;">Вопрос №'.$quest_number.':</td>';
    echo '<td>'.$questions[$i]['quest_text'].'</td>';
    echo '</tr>';
    shuffle($qusetions_shuffle);
    for($j=0; $j < count($qusetions_shuffle); $j++){
        if(strlen($qusetions_shuffle[$j]) > 1){
            echo '<tr>';
            echo '<td style="color:white; vertical-align:top; text-align:right;"><input type="radio" name="answer" value="'.$qusetions_shuffle[$j].'" /></td>';
            echo '<td>'.$qusetions_shuffle[$j].'</td>';
            echo '</tr>';
        }
    }
    $disable_query = "SELECT *
                        FROM `answers`
                        WHERE user_id =".$user['user_id']."
                        AND question_id = ".$questions[$i]['quest_id'];
    $disable_result = mysql_query($disable_query);
  ?><td>
    <input type="text" name="mydata" id="mydata" />
    <input type="button" onclick="send();" value="Отправить" />
  <div id="result"></div></td>
  <?
  if(mysql_num_rows($disable_result)==0){
        echo '<td rowspan="2"><a href="#tab'.$quest_number2.'"><input type="submit" name="save_quest_opt" value="Ответить"  onclick="window.navigate(<#tab$quest_number2>)" />
        </a>
        </td>';
    }
    else{
        echo '<td rowspan="2"><input type="submit" name="save_quest_opt" disabled="disabled" value="Ответить" /></td>';
    }
    echo '<input type="hidden" name="sections" value="'.$_SESSION['sections'].'" />
            <input type="hidden" name="course_id" value="'.$course_id.'" />
            <input type="hidden" name="quest_id" value="'.$questions[$i]['quest_id'].'" />
            <input type="hidden" name="test_id" value="'.$test['test_id'].'" />
          <input type="hidden" name="active_tab" value="'.$quest_number.'" />
            <input type="hidden" name="mod" value="Редактировать" />';            
    echo '</tr>';
    echo '</table>';
    echo '</form>';
    echo '</div>';
}echo '</div>';

Код ajax

Код:

function send()
{
var data = $('#mydata').val();
       $.ajax({
                type: "POST",
                url: "answer.php",
                data: "data="+data+"&data2="+data2+"&data3="+data3+"&data4="+data4+"&data5="+data5+"&data6="+data6+"&data7="+data7+"&data8="+data8,
                success: function(html) {
                        $("#result").empty();
                        $("#result").append(html);
                }
        });
}

ayn · 1 Апр 2014

Понимаю, что нужно id форме присвоить, но как это сделать? И как её потом обрабатывать?

riff · 1 Апр 2014

HTML:

<? for($i = 0; $i < /*count($questions)*/50; $i++){ ?>
    <form data-question>
        ...
        <!-- заменить <input type="text" name="mydata" id="mydata"> на -->
        <input type="text" name="mydata">

        <!-- заменить <input type="button" onclick="send();" value="Отправить" /> на -->
        <input type="button" data-send value="Отправить">

        <!-- заменить <div id="result"></div> на -->
        <div data-result></div>
    </form>
<? } ?>

<script>
$(function() {
    $('form[data-question]').find('input[data-send]').on('click', function() {
        var form = $(this).closest('form');
        var data = form.find('input[name="mydata"]').val();
        ....
        $.ajax(
                ....
                success: function(html) {
                        form.find('div[data-result]').empty();
                }
        );
});
</script>

UPD: обновлено в 11:30
UPD: блин, сколько там submit'ов
UPD: обновлено в 11:36
UPD: обновлено в 11:40

riff · 1 Апр 2014

$.ajax({
....
data: "data="+data+"&data2="+data2+...,
});

Код:

$.ajax({
    data: {
        data1: value1,
        data2: value2,
        ...
    }
});

ayn · 1 Апр 2014

код не работотает, до этого Вы писали, отрабатывал, а сейчас нет

Uncaught SyntaxError: Unexpected token . index.php:524
Uncaught SyntaxError: Unexpected token . index.php:556
Uncaught SyntaxError: Unexpected token . index.php:588
Uncaught SyntaxError: Unexpected token . index.php:620
Uncaught SyntaxError: Unexpected token . index.php:652
Uncaught SyntaxError: Unexpected token . index.php:684
Uncaught SyntaxError: Unexpected token . index.php:716
Uncaught SyntaxError: Unexpected token . index.php:748
Uncaught SyntaxError: Unexpected token . index.php:780
Uncaught SyntaxError: Unexpected token . index.php:812
Uncaught SyntaxError: Unexpected token .

Здесь ничего изменять не нужно? Точки до и после $.ajax(

Код:

<script>
$(function() {
    $('form[data-question]').find('input[data-send]').on('click', function() {
        var form = $(this).closest('form');
        var data = form.find('input[name="mydata"]').val();
        ....
        $.ajax(
                ....
                success: function(html) {
                        form.find('div[data-result]').empty();
                }
        );
});
</script>

флоппик · 1 Апр 2014

Божественно, я считаю.

riff · 1 Апр 2014

Ну ладно я - на коленке писал, но ты же пишешь в редакторе с подсветкой синтаксиса?
});
забыл добавить в конце.

флоппик · 1 Апр 2014

riff, ты кажется, не понял

riff · 1 Апр 2014

А, ну да. Тетерь вопрос полностью прочитал.

ayn · 1 Апр 2014

Вот так должно быть? Всё равно не отрабатывает
<script>
$(function() {
$('form[data-question]').find('input[data-send]').on('click', function() {
var form = $(this).closest('form');
var data = form.find('input[name="mydata"]').val(); });
....
$.ajax(
....
success: function(html) {
form.find('div[data-result]').empty();
}
);
});
</script>

riff · 1 Апр 2014

1. "В конце" значит в конце, а не посередине.
2. Точки нужны, блин, затем, чтобы не копипастить твой текст. Предполагалось, что ты его добавишь сам.

ayn · 1 Апр 2014

riff написал(а):
1. "В конце" значит в конце, а не посередине.
2. Точки нужны, блин, затем, чтобы не копипастить твой текст. Предполагалось, что ты его добавишь сам.

Вот так тоже не работает... Честно говоря до этого не работал с javascript вообще...
$(function() {
$('form[data-question]').find('input[data-send]').on('click', function() {
var form = $(this).closest('form');
var data = form.find('input[name="mydata"]').val();
$.ajax(
data1: mydata,
success: function(html) {
form.find('div[data-result]').empty();
}
);
});
});
</script>

Мне для начала хотя бы, чтобы переменная выводилась, а потом уже буду в базу записывать

ayn · 1 Апр 2014

В багере снова
Uncaught SyntaxError: Unexpected token : index.php:1805
Uncaught SyntaxError: Unexpected token : index.php:1837
Uncaught SyntaxError: Unexpected token : index.php:1869
Uncaught SyntaxError: Unexpected token : index.php:1901
Uncaught SyntaxError: Unexpected token : index.php:1933
Uncaught SyntaxError: Unexpected token : index.php:1965
Uncaught SyntaxError: Unexpected token : index.php:1997
Uncaught SyntaxError: Unexpected token : index.php:2029
Uncaught SyntaxError: Unexpected token : index.php:2061
Uncaught SyntaxError: Unexpected token :

riff · 1 Апр 2014

ayn написал(а):
Мне для начала хотя бы, чтобы переменная выводилась, а потом уже буду в базу записывать

Создай отдельный файлик "test.php", без изменений вставь:

Код:

<?php

ini_set('display_errors', 1);
error_reporting(E_ALL | E_STRICT);

if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
    echo $_POST['aaa'];
    exit;
}
?>
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<? for ($i = 0; $i < 3; $i++) { ?>
    <form data-question>
        Введи текст
        <input type="text" name="mydata">
        <input type="button" data-send value="Отправить">
        <div data-result></div>
    </form>
<? } ?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
    $(function() {
        $('form[data-question]').find('input[data-send]').on('click', function() {
            var $form = $(this).closest('form');
            var $value = $form.find('input[name="mydata"]').val();

            $.ajax({
                type: 'POST',
                data: {
                    aaa: $value
                },
                success: function(html) {
                    $form.find('div[data-result]').html(html);
                }
            });
        });
    });
</script>
</body>
</html>

ayn · 1 Апр 2014

Большое спасибо, теперь осталось адаптировать под свой код

ayn · 1 Апр 2014

А как вывести текст из <input type="radio" name="answer" value="'.$qusetions_shuffle[$j].'" />

Вот так выводиться цифра 1
var $value6 = $form.find('radio[name="answer123"]').val();

riff · 1 Апр 2014

Ты учишься методом тыка?
(подсказка: radio - нет такого элемента)

riff · 1 Апр 2014

value1, value2, value3, ......

если вдруг тебе надо отправить все input'ы формы без перебора, то

Код:

$.ajax({
    ...
    data: $form.serialize(),
    ....
});

ayn · 1 Апр 2014

Сделал в итоге так
var $value6 = $(":radio[name=answer123]").filter(":checked").val();

и ещё последний вопрос, раньше на другой таб у меня переходило так echo '<a onclick="send();" style="color:#fff;" href="#tab'.$quest_number2.'">Следующий вопрос </a>';

А как теперь это можно реализовать? Или хотя бы в какую сторону копать, Вы и так уже очень сильно помогли мне...
Попробовал вот так:
<input type="button" data-send value="Отправить" onclick="document.location.replace(#tab<?=$quest_number2?>)";>
не работает...

riff · 1 Апр 2014

onclick="document...

1. не надо говнять html javasctipt'ом

раньше на другой таб у меня переходило так .....
А как теперь <input type="button" data-send value="Отправить">

Код:

<input type="button" data-next value="Таб">

<script>
    $(function() {
        $('form[data-question]').find('input[data-next]').on('click', function() {
...

Вывод формы табов и дальнейшая отправка через ajax, записывает только первый таб.

Новичок

Новичок

Новичок

Новичок

Новичок

promotor fidei

Новичок

promotor fidei

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок