Wednesday 3 August 2016

Dynamic Box with JQuery

<script src="jquery-1.10.2.min.js" type="text/javascript" /></script>
<script>
$(document).ready(function(){
$(".addCF").click(function(){
$("#customFields").append('<tr valign="top"><td><select class="select" name="select[]"><option value="">-select-</option><option value="a">a</option><option value="b">b</option><option value="c">c</option></select> &nbsp; <input type="text" class="selval" name="selval[]" readonly /> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
});

});

$(document).on('change','.select',function() {
var selval = $(this).val();
$(this).parent('td').find('.selval').val(selval);
//alert(selval);
});
</script>



    <table class="form-table" id="customFields">
<tr valign="top">

<td>
<select class="select" name="select[]">
    <option value="">-select-</option><option value="a">a</option><option value="b">b</option><option value="c">c</option></select> &nbsp; <input type="text" class="selval" name="selval[]" readonly /> &nbsp;
<a href="javascript:void(0);" class="addCF">Add</a>
</td>
</tr>
</table>

No comments:

Post a Comment

Setup VueJS in Laravel

Setup VueJS in Laravel 1. You will need to install javascript dependencies by running the following command on your terminal.      npm i...