Disable same select option on dynamically added select boxes

Disable same select option on dynamically added select boxes - javascript

I have multiple dynamically added select boxes. Options are also dynamically appended. Now what I want is if one of the select boxes with the value 'Lead' is selected now when the user adds another select box then the value with 'Lead' needs to be disabled as there should not be two 'Lead'. Please suggest to me how can I achieve this goal.
<div class="form-group">
<label>Partner Organisation (If there are partners)</label>
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<label for="tags">Organisation </label>
<select class="form-control" name="stg_partner_id[]">
<option value="">Select</option>
#foreach($partnerorganisations as $pg)
<option value="{{ $pg->id }}">{{ $pg->partner_organisation }}</option>
#endforeach
</select>
</td>
<td>
<label for="tags">Role </label>
<select class="form-control" name="role[]">
<option value="">Select</option>
#foreach($roles as $role)
<option value="{{ $role }}">{{ $role }}</option>
#endforeach
</select>
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">+ </button>
</td>
</tr>
</table>
</div>
Now, my jquery looks like this.
var data = [<?php echo '"'.implode('","', $roles).'"' ?>];
var partnerdata = #json($partnerorganisations);
// console.log(app);
$(document).ready(function(){
var i=0;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><select class="form-control" name="stg_partner_id[]" id="partnerOption'+i+'"><option value="">Select</option></select></td><td><select class="form-control" name="role[]" id="newOption'+i+'"><option value="">Select</option></select></td> <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>');
// console.log(data);
$.each(data, function(key, value) {
$('#newOption'+i+'')
.append($("<option></option>")
.attr("value", value)
.text(value));
});
$.each(partnerdata, function(key, value) {
$("select option:contains('value " + value.id + "')").prop("disabled","disabled");
$('#partnerOption'+i+'')
.append($("<option></option>")
.attr("value", value.id)
.text(value.partner_organisation));
});
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});

As there will be mutliple select-boxes you can use .each loop to iterate through all select-boxes and then use that value to add disabled option from other select-box.
Demo Code :
$(document).ready(function() {
var i = 0;
$('#add').click(function() {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><select class="form-control" name="stg_partner_id[]" id="partnerOption' + i + '"><option value="">Select</option><option value="1">A</option><option value="2">B</option><option value="3">C</option></select></td><td><select class="form-control" name="role[]" id="newOption' + i + '"><option value="">Select</option><option value="1">A1</option> <option value="2">B2</option><option value="3">C2</option></select></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></th></tr>');
//your other codes
check_now(); //call to disable
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$(document).on('change', 'select[name*=stg_partner_id]', function() {
check_now() //on change call as well
})
function check_now() {
//remove disable from all options
$("select[name*=stg_partner_id] option").prop('disabled', false)
//loop through select box
$("select[name*=stg_partner_id]").each(function() {
var values = $(this).val()
if (values != "") {
//find option where value matches disable them
$("select[name*=stg_partner_id]").not(this).find("option[value=" + values + "]").prop('disabled', true);
}
})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="form-group">
<label>Partner Organisation (If there are partners)</label>
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<label for="tags">Organisation </label>
<select class="form-control" name="stg_partner_id[]">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</td>
<td>
<label for="tags">Role </label>
<select class="form-control" name="role[]">
<option value="">Select</option>
<option value="1">A1</option>
<option value="2">B2</option>
<option value="3">C2</option>
</select>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">+
</button></td>
</tr>
</table>
</div>

Related

How to get dynamic id from a class name?

I am creating dynamic row with jquery. Now each row has different ID and common class name. How can I get the different id from same class name?
https://imgur.com/a/JCEhSna
See in the above picture. While I will select an option, then I want the ID name.
My Try:
HTML:
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->productName }}</option>
#endforeach
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="{{ $product->id }}">{{ $product->productName }}</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $('.invoiceProducts').attr('id');
console.log("Select ID: " + idOfSelect);
});
Output:
Select ID: undefined

You can find the id using this.closest('tr').id in the change event
var i =0;
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="1">1</option><option value="2">2</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = this.closest('tr').id
console.log("Select ID: " + idOfSelect);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="invoice-table">
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
</table>

I think this could help
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});
The trick is select ID of changed element, right?

If you have <select> element, you should have <option> elements also as a children.
Just set "value" attribute of these children.
<select id="mySelect">
<option id="1" value="1"> A <option>
<option id="2" value="2"> B <option>
<option id="3" value="3"> C <option>
</select>
$("#mySelect").change(function(){
var selectedOption = $(this). children("option:selected").val();
console.log(selectedOption)
})

You should try with "document" It may help you Like:
$(document).on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});

When I change dropdown value get nearest input textbox value

I have to display list of values in table format. I pass id in input textbox value future I will hide it, and my question is how to get textbox value when I changed the dropdown value.When I changed dropdown it's will update on particular id. Here I have attached my screenshot. Thanks in Advance. i have tried this below code but its will take first id only.
<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id" value="<?php echo $row['company_id']; ?>">
</td>
<script>
$(document).ready(function() {
var type_val;
$('#type').on('change', function() {
var fav = $('#comp_id').val();
alert(fav);
type_val = $('#type').val();
console.log(type_val);
});
});
</script>
expected output

<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id" value="<?php echo $row['company_id']; ?>">
</td>
<script>
$(document).ready(function() {
var type_val;
$('#type').on('change', function() {
// find parent tr then find #comp_id inside it
var fav = $(this).closest('tr').find('#comp_id').val();
alert(fav);
type_val = $('#type').val();
console.log(type_val);
});
</script>

You can use parent and next like this.
$(document).ready(function() {
$('#type').on('change', function() {
$(this).parent().next('td').find('input').val()
});
});
Note: Don't use repeated ID. Its a rule violation. Use class instead
of id to find input.Its take only 1st id because duplicate id is not allowed.
Working snippet.
$('#type').on('change', function() {
console.log($(this).parent().next('td').find('input').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" class="comp_class" value="Your Value From Php">
</td>
</tr>
</table>

Never use multiple id's of same name on single page.
Generate your id's dynamically like type1, type2 ... and comp1, comp2 ...
<table>
<tr>
<td>
<select name="type1" id="type1" class="form-control sel">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id1" value="1">
</td>
</tr>
<tr>
<td>
<select name="type2" id="type2" class="form-control sel">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id2" value="2">
</td>
</tr>
</table>
<script>
$('.sel').change(function(){
var select_id = $(this).attr('id');
var offset = select_id.substring(4);
var type = $(this).val();
alert(type);
var comp = $('#comp_id'+offset).val();
alert(comp);
});
</script>
Here is jsfiddle link:
jsFiddle

How to insert the dynamic multiple row values into a database

<script src=" https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<script>
var i=0;
currentRow = null;
$("button#savebutton").click(function(){
var cat = $("#cat-list").val();
var display = $("#displayname").val();
var subcat = $("#subcat-list").val();
var order = $("#privilage").val();
i++;
var new_row = "<tr id='row"+i+"' class='info'><td class='cat'>" + cat + "</td><td class='display'>" + display + "</td><td class='type'>" + subcat +"</td><td>"+order +"</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'>Edit</a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''>Delete</a></span></tr>";
if(currentRow){
$("table tbody").find($(currentRow)).replaceWith(new_row);
currentRow = null;
}
else{
$("table tbody").append(new_row);
}
});
$(document).on('click', 'span.deleterow', function () {
$(this).parents('tr').remove();
return false;
});
$(document).on('click', 'span.editrow', function () {
currentRow= $(this).parents('tr');
});
</script>
<script>
$(document).ready(function(){
$("#secondbtn").click (function(){
var category = $("#cat-list").val();
var display = $("#displayname").val();
var subcat = $("#subcat-list").val();
var privilage = $("#privilage").val();
alert(category);
$.ajax({
type:"POST",
url:"query1.php",
data:{display:display_name,category:category,subcat:pagename,privilage:privilage},
success:function(data){
alert("successfully updated");
}
});
});
});
</script>
<html>
<body>
<form method="POST" action="">
<label>Select your Category:</label>
<input type="text" id="cat-list"/>
</br>
<label> Display Name:</label>
<input type="text" name="display_name" id="displayname" d />
</div>
<label> Select your Subcategory:</label>
<input type="text" id="subcat-list" >
<label>Set Order</label>
<select name="privilage" id="privilage" required>
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
<div class="col-md-12">
<div class = "panel1">
<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="savebutton" onclick="getFirstClicked()" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
</div>
</div>
</form>
<form class="form-horizontal" role="form" id="chargestableForm">
<div class="col-md-12">
<table id="pTable" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
<thead style="background-color:#CCE5FF">
<tr>
<th>Category</th>
<th>DisplayName</th>
<th>Subcategory</th>
<th>Order</th>
<th colspan=2>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class = "panel2">
<button type="submit" name="import" id="secondbtn" > Import Database</button>
</div>
</div>
</form>
Context:In this code there is an html form,when adding the details in the form and clicks the add button there is a table row is created which is editable and delete. Then we can add the number of rows and that rows are added upto the table.I want to enter these table row values to a database when clicking the import button.

Increase index of a form's input field's name attribute in a dynamic form

Suppose I have this form with indexed input fields username and level:
<form>
<table>
<tr class="trToClone">
<td>
<label>Username:</label>
<input type="text" name="username[0]" />
</td>
<td>
<label>Level:</label>
<select name="level[0]">
<option value="">---</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</td>
<td><input type="button" class="addField" value="Add" /></td>
</tr>
</table>
</form>
The row can be repeated using this jQuery:
$("input.addField").on('click', function() {
var $tr = $(this).closest('.trToClone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
});
Now for every subsequent row I add, I want to increase the indices of the name attribute (i.e. username[1],level[1]; username[2],level[2]; and so on...). How can I do this? I've looked for possible solutions, but to no avail.

Specify new index with $('.trToClone').length, modify it on each element with name attribute with jQuery .attr() method:
$("input.addField").on('click', function() {
var $tr = $(this).closest('.trToClone');
var $clone = $tr.clone(true, true);
var $names = $clone.find('[name]');
var trIndex = $('.trToClone').length;
$names.each(function(index, element) {
var newName = $(element).attr('name').replace(/[0-9]/g, trIndex);
$(element).attr('name', newName);
console.log($(element).attr('name'));
});
$clone.find(':text').val('');
$tr.after($clone);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr class="trToClone">
<td>
<label>Username:</label>
<input type="text" name="username[0]" />
</td>
<td>
<label>Level:</label>
<select name="level[0]">
<option value="">---</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</td>
<td><input type="button" class="addField" value="Add" /></td>
</tr>
</table>
</form>

UPDATE: changing name attributes dynamically.
you can use a counter for counting your clicks! You have to move the "add" click button out of the table row.
HTML:
<form>
<input type="button" class="addField" value="Add" />
<table>
<tr class="trToClone">
<td>
<label>Username:</label>
<input type="text" name="username[0]" />
</td>
<td>
<label>Level:</label>
<select name="level[0]">
<option value="">---</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</td>
<td></td>
</tr>
</table>
</form>
JS:
var counter = 0;
$("input.addField").on('click', function() {
counter++;
var $tr = $('.trToClone:eq(0)');
var $clone = $tr.clone();
var newTextName = $clone.find(':text').attr('name').replace(/\[(\d)+\]/,'[+ counter +']');
$clone.find(':text').attr('name',newTextName);
$clone.find('.dropdown').attr('name','level['+ counter + ']');
$tr.parent().append($clone);
});
check out this fiddle: https://jsfiddle.net/gknrfw1g/2/

$('.addField').click(function(){
var count = $('#btnIncrease').val();
var $tr = $(this).closest('.trToClone');
var $clone = $tr.clone();
count++;
$('#btnIncrease').val(count);
$clone.find(':text').val('');
$clone.find(':text').attr('name', 'username[' + count + ']');
$tr.after($clone);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="trToClone">
<td>
<label>Username:</label>
<input type="text" name="username[0]" />
</td>
<td>
<label>Level:</label>
<select name="level[0]">
<option value="">---</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</td>
<td><input type="button" class="addField" value="Add" /></td>
</tr>
</table>
<input type="hidden" id="btnIncrease" value="0" />
This would work for you.

For adding the name attribute you first need to find the index of current row and then you can add 1 to the index and again update the name attribute for both text and select list. Try with the code below-
Note- You should also hide the add button from previous row and bind the click function again for the newly cloned row.
$("input.addField").on('click', function() {
var $tr = $(this).closest('.trToClone');
var $clone = $tr.clone();
var lastIndexName= $clone.find(':text').attr("name").split('[');
var lastIndex=parseInt(lastIndexName[1].substring(0,1));
var updatedNameValue="username["+(lastIndex+1)+"]";
$clone.find(':text').attr("name",updatedNameValue);
$clone.find(':text').val('');
$clone.find('select').attr("name","level["+(lastIndex+1)+"]")
$tr.after($clone);
});

Show/Hide input field inside appended element

I have the following JS/jQuery code to append rows to an existing table. Upon appending, I want to show the input field only when "select" or "radio" is selected as the option type.
When I add multiple rows, the input field appearance/disappearance is dependent upon the first added row. I want it to show/hide only on the row(s) where any of the two options are selected.
Hope that made sense. Any suggestion would be helpful. Thanks!
HTML:
<table id="tbl-formfields" class="table vertical-align table-condensed" >
<thead>
<tr>
<th>Input Type</th>
<th>Make Required</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="tr-formField">
<td>
<div>
<select name="formOptionType[]" id="formOptionType">
<option value="">-------------------------------------</option>
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="select">Select Options (Dropdown)</option>
<option value="radio">Radio Buttons</option>
<option value="checkbox">Checkbox</option>
</select>
</div>
<div id="block-optionsInput" style="display:none">
<label>Options:</label><br>
<input id="options" type="text" name="fieldOptions[]" data-role="tagsinput"/>
</div>
</td>
<td>
<label><input type="checkbox" name="fieldRequired[]"/> Required</label>
</td>
<td></td>
</tr>
</tbody>
</table>
jQuery:
//****Repeat form field block****
var repeatBlock = "#tbody";
var repeatText = '<tr class="trRepeat">\n\
<td>\n\
<select class="optType" name="formOptionType[]">\n\
<option value="">-------------------------------------</option>\n\
<option value="text">Text</option>\n\
<option value="textarea">Textarea</option>\n\
<option value="select">Select Options (Dropdown)</option>\n\
<option value="radio">Radio Buttons</option>\n\
<option value="checkbox">Checkbox</option>\n\
</select>\n\
<div class="optBlock" style="display:none">\n\
<label>Options:</label><br>\n\
<input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput"/>\n\
</div>\n\
</td>\n\
<td><label><input type="checkbox" name="fieldRequired[]"/> Required</label></td>\n\
<td><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
<span class="glyphicon glyphicon-remove"></span></a>\n\
</td></tr>';
$("#btn-addfield").click(function (e) {
e.preventDefault();
$(repeatBlock).append(repeatText);
});
$(repeatBlock).on('click', '.removeField', function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
//****Show input field when dropdown/radio is selected****
$(repeatBlock).on('change', $(".optType").val(), function (e) {
e.preventDefault();
if ($(this).find(".optType").val() === "radio" || $(this).find(".optType").val() === "select") {
$(this).find(".optBlock").show();
$(".optInput").tagsinput('refresh');
} else {
$(this).find(".optBlock").hide();
}
});

You are passing $(".optType").val() instead of selector, In the event handler test the selected value and use DOM relationship to traverse and target desired element.
$(repeatBlock).on('change', '.optType', function (e) {
e.preventDefault();
var val = $(this).val()
if (val === "radio" || val === "select") {
$(this).closest('tr').find(".optBlock").show();
$(this).closest('tr').find(".optBlock").find(".optInput").tagsinput('refresh');
} else {
$(this).closest('tr').find(".optBlock").hide();
}
});
//****Repeat form field block****
var repeatBlock = "#tbody";
var repeatText = '<tr class="trRepeat">\n\
<td>\n\
<select class="optType" name="formOptionType[]">\n\
<option value="">-------------------------------------</option>\n\
<option value="text">Text</option>\n\
<option value="textarea">Textarea</option>\n\
<option value="select">Select Options (Dropdown)</option>\n\
<option value="radio">Radio Buttons</option>\n\
<option value="checkbox">Checkbox</option>\n\
</select>\n\
<div class="optBlock" style="display:none">\n\
<label>Options:</label><br>\n\
<input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput"/>\n\
</div>\n\
</td>\n\
<td><label><input type="checkbox" name="fieldRequired[]"/> Required</label></td>\n\
<td><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
<span class="glyphicon glyphicon-remove"></span></a>\n\
</td></tr>';
$("#btn-addfield").click(function(e) {
e.preventDefault();
$(repeatBlock).append(repeatText);
});
$(repeatBlock).on('click', '.removeField', function(e) {
e.preventDefault();
$(this).parent().parent().remove();
});
$(repeatBlock).on('change', '.optType', function(e) {
e.preventDefault();
var val = $(this).val()
if (val === "radio" || val === "select") {
$(this).closest('tr').find(".optBlock").show();
//$(this).closest('tr').find(".optBlock").find(".optInput").tagsinput('refresh');
} else {
$(this).closest('tr').find(".optBlock").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-addfield">Addfield</button>
<table>
<tbody id="tbody"></tbody>
</table>

Wrap all your input in td inside a otpBlock
<tr class="trRepeat">
<td>
<select class="optType" name="formOptionType[]">
<option value="">-------------------------------------</option>
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="select">Select Options (Dropdown)</option>
<option value="radio">Radio Buttons</option>
<option value="checkbox">Checkbox</option>
</select>
<div class="optBlock" style="display:none">
<label>Options:</label><br>
<input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput" />
</div>
</td>
<td>
<div class="optBlock" style="display:none">
<label><input type="checkbox" name="fieldRequired[]"/> Required</label>
</div>
</td>
<td>
<div>
<a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">
<span class="glyphicon glyphicon-remove"></span>Remove</a>
</div>
</td>
</tr>
Use the following JS
//****Show input field when dropdown/radio is selected****
$(repeatBlock).on('change', ".optType", function(e) {
e.preventDefault();
var type = $(this).val(); //Fetch the input type
var container = $(this).closest('tr'); // Get the closest container
container.find('.optBlock').hide(); // Hide all optBlock
container.find('input').filter('[type=' + type + ']').closest('.optBlock').show(); // Show optBlock containing input of type.
});
To Remove
$(repeatBlock).on('click', '.removeField', function(e) {
e.preventDefault();
$(this).closest('tr').remove(); // select the closest tr
});
SNIPPET
var repeatBlock = "#tbody";
var repeatText = '<tr class="trRepeat">\n\
<td>\n\
<select class="optType" name="formOptionType[]">\n\
<option value="">-------------------------------------</option>\n\
<option value="text">Text</option>\n\
<option value="textarea">Textarea</option>\n\
<option value="select">Select Options (Dropdown)</option>\n\
<option value="radio">Radio Buttons</option>\n\
<option value="checkbox">Checkbox</option>\n\
</select>\n\
<div class="optBlock" style="display:none">\n\
<label>Options:</label><br>\n\
<input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput" />\n\
</div>\n\
</td>\n\
<td>\n\
<div class="optBlock" style="display:none">\n\
<label><input type="checkbox" name="fieldRequired[]"/> Required</label></div></td>\n\
<td><div class=""><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
<span class="glyphicon glyphicon-remove"></span>Remove</a>\n\
</div></td>\
</tr>';
$("#btn-addfield").click(function(e) {
e.preventDefault();
$(repeatBlock).append($(repeatText));
});
$(repeatBlock).on('click', '.removeField', function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
//****Show input field when dropdown/radio is selected****
$(repeatBlock).on('change', ".optType", function(e) {
e.preventDefault();
var type = $(this).val();
var container = $(this).closest('tr');
container.find('.optBlock').hide();
container.find('input').filter('[type=' + type + ']').closest('.optBlock').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="tbody"></tbody>
</table>
<button id="btn-addfield">ADD</button>

We Keep Coding

JavaScript is the programming language of the Web.

Disable same select option on dynamically added select boxes - javascript

Related

How to get dynamic id from a class name?

When I change dropdown value get nearest input textbox value

How to insert the dynamic multiple row values into a database

Increase index of a form's input field's name attribute in a dynamic form

Show/Hide input field inside appended element

Categories

Resources