Looping through nested form elements
Hello everyone,
I've got a problem with my form and I didn't find any solution yet. The code above is supposed to loop through form elements (select, input, and textarea) that are located in <div id="step-1">. It is supposed to display "title" only, because it is inside <div id="step-1">, but it also loops through elements that are located inside <div id="step-2"> and <div id="step-3"> instead. I need your help. Here is the code:
- <form class="form-horizontal">
- <fieldset>
- <!-- Step 1 -->
- <div id="step-1">
- <div class="control-block">
- <label class="control-label">Title <span class="required">*</span></label>
- <div class="controls">
- <input type="text" name="title" id="title" class="input-xxlarge" />
- </div>
- </div>
- </div>
- <!-- Step 2 -->
- <div id="step-2">
- <div class="control-block">
- <label class="control-label">URL <span class="required">*</span></label>
- <div class="controls">
- <input type="text" name="url" id="url" class="input-xxlarge" />
- </div>
- </div>
- </div>
- <!-- Step 3 -->
- <div id="step-3">
- <div class="control-block">
- <label class="control-label">Address <span class="required">*</span></label>
- <div class="controls">
- <input type="text" name="address" id="address" class="input-xxlarge" />
- </div>
- </div>
- </div>
- <a href="#" class="btn">Validate!</a>
- </fieldset>
- </form>
- <script>
- $(".btn").on("click", function()
- {
- $("div#step-1>select,input,textarea").each(function()
- {
- alert($(this).attr("id"));
- });
- });
- </script>
I have created this sample on jsfiddle to demonstrate the problem:
http://jsfiddle.net/alex_raven/Vmxkt/3/