How do I get values out of specific selects and drop downs?

Question

My site is being used as a help desk. There are a couple of mandatory fields at the top that never change. Then there are two drop downs below. The first determines what options are in the second one, and the second one determines all the fields below that can be filled in. I have this all working. However if I add a button to the bottom, I don't know how to get all the texts out of the fields. The bottom fields show up using some switch statements and JavaScript making the div visible.

Here is an example div:

 <div id="third_form_three" class="third_hidden" style="display:none;">
       <label id="company_label" class="stdFormLabel">
           Which Company:
        </label>
        <select id="company_select">
           <option value="apple">Apple</option>
           <option value="pear">Pear</option>
           <option value="banana">Banana</option>
         </select><br>
          Sales Org: <input type="text" name="sales_org" required><br>
          Sales Office: <input type="text" name="office" required><br> 
          Sales Group: <input type="text" name="group" required><br> 
          Customer Group: <input type="text" name="customer" required><br> 
          Sales District, if applicable: <input type="text" name="dist"><br> 
          <!-- ABILITY TO ATTACH A DOCUMENT -->
          <telerik:RadUpload ID="upl_cfsAttachment_four_one" ControlObjectsVisibility="None" InitialFileInputsCount="1" InputSize="40" runat="server" MaxFileInputsCount="1" required />
    </div>

I believe my required's maybe wrong, but I'm not worried about that at the moment. Here is the start of my JavaScript

 function cfsButtonClick() {
            var array = [];
            var inputs = [];
            inputs.push(jQuery('.third_hidden:visible').contents().find('input'));
            inputs.each(function () {
                if (jQuery(this).val() != "")
                    array.push(jQuery(this).val());
            });
            alert(array[0]);
            alert(array.length);
        }

Any suggestions? I am just having a hard time getting all the input out without writing a monster switch statement with all unique id's. To put this in perspective my first drop down has 5 options and my second one has on average 6. So there is ~30 divs like my example and they are all mostly unique.

See [jQuery .each() with input elements](http://stackoverflow.com/q/16601326/218196) . Your code should be `var inputs = jQuery('.third_hidden:visible').find('input');` — Felix Kling, Jun 17 '14 at 17:11

score 0 · Accepted Answer · answered Jun 17 '14 at 17:14

0

This line:

inputs.push(jQuery('.third_hidden:visible').contents().find('input'));

should be:

inputs = jQuery('.third_hidden:visible input');

You don't need .contents(), and a selector returns a collection that you can iterate over with .each().

You can also simplify:

JQuery(this).val()

to:

this.value

answered Jun 17 '14 at 17:14

Barmar

741,623
53
500
612

debug: arguments [] length 0 callee cfsButtonClick() array [] length 0 inputs Object[input property value = "a" attribute value = "null", input property value = "b" attribute value = "null", input property value = "c" attribute value = "null", input property value = "d" attribute value = "null"] 0 input property value = "a" attribute value = "null" 1 input property value = "b" attribute value = "null" 2 input property value = "c" attribute value = "null" 3 input property value = "d" attribute value = "null" length 4 – user3113278 Jun 17 '14 at 17:24
Sorry it wouldn't let me type more. I made your suggestions and when I went to debug I got this by the alert lines – user3113278 Jun 17 '14 at 17:25
I'm not sure I understand. Are you getting an error from one of the `alert()` statements? – Barmar Jun 17 '14 at 17:30
No sorry. I'm pulling up debug to see what is in the array's. At the time of the alert statements the array called array has length 0 and inputs has 4 elements. Element 0 says in fire bug "input property value = "a" attribute value = "null". Each of the following 3 elements say the same but b,c,d – user3113278 Jun 17 '14 at 17:43
Those are what you typed into the input fields, right? I'm not sure why `array[]` isn't getting the values put into it. – Barmar Jun 17 '14 at 17:47
Can you make a jsfiddle that demonstrates the problem? – Barmar Jun 17 '14 at 17:48
Wow just realized dumb mistake leaving val instead of value. Sorry about that. Now that works for all my input fields. Would a similar thing work for the drop downs? Since some of the fields have drop downs? – user3113278 Jun 17 '14 at 17:48
Yes, the value of a drop down is the value of the selected option. – Barmar Jun 17 '14 at 17:49
Change the selector to `'.third_hidden:visible :input'`. The `:input` pseudo-selector matches all types of input fields: ``, ` – Barmar Jun 17 '14 at 17:50
Wow got that and that works perfect. I know this is only making it more complicated but I just realized that Can I grab the texts before the inputs too? Maybe in a parallel array that would have either the texts that corresponds to the input or the text that goes with the drop downs – user3113278 Jun 17 '14 at 17:59
To do that you need to use `.contents()`, since that includes text nodes. I'm not sure of the exact coding. Try working with it, and ask a new question if you can't get it to work. – Barmar Jun 17 '14 at 18:04
Awesome will do thanks a bunch! I can't give you +1 because of my lack of rep but thank you so much! – user3113278 Jun 17 '14 at 18:06

How do I get values out of specific selects and drop downs?

1 Answers1