Dynamic Form Input with Select

Question

Trying my hand on dynamic form fields with itemz[].

I would like the form fields duplicate and have the select populate from the json object.

   <!-- DYNAMIX ITEMS-->
                               <div class='container1'> 
                                    <tr>
                                                        <td>
                                                            <select id='itemz' name='itemz[]' class='itemz'>    </select>

                                                        </td>   
                                                        <td>
                                                            <input class='form-control' type='text' name='count[]' value=''>
                                                            <input class='form-control' type='hidden' name='weight[]' value='<?= $items['weight']; ?> '>
                                                        </td>

                                                        <!-- ADD MORE -->
                                                        <td>
                                                            <button class='add_form_field'>Add More</button>
                                                        </td>

                                    </tr>
                             </div>

Here is the JS that is suppose to: 1) populate the drop down but it only populates the first box, I tried using a for each on the class but no luck.

2) Duplicates the dropdown, but instead of appending after it adds it before the first main div

      <script>
// POPULATING THE DROP DOWN
var obj={
Prod: 
<?php echo $products; ?>

};

  for(var i=0;i<obj.Prod.length;i++)
{
  var option=$('<option></option>').text(obj.Prod[i]['item']);
    $( ".itemz" ).append(option);
}

 // DUPLICATING THE DROP DOWNS         
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".container1"); //Fields wrapper
    var add_button      = $(".add_form_field"); //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("<tr><td><select id='itemz' name='itemz[]' class='itemz'></select></td>   <td><input class='form-control' type='text' name='count[]' value=''><input class='form-control' type='hidden' name='weight[]' value=''> </td> <td><a href='#' class='remove_field'>Remove</a> </td></tr></div>"); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

      </script>

Here is my JSON object:

Prod: 
[{"id":"1","item":"Piano","weight":"200"},{"id":"2","item":"Fridge","weight":"50"},{"id":"3","item":"Freezer","weight":"100"},{"id":"4","item":"Sofa","weight":"20"},{"id":"5","item":"Microwave","weight":"10"},{"id":"6","item":"Dining Table","weight":"40"},{"id":"7","item":"Coffee Table","weight":"20"}]   
};

mscdeveloper · Accepted Answer · 2018-05-01 16:53:37Z

var obj={
      Prod:[
      {
      	"id":"1",
      	"item":"Piano",
      	"weight":"200"
      },{
      	"id":"2",
      	"item":"Fridge",
      	"weight":"50"
      },{
      	"id":"3",
      	"item":"Freezer",
      	"weight":"100"
      },{
      	"id":"4",
      	"item":"Sofa",
      	"weight":"20"
      },{
      	"id":"5",
      	"item":"Microwave",
      	"weight":"10"
      },{
      	"id":"6",
      	"item":"Dining Table",
      	"weight":"40"
      },{
      	"id":"7",
      	"item":"Coffee Table",
      	"weight":"20"
      }
      ]
};



var max_fields= 10;
var curent_fields=0;

function add_options(_el){
	 for(var key in obj.Prod){
	 	 var text=obj.Prod[key].item;
	 	 var id=obj.Prod[key].id;
	 	 var weight=obj.Prod[key].weight;
	 	 var el =$('<option/>').text(text).val(id).attr('weight',weight);
	 	 $(_el).append(el);
	 }
}

function add_controls(){
    if(curent_fields>=max_fields){
    	alert('max feilds '+max_fields);
    	return false;
    }
    $('.container1').append('<tr><td><select name="itemz[]" class="itemz"></select></td><td><input class="form-control" type="text" name="count[]" value=""><input class="form-control" type="hidden" name="weight[]" value=""><a href="javascript:void(0)" class="remove_field">Remove</a></td><td>');
    add_options($('.itemz').last());
    $('.itemz').last().change(function(){
         select_change(this);
	});
	$('.itemz').last().parent().next().find('.remove_field').click(function(){
		  $(this).parent().parent().remove();
		  curent_fields--;
	});
	curent_fields++;
}

function select_change(_el){
	       var curent_weight=$(_el).children(':selected').attr('weight');
	       var curent_id=$(_el).children(':selected').val();
	       var curent_item=$(_el).children(':selected').text();
	         //set hidden feid value
	       $(_el).parent().next().find('[name^="weight"]').val(curent_weight);
	         //your more code...

	       console.log([curent_id,curent_weight,curent_item]);
}

function start(){
	add_options($('.itemz').last());
    $('.itemz').last().change(function(){
         select_change(this);
	});
}

start();

$('.add_form_field').click(function(){
	add_controls();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



                          <div class='container1'>
                                    <tr>
                                                        <td>
                                                            <select id='itemz' name='itemz[]' class='itemz'>    </select>

                                                        </td>
                                                        <td>
                                                            <input class='form-control' type='text' name='count[]' value=''>
                                                            <input class='form-control' type='hidden' name='weight[]' value=''>
                                                        </td>

                                                        <!-- ADD MORE -->
                                                        <td>
                                                            <button class='add_form_field'>Add More</button>
                                                        </td>

                                    </tr>
                             </div>

Thanks, it does exactly what I was expecting. Kudos! I wish I had more knowledge about each part though

Collectives™ on Stack Overflow

Dynamic Form Input with Select

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related