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

[makc9I]

Всем привет.
Задача такова: Есть таблица с 7 строками, дни недели: понедельник..воскресение, в каждой строке есть столбец с неким текстом, при клике на который должна выползать форма.

Форма подобного вида:

<form action="<?=$_SERVER["PHP_SELF"]?>" method="POST">
Введите ФИО:<hr>
Место 1:<input type="text" name="seat1"><br>
Место 2:<input type="text" name="seat2"><br>
Место 3:<input type="text" name="seat3"><br>
Место 4:<input type="text" name="seat4"><br>

Выберите пункт назначения:<hr>
<select name="destination">
<option>Вологда</option>
</select><br>

Введите время:<hr>
<select name="hour">
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select>

<select name="minute">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select><br>




<input type="submit" value="Подать заявку">
</form>
Важно то, что в базу надо записать данные из 1ого столбца данной строки, где лежит дата. Как это лучше сделать? Сама эта дата доступна в формате timestamp как переменная php.

Я новичек в javascript, думал с ходу реализовать данный функционал на jquery, вроде должно быть наглядней и проще, но что-то после прочтения учебника так и не смог понять, как это сделать.

[makc9I]

для наглядности приложил скриншот таблицы, кликать надо на текст заказать.

[ksa]

для наглядности приложил скриншот таблицы
Для пущей наглядности нужно делать хтмльный тестовый пример, на котором покажут как можно сделать...

[makc9I]

ну вообще таблица генерится средствами php, вот листинг функции(убрал из нее проверки на вставку классов для наглядности).
А хтмл формы я выкладывал выше
function ShowCurrentWeek($caption, $Day) {
echo "<table >\n\r ";
echo "<caption>".$caption."</caption>\n\r";
$todayIndex = date("N");
for ($i=1; $i<=7; $i++) {

$DayName = GetNameOfDay($i);
$date = date("d m Y",$Day). "<br>". $DayName ;
$dayIndex = date("N", $Day);

echo "<tr>\n\r";

echo "\t<td width='100'>";
echo $date. "</td>\n\r";
echo "\t<td>". "машины" . "</td>\n\r";
echo "\t<td>". "заказать" . "</td>\n\r";

echo "</tr>\n\r";
$Day = strtotime("+1 day", $Day);
}
echo "</table>";
}

[ksa]

ну вообще таблица генерится средствами php
Да мне то что с того? :D

А хтмл формы я выкладывал выше
Таки напрягись! Сделай полный хтмл пример... Или это нам нужно делать? :blink:

[makc9I]

Таблица:
<caption>Текушая неделя</caption>

<tr class='past'>

<td class = 'past' width='100'>18 02 2013<br>Понедельник</td>

<td>машины</td>

<td>заказать</td>

</tr>

<tr class='past'>

<td class = 'past' width='100'>19 02 2013<br>Вторник</td>

<td>машины</td>

<td>заказать</td>

</tr>

<tr class='past'>

<td class = 'past' width='100'>20 02 2013<br>Среда</td>

<td>машины</td>

<td>заказать</td>

</tr>

<tr class='today'>

<td class = 'today' width='100'>21 02 2013<br>Четверг</td>

<td>машины</td>

<td>заказать</td>

</tr>

<td class = 'usual' width='100'>22 02 2013<br>Пятница</td>

<td>машины</td>

<td>заказать</td>

</tr>

<tr class='holliday'>

<td class = 'holliday' width='100'>23 02 2013<br>Суббота</td>

<td>машины</td>

<td>заказать</td>

</tr>

<tr class='holliday'>

<td class = 'holliday' width='100'>24 02 2013<br>Воскресение</td>

<td>машины</td>

<td>заказать</td>

</tr>

</table>

Форма:

<form action="<?=$_SERVER["PHP_SELF"]?>" method="POST">
Введите ФИО:<hr>
Место 1:<input type="text" name="seat1"><br>
Место 2:<input type="text" name="seat2"><br>
Место 3:<input type="text" name="seat3"><br>
Место 4:<input type="text" name="seat4"><br>

Выберите пункт назначения:<hr>
<select name="destination">
<option>Вологда</option>
</select><br>

Введите время:<hr>
<select name="hour">
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select>

<select name="minute">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select><br>




<input type="submit" value="Подать заявку">
</form>

[ksa]

Таблица
Это не таблица... :nono:

[ksa]

makc9I, ты смотрел к/ф Кавказская пленница?
Так вот там отлично учили танцевать. :D Сначала одной ногой... Потом другой... А теперь обеими ногами одновременно!

Т.е. пример нужен не из огрызков, а полностью. :D

[makc9I]

я не понимаю, в чем проблема то? Я скинул весь листинг сгенерированной таблицы, скинул форму, какую хочу получить динамически средствами JS, что еще то скинуть?
Вот это?
<!DOCTYPE html>
<html lang="ru">

<head>
<meta charset="utf-8" />
<title>Заказ машин</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
....таблица....
</body>
</html>

[рони]

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

[ksa]

что еще то скинуть?
Нужны не огрызки, которые кто-то (но не ты) должен собрать в единый хтмл файл, а потом что-то тебе показывать в нём.

Так вот напрягись и сам, для начала, сделай тот хтмл файл, полностью от начала и до конца.

[makc9I]

рони, есть задача: бронирование машин в фирме на поездки в командировки, таблица это текущая неделя, каждая строка - 1 день, во 2ом столбце будут отображаться уже заказанные машины к примеру: в город Н, в город М. В 3м столбце висит кнопка заказать, которая вызывает форму заказа машины. Такая форма должна быть динамически созданной, так как мне нужно с данными, которые будут непосредственно вводиться в форму передавать еще дату из этой строки, которая должна как-то дергаться из этой таблицы и тоже попадать в массив POST.

[ksa]

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

Какой смысл её каждый раз "генерить"?

[Deff]

В принципе идея генерации может быть заменена вставкой контента из тега script type="text"
<script type="text" id="contex-form">
<p class="areafield required">
<span class="input">
<textarea id="main-reply" name="req_message" rows="13"/></textarea>
</span>
</p>
</script>

<script type="text/javascript">
var context = document.getElementById('contex-form').innerHTML;
alert(context)
</script>

[makc9I]

в общем реализовал таким образом:
1)Практически всю форму сгенерировал заранее, получилась такой:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
Дата: <span id="date_span"> </span>
<input type="text" id = "date_input" name="date" hidden="hidden"><br>
Введите ФИО:<hr>
Место 1:<input type="text" name="seat1"><br>
Место 2:<input type="text" name="seat2"><br>
Место 3:<input type="text" name="seat3"><br>
Место 4:<input type="text" name="seat4"><br>
<br>
Выберите пункт назначения:<hr>
<select name="destination">
<?php echo "\r\n".LoadDestinations();?>
</select><br>
<br>

Введите время:<hr>
<select name="hour">
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select>

<select name="minute">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select><br>

<input type="submit" style="margin: 10px 0 0 125px;" value="Подать заявку">
</form>

вставил туда скрытый input куда в дальнейшем буду передавать timestamp даты из данного столбца.

<input type="text" id = "date_input" name="date" hidden="hidden">

И span для отображения даты в удобочитаемом виде:

Дата: <span id="date_span"> </span>


Написал несколько функций для показа/скрытия формы, а также функций для вставки даты и timestamp в поля span и input
<script>
function show(id){
document.getElementById(id).style.display = 'block'; //покажет
}

function hide(id){
document.getElementById(id).style.display='none'; // Скроет слой
}

function putDate(id, date){
document.getElementById(id).value = date;
}

function showDate(id, date){
document.getElementById(id).innerHTML = date;
}
</script>

Сама таблица генерируется средствами PHP, там же обрабатывается и кнопка, клик на которую вызывает форму и вставляет туда нужные данные(дату).
function ShowCurrentWeek($caption, $Day) {
echo "<table >\n\r ";
echo "<caption>".$caption."</caption>\n\r";
$todayIndex = date("N");
for ($i=1; $i<=7; $i++) {

$DayName = GetNameOfDay($i);
$date = date("d m Y",$Day). "<br>". $DayName ;
$dateForForm = date("d m Y",$Day). " ". $DayName ;
$dayIndex = date("N", $Day);

if ($dayIndex < $todayIndex) {
echo "<tr class='past'>\n\r";
} else if ($dayIndex == $todayIndex) {
echo "<tr class='today'>\n\r";
} else if (($dayIndex == 6)or($dayIndex == 7)){
echo "<tr class='holliday'>\n\r";
}
if ($dayIndex < $todayIndex) {
echo "\t<td class = 'past' width='100'>";
} else if (($dayIndex == 6)or($dayIndex == 7)){
echo "\t<td class = 'holliday' width='100'>";
} else if ($dayIndex == $todayIndex) {
echo "\t<td class = 'today' width='100'>";
} else {echo "\t<td class = 'usual' width='100'>";};

echo $date. "</td>\n\r";
echo "\t<td>". "машины" . "</td>\n\r";
echo "\t<td>";
echo <<<HTML
<a href="#" onClick="
show('order_form');
putDate('date_input',$Day);
showDate('date_span','$dateForForm');">
заказать</a>
HTML;
echo "</td>\n\r";

echo "</tr>\n\r";
$Day = strtotime("+1 day", $Day);
}
echo "</table>";
}

На выходе имеем формочку, которая появляется при клике на ссылку заказать, вверху формы динамически вставляется дата из текущей строки, а в скрытое поле input вставляется ее timestamp для передачи в массив POST после нажатия на submit, чтобы мы знали, какой датой добавить заказ в бд.

На скриншоте input не скрыт, чтобы было видно, что туда данные таки передаются, какие надо :)

[makc9I]

если будут какие-то советы, рекомендации, прошу писать. Я с js практически не работал и не уверен, что решил задачу правильным образом.