CODEWITHSUNDEEP
javascriptjqueryinputhtml-select
purple11111
purple11111

Reputation: 719

jquery get autonumbered input values and create select box from it

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.

Upvotes: 0

Views: 40

Answers (3)

oshell
oshell

Reputation: 9123

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);
    });
});

Upvotes: 1

epascarello
epascarello

Reputation: 207537

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>

Upvotes: 0

selami
selami

Reputation: 2498

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>");});
    });
});

Upvotes: 1

Related Questions