Back To Programming / Scripting / Coding Forum

JavaScripts form help

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 29th, 2009, 2:31 pm

I have the following form:
Code: [ Select ]
<input type="text" name="name" id="name" /><br />
<input type="text" name="email" id="email" /><br />
<select name="reason" id="reason">
    <option value="quote">Get a Quote</option>
    <option value="gsupp">General Support</option>
    <option value="psupp">Project Support</option>
</select><br />
<textarea name="message" id="message" cols="50" rows="25"></textarea>
  1. <input type="text" name="name" id="name" /><br />
  2. <input type="text" name="email" id="email" /><br />
  3. <select name="reason" id="reason">
  4.     <option value="quote">Get a Quote</option>
  5.     <option value="gsupp">General Support</option>
  6.     <option value="psupp">Project Support</option>
  7. </select><br />
  8. <textarea name="message" id="message" cols="50" rows="25"></textarea>

What I need is to focus on that select form element and have some content show right underneath it that relates to the selected option... any help on this would be great.

This script looks like it does what I want, but the problem with that, I can't have name in a form's field... doesn't validate :lol: And I don't know how to fix that.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 29th, 2009, 2:31 pm

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post April 30th, 2009, 8:45 am

I would use jQuery. Its set to do that really easily. jQuery can call things the same way as css so you wouldn't need the name...

Simply create a div below the select. give it a style of display none and then in jQuery it would be something like
Code: [ Select ]
$('select#reason').focus(function() {
$('.divClassName').css('display','block');
}

$('select#reason').blur(function() {
$('.divClassName').css('display','none');
}
  1. $('select#reason').focus(function() {
  2. $('.divClassName').css('display','block');
  3. }
  5. $('select#reason').blur(function() {
  6. $('.divClassName').css('display','none');
  7. }
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post April 30th, 2009, 2:11 pm

Consider these bits of HTML.

Code: [ Select ]
<label class="optional mode1"><input .../> Mode 1</label>

<label class="optional mode2"><input .../> Mode 2</label>

<fieldset class="optional mode1">...</fieldset>
  1. <label class="optional mode1"><input .../> Mode 1</label>
  3. <label class="optional mode2"><input .../> Mode 2</label>
  5. <fieldset class="optional mode1">...</fieldset>


Now assume jQuery is available and consider this function.

Code: [ Select ]
function toggle_optional(mode)
{
$('.optional').css({display:'none'}).filter('.' + mode).css({display:''});
}
  1. function toggle_optional(mode)
  2. {
  3. $('.optional').css({display:'none'}).filter('.' + mode).css({display:''});
  4. }


I'm on my way out the door so I didn't check that, but you ought to gt the idea. :D
Strong with this one, the sudo is.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 30th, 2009, 2:22 pm

Thanks guys. I will check that once I get back from work today. Really appreciate it.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 118 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.