Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138134

Capture Array Values from Dynamic input Fields using Javascript

$
0
0

I'm trying to get the value from dynamic drop-down list in my form, but my code isn't working.

View.php

<div class="input_fields_wrap">
    <input type="button" class="btn btn-info add_field_button" value="Tambah Cara Pengolahan" /> <br /><br />
</div>
<div class="service-container" data-service=
    "<div class='form-group'>
        <select class='form-control' style='width:88%; display:inline-block; margin-right:10px;' id='cara_pengolahan[]' required>
            <option value=''>No Selected</option>
            <?php foreach($pengolahan as $row):?>
            <option value='<?php echo $row->id_pengolahan;?>'><?php echo $row->cara_pengolahan;?></option>
            <?php endforeach;?>></div>
        </select>
        <button class='btn btn-danger closebtn remove_field'><b>&times</b></button>
    </div>"</div>

Javascript.js

$('.service-container').each(function() {
        var container = $(this);
        var service = container.data('service');
        // Service variable now contains the value of html + php variable;  

        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append(service);
            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
});
var cara_pengolahan = document.forms[0].elements["cara_pengolahan[]"];
for (var i=0; i<cara_pengolahan.length; i++) {
    console.log(cara_pengolahan[i].value);
}

When there is one dynamic drop-down list, it returns all the array values of it. But what I want is to capture the value of that drop-down list.

Result

Debug

And when there are more than one dynamic drop-down lists, it returns the correct value that I want.

Result

Debug

How to check if there is a dynamic drop-down list or not? And how to capture the value of all the dynamic drop-down lists? Thanks in advance.


Viewing all articles
Browse latest Browse all 138134

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>