jquery get autonumbered input values and create select box from it

Question

This is part of a bigger project but want to keep it simple for here so I created a fiddle with a good starting position: http://jsfiddle.net/F7aKG/214/

We got a html form with literally hundreds of inputs and we only need to get the values from a few of those to create the selectbox. So we can't get all the inputs into the form.

Lets say we have this code

<input id="jform_params__characters__characters0__character_name" value="first"><br>
<input id="jform_params__characters__characters1__character_name" value="second"><br>
<input id="jform_params__characters__characters2__character_name" value="third"><br>
<input id="jform_params__characters__characters3__character_name" value="fourth"><br>
<input id="jform_params__characters__characters4__character_name" value="fifth"><br>
<button>submit</button>

Normally the values won't be set in the form but did it now as it became tideous to fill it in every time i wanted to test the form. As you can see the only thing changing is the number into the id.

so far to test grabbing the values i got this:

$(function(){
    $('button').click(function(){
        var values = $( "input[id^='jform_params__characters__characters']" ).map( function(){return $(this).val(); }).get();
        alert(values);
    });
});

the question

Right now when clicked the alert gives me first,second,third,fourth,fifth now how can I change this into the options for the selectbox.

I appreciate any tips I can get but if you are willing then I would love to have a complete code example. It would be absolutely great if the above fiddle could be changed with a working selectbox.

Thanks to everyone for reading and helping.

So you want to create a select element out of the given input fields? — oshell
– oshell, Commented Oct 26, 2016 at 13:29
Do you want to create a <select> element with input values? <select><option>first</option><option>second</option>...</select> — selami
– selami, Commented Oct 26, 2016 at 13:29
@HorstJahns Yes indeed. But there will be more inputs then the five given. Not sure if it is useful to mention that. — purple11111
– purple11111, Commented Oct 26, 2016 at 13:35

oshell · Accepted Answer · 2016-10-26 13:39:38Z

1

jsfiddle

$(function(){
    $('button').click(function(){
        var values = $( "input[id^='jform_params__characters__characters']" ).map( function(){return $(this).val(); }).get();
        var optionsPlaceholder = '###OPTIONS###';
        var optionPlaceholder = '###OPTION###';
        var select = '<select>' + optionsPlaceholder + '</select>';
        var option = '<option>' + optionPlaceholder + '</option>';
        var options = '';

        for (var i = 0; i < values.length; i++) {
            var currentOption = option.replace(optionPlaceholder, values[i]);
            options += currentOption;
        }

        var selectBox = select.replace(optionsPlaceholder, options);
        var $select = $(selectBox);
        $('#selectBox').html($select);
        alert(values);
    });
});

answered Oct 26, 2016 at 13:39

oshell

9,1511 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

purple11111 Over a year ago

This one works really nice I appreciate the fiddle. Now I need to decide which one I am going to accept. Thank you very much for this answer. I will cast my accepted answer vote asap.

purple11111 Over a year ago

I am sorry I messed up my question badly now I am putting it into the project I see that I left out vital information. I updated the fiddle with this information. Sadly the fiddle does not work as it now has a part php into the javascript area. I did it this way to show the entire files content exactly how it is. jsfiddle.net/F7aKG/220 is the updated fiddle. I was hoping you could show me how to make it repeatable as it is now it only shows up once. So I think that the .html needs to be into a foreach but not sure how to do that. Thank you for the initial answer and any extra help.

purple11111 Over a year ago

So far jsfiddle.net/F7aKG/221 sadly not working but going to keep going :-) it still shows up only once.

oshell Over a year ago

if you want to get html code from server side you have to use ajax first and setup your select box within the callback

purple11111 Over a year ago

I have in total 6 times the #selectBox divs on the page but only in the first div with that id it will load the selectbox. So I just need them to be on all the divs. If it works once then it surely most be possible to display it more often. Maybe I should raise a new question that is more precise? what do you think? PS: Thanks for helping!

|

selami · Accepted Answer · 2016-10-26 13:30:40Z

1

If you wand to create a select element, try the following.

$(function(){
    $('button').click(function(){
        var values = $( "input[id^='jform_params__characters__characters']" ).map( function(){return $(this).val(); }).get();
        //alert(values);
        $("button").after("<select></select>");
         $.each(values, function (x, y) {$("select").append("<option>" + y + "</option>");});
    });
});

answered Oct 26, 2016 at 13:30

selami

2,4981 gold badge21 silver badges26 bronze badges

2 Comments

purple11111 Over a year ago

I just tried it and it works nicely. I changed it into the Fiddle to work on doc. ready and it is brilliant. If I do it now on keyup event the selectbox becomes dynamic. Thank you very much for this answer. jsfiddle.net/F7aKG/215 I am going to test the other codes on the page before I decide to accept.

purple11111 Over a year ago

I tried your code into the project but had a hard time to adapt it to it and couldn't get it to work. Now this is totally my fault and does not mean at all that your code is wrong as it clearly is not. I received better results when using the code from Horst and therefore I choose his one as the accepted answer. Nevertheless I want to thank you very much for helping me!

epascarello · Accepted Answer · 2016-10-26 13:33:19Z

0

You can use your map function and add option tags, than just append that to a select.

var inps = $("input[id^='jform_params__characters__characters']");
var opts = inps.map(function() {
  return "<option>" + $(this).val() + "</option>";
}).get();
$("<select/>").append(opts).insertBefore(inps.eq(0));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="jform_params__characters__characters0__character_name" value="first">
<br>
<input id="jform_params__characters__characters1__character_name" value="second">
<br>
<input id="jform_params__characters__characters2__character_name" value="third">
<br>
<input id="jform_params__characters__characters3__character_name" value="fourth">
<br>
<input id="jform_params__characters__characters4__character_name" value="fifth">
<br>
<button>submit</button>

answered Oct 26, 2016 at 13:33

epascarello

208k20 gold badges206 silver badges246 bronze badges

3 Comments

purple11111 Over a year ago

While in your code snippit it shows the selectbox nicely with all the values. Whenever I change a input and press submit it is not reflected into the selectbox. I also tried it into my own fiddle but in there it does not work at all. jsfiddle.net/F7aKG/217 I am not sure why not but want to thank you for helping me anyhow! It is highly appreciated.

epascarello Over a year ago

Well because it just does it when the page loads... If you want it when things change, than you put the code inside a method and trigger onchange.

purple11111 Over a year ago

Ahhh that explains a lot. But when I post your code in the onclick shouldn't it work then also. Maybe you can show it by adapting the fiddle from above as I have no clue what I do wrong with your code.

Collectives™ on Stack Overflow

jquery get autonumbered input values and create select box from it

the question

3 Answers 3

7 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

the question

3 Answers 3

7 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related