Issue with append() and variables
I'm a little new to JQuery and think I'm dealing with a fairly easy issue that I'm just overlooking.
Here is what I'm trying to do (in case someone has an overall better way to do it):
I have a single form that needs to act as multiple forms. Basically what I'm planning on doing is have a <select> box that the visitor can choose which form they need. When they select an option, it will add that section to the form. When the visitor submits the form, I don't want it to submit all of the different sections, just the one that they chose, so I figure that hiding with "display:none" is out. That is why I'm trying to append.
Here is what I have so far, then I'll explain one of the issues that I need help with...
JQuery
-
$(function() {
$("#interest").change(function() {
var kitchen = "<fieldset id='kitchen'><legend>Kitchen Renovation</legend><p>This is for the kitchen form.</p></fieldset>";
var bathroom = "<fieldset id='bathroom'><legend>Bathroom Renovation</legend><p>This is for the bathroom form.</p></fieldset>";
$('#addition').empty().append($(this).val());
});
});
HTML Form
-
<form name="estimate" id="estimate" action="#">
<fieldset>
<legend>Personal</legend>
Name:
<input type="text" size="30" />
<br />
Email:
<input type="text" size="30" />
</fieldset>
<fieldset>
<legend>What's Your Interest</legend>
<select id="interest">
<option value="kitchen">Kitchen Renovation</option>
<option value="bathroom">Bathroom Renovation</option>
</select>
</fieldset>
<div id="addition"> </div>
</form>
It is kind of working. One issue is that "$(this).val()" is not pulling the string from the variable above it. It is actually adding either "kitchen" or "bathroom" to the HTML. I need it to pull the info that is in the variable's string.
I really hope that this makes some sense.