I've had a dig through some similar questions (it's not a unique problem) but many only deal with the current label or changing the label to match the selection.
My jQuery skills are pretty average: the functions are fine, but chaining them (and knowing the browser tricks...) is a bit trickier.
What I'm aiming for is:
- User selects "Email" or "Web" from the
<select>
list. - Based on this selection, we update the
<label>
of the<input>
below and the content of the<span>
below it (some help text, which will helpfully show "http://yourdomain.com/here" or "stuff@yourdomain.com")
Additionally:
- Change the
type
of the input field to/fromtype="email"
ortype="url"
. From what I can see, this might be troublesome due to IE compatibility? - The alternative may be to .show()/.hide() two inputs (one of each type) based on the selection instead.
JSFiddle: http://jsfiddle.net/ys9Cj/ (so far: I'm stuck at getting the fields to change. Like I said, not so great with JQuery!)
Here's the HTML:
<label for="method">How?</label>
<select id="method" name="method" required>
<option name="method" value="email">Email</option>
<option name="method" value="web">Web</option>
</select>
<span class="help-text">The web, or email?</span>
</label>
<label for="contact">Email Address</label> // We want to update this (but not strictly with the value from the <select>
<input type="email" name="contact" id="contact" value="" maxlength="255"> // and the type here, or otherwise .show() or .hide() this and show an alternative field with a different name=""
<span class="help-text">e.g. stuff@yourdomain.com</span> // and change the contents here