Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Раскрытие Div`a при клике на форму


Автор: Just123 4.1.2010, 20:39
Здравствуйте, помогите пожалуйста, как сделать, есть форма:

Код

<form action="index.php?action=registration_complete" method="POST" onsubmit="return SendForm();">
<table>
<tr>
<td align="right"><label for="account">Название аккаунта:</label></td>
<td><input type="text" id="account" size="30" name="account"></td>
<tr>
<td align="right"><label for="password">Пароль:</label></td>
<td><input type="password" id="password" size="30" name="password"></td>
<tr>
<td align="right"><label for="repassword">Подтверждение пароля:</label></td>
<td><input type="password" id="repassword" size="30" name="repassword"></td>
<tr>
<td></td>
<td>КАПТЧА</td>
<tr>
<td align="right"><label for="captcha">Защитный код:</label></td>
<td><input type="text" id="captcha" size="30" name="captcha"></td>
<tr>
<td align="right"></td>
<td> <input type="submit" value="Зарегистрироваться"></td>
</table>

</form>


Как сделать так, чтобы при клике на какой-нибудь <input type="text"....>,  раскрывался div с подсказкой? :(

Заранее премного благодарен.

Автор: patap 4.1.2010, 21:15
как вариант можно так.
Код

<script type="text/javascript">
  function showHelp(elemId) {
    document.getElementById(elemId).style.display = 'inline';
  }
  
  function hideHelp(elemId) {
    document.getElementById(elemId).style.display = 'none';
  }
</script>

<form action="index.php?action=registration_complete" method="POST" onsubmit="return SendForm();">
<table border="0">
<tr>
<td align="right"><label for="account">Название аккаунта:</label></td>
<td><input type="text" id="account" size="30" name="account" onfocus="showHelp('help_account')" onblur="hideHelp('help_account')"></td>
<td id="help_account" style="display:none">Help account</td>
<tr>
<td align="right"><label for="password">Пароль:</label></td>
<td><input type="password" id="password" size="30" name="password" onfocus="showHelp('help_pwd')" onblur="hideHelp('help_pwd')"></td>
<td id="help_pwd" style="display:none">Help password</td>
<tr>
<td align="right"><label for="repassword">Подтверждение пароля:</label></td>
<td><input type="password" id="repassword" size="30" name="repassword" onfocus="showHelp('help_repwd')" onblur="hideHelp('help_repwd')"></td>
<td id="help_repwd" style="display:none">Help re-password</td>
<tr>
<td></td>
<td>КАПТЧА</td>
<tr>
<td align="right"><label for="captcha">Защитный код:</label></td>
<td><input type="text" id="captcha" size="30" name="captcha" onfocus="showHelp('help_captcha')" onblur="hideHelp('help_captcha')"></td>
<td id="help_captcha" style="display:none">Help captcha</td>
<tr>
<td align="right"></td>
<td> <input type="submit" value="Зарегистрироваться"></td>
</table>

</form>


 но если не подойдет, то неплохо было бы узнать как ты хочешь это видеть

Автор: Just123 4.1.2010, 21:34
patap, Великолепно! Это именно то, что мне требовалось! Большое вам спасибо!  smile 

P.S. Ммм.. немного дизайн сбивается когда текст подсказки длинный, а можно как-нибудь сделать, чтобы сообщение появлялось в фиксированном диве? Или в таком случаи, нужно сделать 4 одинаковых дива и при клике показывать нужный?

Автор: neokortex 4.1.2010, 22:38
тебе уже в рот положили. стили/верстку меняй.

Автор: patap 4.1.2010, 22:47
ну или так, может есть и минусы в таком методе, но вроде работает ))
Код

<script type="text/javascript">
  function showHelp(elemId) {
    var obj = document.getElementById(elemId);
    var cord = absPosition(obj);
    var help = document.getElementById('help');
    var content = '';
    var offsetX = 220;
    
    switch (elemId) {
      case 'account': content = 'Account help'; break;
      case 'password': content = 'Password help'; break;
      case 'repassword': content = 'Repassword help'; break;
      case 'captcha': content = 'Captcha help'; break;
    }
    help.innerHTML = content;
    help.style.left = cord.x + offsetX + 'px';
    help.style.top = cord.y + 'px';
    help.style.display = 'block';
  }
  
  function hideHelp(elemId) {
    document.getElementById('help').style.display = 'none';
  }
  
  function absPosition(obj) { 
    var x = y = 0; 
    while (obj) { 
      x += obj.offsetLeft; 
      y += obj.offsetTop; 
      obj = obj.offsetParent; 
    } 
    return {x:x, y:y}; 
  }
</script>

<div id="help" style="display:none; position:absolute;"></div>

<form action="index.php?action=registration_complete" method="POST" onsubmit="return SendForm();">
<table border="0">
<tr>
<td align="right"><label for="account">Название аккаунта:</label></td>
<td><input type="text" id="account" size="30" name="account" onfocus="showHelp(this.id)" onblur="hideHelp(this.id)"></td>
<tr>
<td align="right"><label for="password">Пароль:</label></td>
<td><input type="password" id="password" size="30" name="password" onfocus="showHelp(this.id)" onblur="hideHelp(this.id)"></td>
<tr>
<td align="right"><label for="repassword">Подтверждение пароля:</label></td>
<td><input type="password" id="repassword" size="30" name="repassword" onfocus="showHelp(this.id)" onblur="hideHelp(this.id)"></td>
<tr>
<td></td>
<td>КАПТЧА</td>
<tr>
<td align="right"><label for="captcha">Защитный код:</label></td>
<td><input type="text" id="captcha" size="30" name="captcha" onfocus="showHelp(this.id)" onblur="hideHelp(this.id)"></td>
<tr>
<td align="right"></td>
<td> <input type="submit" value="Зарегистрироваться"></td>
</table>

</form>

Автор: Just123 5.1.2010, 00:20
patap, Спасибо большое!   smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)