JavaScripts form help

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8485
  • Loc: USA

Post 3+ Months Ago

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.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1825
  • Loc: In the Great White North

Post 3+ Months Ago

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() {

$('select#reason').blur(function() {
  1. $('select#reason').focus(function() {
  2. $('.divClassName').css('display','block');
  3. }
  4. $('select#reason').blur(function() {
  5. $('.divClassName').css('display','none');
  6. }
  • joebert
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • Loc: Florida

Post 3+ Months Ago

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>
  2. <label class="optional mode2"><input .../> Mode 2</label>
  3. <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
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8485
  • Loc: USA

Post 3+ Months Ago

Thanks guys. I will check that once I get back from work today. Really appreciate it.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 32 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

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.