Javascript-форум - Полуавтоматическое заполнение формы

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Полуавтоматическое заполнение формы (https://javascript.ru/forum/misc/28826-poluavtomaticheskoe-zapolnenie-formy.html)

Полуавтоматическое заполнение формы

Подскажите, как можно осуществить такую небольшую функцию (что почитать, какие разделы)

На сайте есть форма, которая будет заполняться как вручную, так и автоматически:

1. Нажимаем на первое изображение под формой, добавляется один текст
2. Нажимаем на второе изображение под формой к первому тесту добавляется второй
3. К имеющемуся в форме тексту дописываю необходимый текст вручную

Элементарно, но кроме рисунков твоих стараний-попыток нет (

Хотя-бы html написал сам :) для начала

Да это не пытка вовсе пару минут в фотошопе, зато понятно )

Цитата:

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

Да это не пытка вовсе пару минут в фотошопе, зато понятно )

я как раз написал что попытки нет, нет кода...

как напишешь html такой же как нарисовал или не сможешь что то возвращайся подскажем что дальше :)

Договорились )

<div id="myDiv">
  <input>
  <input type="button" value="red">
  <input type="button" value="green">
</div>


<script>
window.onload = function () {
  var myDiv = document.getElementById('myDiv');
  var inputs = myDiv.getElementsByTagName('input');

  myDiv.onclick = function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    if (target.parentNode == myDiv && target != inputs[0]) {
      inputs[0].value += target.value + ', ';
    }

  }

}
</script>

Спасибо, попробую

Цитата:

Сообщение от beard (Сообщение 178724)

как напишешь html такой же как нарисовал или не сможешь что то возвращайся подскажем что дальше :)

Хоть и подсказали уже, но на всякий случай вот:

<html>
<head>
<title>Тестовая форма</title
</head>
<body>
<form action="lalala.php">
<table>
<tr>
<td width="500" align="center" colspan="2"><input type="text" name="тест" maxlength="25" style="width: 400px; height: 20px; font-family: verdana; font-size: 12px;"></td>
</tr>
<tr>
<td width="200" align="right"><img style="cursor: pointer;" src="buttonred.jpg"></td><td align="left" width="200"><img style="cursor: pointer;" src="buttongreen.jpg"></td>
</tr>
<tr>
<td height="50" valign="bottom" align="center" colspan="2"><input type="submit" name="кнопка" value="отправить" style="width: 60px; height: 18px; font-family: verdana; font-size: 8px;"></td>
</tr>

</table>
</form>
</body>
</html>

Может на jquery, что-нибудь проще есть?

<html>
 <head>
 <title>Тестовая форма</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
 span.Data-Hidden{
   display:none;
 }
</style>
 </head>
 <body>
 <form action="lalala.php">
 <table>
 <tr>
 <td width="500" colspan="2" class="FirstInp"><input type="text" name="тест" maxlength="25" style="width: 400px; height: 20px; font-family: verdana; font-size: 12px;"></td>
 </tr>
 <tr>
 <td class="InsertData">
   <img style="cursor: pointer;" src="buttonred.jpg">
   <span class="Data-Hidden">Данные Левой кнопки</span>
 </td>
 <td class="InsertData" width="100%">
   <img style="cursor: pointer;" src="buttongreen.jpg">
   <span class="Data-Hidden">Данные Правой кнопки</span>
 </td>
 </tr>
 <tr>
 <td height="50" valign="bottom" align="center" colspan="2"><input type="submit" name="кнопка" value="отправить" style="width: 60px; height: 18px; font-family: verdana; font-size: 8px;"></td>
 </tr>
 </table>
 </form>
<script type="text/javascript">
$('td.InsertData img').click(function() {
 var Inp = $(this).parents('table:first').find('td.FirstInp input');
 var ThisText = $(this).next('.Data-Hidden').text();
 Inp.val(ThisText);
});
</script>
 </body>
 </html>

Deff, пора уже добавлять в bb-теги run))