In my project, I have two RadioButtons called UserTypeRadio. With that, I have a DropDownList and a TextBox. I want to toggle the visibility of the DropDownList and the TextBox depending on which RadioButton is selected.
RadioButton
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" onclick="radioButtonEmployeeSelected()" checked class="userSelection" /> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" onclick="radioButtonOtherUserSelected()" class="userSelection" /> Other User</label>
</div>
</div>
</div>
DropDownList
<div class="row">
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
TextBox
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" hidden />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
jQuery Code
$('.userSelection').on('change', function () {
//alert($(this).val());
//if ($(this).val() === "Employee") {
$("#textBoxOtherUser").toggle();
$("#dropDownUserNames").toggle();
//}
});
I am trying to hide TextBoxOtherUser when Employee is selected from the RadioButton, and I am trying to hide DropDownUserNames when I click Other User option from the RadioButton.
The toggle() is performing as per expectation. However, on performing Inspect Element from the Browser, when Other User is selected from the RadioButton, I see that the DropDownList is not getting disbled. In fact, I see that when the Employee is not selected, style="display: inline-block;" is present in the code. On the other hand, when the Employee is selected, style="display: none;" is shown. In other words, on selecting Employee displays the DropDownList in the required UI. But when Employee is not selected, instead of getting disabled, the DropDownList is shown in the plain old block format.
What to do?
by using data attribute you can do this .. add data-user for employee and otheruser radio inputs and add data-show to the related select/textbox and you can then use the next code
$('[name="UserTypeRadio"]').on('change' , function(){
var Thisvalue = $(this).attr('data-user');
$('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames" data-show="employee">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" data-show="otheruser" />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
Note: if you include your js code before including jquery you'll need to wrap your js code inside $(document).ready(function(){ // code here })
Finally if you need to hide the whole row you can simply cut/paste the data-show attribute to the parent instead of select or textbox
$('[name="UserTypeRadio"]').on('change' , function(){
var Thisvalue = $(this).attr('data-user');
$('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-t-20" data-show="employee">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6 m-t-20" data-show="otheruser">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
by adding .filter(':checked').change(); at the end this mean run the change event for the checked radio on load
Related
i have this html code that has a list. in my css listName is set to display='none'
when the dom page opens up i need the FIRST element of the class="listName" to show.. obviously this class in js is an array.. can you please show me
i need to make the page more user friendly. i need one li showing and if the user decides to book more shipments he can click on Add more shipments to show another li
the css file has this
.listHolder {
display: none;
}
here is the image of what it looks like now
<div class="container">
<div class="listHolder" th:each="freight, itemStat : *{freightsDto}">
<ul class="list">
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
</ul>
</div>
<div id="toggleBtn" class="row mtp">
<button id="addBtn" class="col-sm-12">
Add more shipments
</button>
</div>
</div>
You can get the list of elements with class "listName", and change the first element of that list.
Javascript
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
.listName {
display: none;
}
<html>
<body>
<div class="listHolder">
<ul class="list">
<li>
<span class="listName">Macbook</span>
</li>
<li>
<span class="listName">Amazon Firestick</span>
</li>
<li>
<span class="listName">Keyboard</span>
</li>
<li>
<span class="listName">Headphones</span>
</li>
<li>
<span class="listName">Airpods</span>
</li>
</ul>
</div>
</body>
</html>
I think you can do with JavaScript
<script type="text/javascript">
// create the function with JavaScript
function removerClass() {
// get all elements with listName class
let element = document.getElementsByClassName("listName");
// get the first element
element = element[0];
// remove the element's class
element.classList.remove("listName");
}
// call the function when the page is loaded
removerClass()
</script>
I hope it's usefull
I am hiding inputs on my modal form. I am using both a select dropdown and a checkbox. My code is working fine but I want to better understand what I have done as I am still new to JQuery.
For the checkbox the code works fine without calling the function once the modal is opened however for the select to work I have to call the code once the modal is open. I want to better understand why this is the case. Thanks!
Code below:
//select change
$('#modal-track').on('shown.bs.modal', function() {
$('#track_type').change(function() {
if ($('#track_type').val() == 'Source') {
$('.mfnswitch').show();
} else {
$('.mfnswitch').hide();
}
});
});
//checkbox change
function valueChanged() {
if (
$('.checkboxinput').is(':checked') &&
$('input[name=budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (!$('.checkboxinput').is(':checked') &&
!$('input[name=budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
if (!$('.checkboxinput').is(':checked') &&
$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (
$('.checkboxinput').is(':checked') &&
!$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="add_track" id="TrackForm" method="post">
<div class="form-row ">
<div class="col-md-3 mb-0">
<div id="div_id_track_type" class="form-group">
<label for="track_type" class=" requiredField">
Track type<span class="asteriskField">*</span> </label>
<div class="">
<select name="track_type" class="track_type select form-control" id="track_type">
<option value="Source" selected="">Source</option>
<option value="Library">Library</option>
<option value="Original Composition">Original Composition</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-row form-row">
<div class="col-md-2 mb-0 mfnswitch" id="mfnswitch">
<div class="custom-control custom-switch">
<div class="form-group">
<div id="div_id_mfn" class="custom-control custom-checkbox"> <input type="checkbox" name="mfn" class="custom-control-input checkboxinput custom-control-input" onchange="valueChanged()" id="customSwitch1" checked=""> <label for="customSwitch1" class="custom-control-label">
MFN
</label> </div>
</div>
</div>
</div>
<div class="col-md-10 mb-0 mfnhide" id="mfnhide">
<div id="div_id_budget" class="form-group"> <label for="id_budget" class=" requiredField">
Budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="budget" value="0" class="numberinput form-control" required="" id="id_budget"> </div>
</div>
</div>
<div class="col-md-4 mb-0 hidden" id="hidden">
<div id="div_id_sync_budget" class="form-group"> <label for="id_sync_budget" class=" requiredField">
Sync budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="sync_budget" value="0" class="numberinput form-control" required="" id="id_sync_budget"> </div>
</div>
</div>
<div class="col-md-6 mb-0 hidden" id="hidden">
<div id="div_id_master_budget" class="form-group"> <label for="id_master_budget" class=" requiredField">
Master budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="master_budget" value="0" class="numberinput form-control" required="" id="id_master_budget"> </div>
</div>
</div>
</div>
<div class="form-row ">
<div class="col-md-1 mb-0"> <input type="submit" name="submit" value="Save" class="btn btn-primary" id="submit-id-submit">
</div>
</div>
</form>
I need to show and hide some form elements according to a checkbox selection.
This is my HTML:
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
</div>
Here I want to display #address2 DIV if address_check check box checked and other wise it should be hide.
This how I tried it.
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
});
My problem is I want to reset the form elements inside address2 div when this is toggling down. Reset mean I want to make empty these elements.
Can anybody tell me how to do it?
Thank you.
Try doing:
$('#address2').find("input").val("");
$("#address2").find('select option:first').prop('selected',true);
Working fiddle
Try this:
var address2 = $('#address2');
$('input[name="address_check"]').bind('change',function(){
var isChecked = $(this).is(':checked');
isChecked ? address2.fadeIn() : address2.fadeOut();
if(!isChecked)
{
address2.find('input, textarea').val('');
address2.find('select').prop('selectedIndex',0);
}
});
The easiest way to do this is using:
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
});
});
</script>
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">select Name:</label>
<div class="col-xs-12 col-sm-9">
<select name="name" class="col-xs-12 col-sm-4" >
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>
Try this
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$('#address2').find("input").val("");
});
I have one drop down list which has two options
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
When i select the owner, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
When i select the member, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
It is happening at onchange event.
If i not selecting no one, These two text box sections will be hide.
How to make this functionality
you can user ng-show or ng-hide to do this, here is a demonstration,
when ng-model="membertype" is equals to 'owner' it will show the below div;
<div class="form-group" ng-show="(membertype == 'owner')">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
when ng-model="membertype" is equals to 'member' it will show the below div;
<div class="form-group" ng-show="(membertype == 'member')">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
<div class="form-group" ng-show="membertype == 'member'">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
divs to show on event change in dropdown
<div class="form-group" ng-if="membertype == 'owner'">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
On page load set textbox visibility to none using style
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number" style="display:none" >
</div>
OnChange of dropdownlist call the script
<script>
yourfunction(value)
{
if(value === "owner")
{
document.getElementById("ownernumber").style.display="block";
}
}
</script>
Using the following html and forked js I have nearly got this working however, I need to change the label references to category1 and it's inner html to increment with the id etc
Any ideas?
Regards Pete
<div class="category" id="category1">
<div class="row">
<!-- Till Category -->
<div class="col col-lg-8">
<div class="form-group">
<label class="control-label" for="Category1">Category1</label>
<select id="Category1" name="Category1" class="form-control">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
<!-- helpful addition-->
<div class="col col-lg-1">
<div class="form-group">
<label class="control-label" for="Qty1">qty1</label>
<input id="Qty1" name="Qty1" type="text" placeholder="Quantity" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Cost1">Cost1</label>
<input id="Cost1" name="Cost1" type="text" placeholder="Cost" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Total1">Total1</label>
<input id="Total1" name="Total1" type="text" placeholder="" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="another">New</label>
<button type="button" name="another" class="btn btn-info btn-sm form-control clone">+</button>
</div>
</div>
</div>
</div>
And my JS code:
var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".category").length + 1;
$(document).on("click", 'button.clone', function(){
$(this).closest(".category").clone().insertBefore(".before")
.attr("id", "category" + cloneIndex).find("[id], [name]").each(function() {
this.id = this.id.replace(/\d+$/, cloneIndex );
this.name = this.name.replace(/\d+$/, cloneIndex );
});
cloneIndex++;
});
For this I would take a completely different approach and use an HTML template.
While there are a tun of templating libraries out there that you may want to grow into (Handlebars, Mustache, jQuery plugin, etc.) a simple string replace works just fine for this example.
Live Demo
JS
var clone = (function(){
var cloneIndex = 0;
var template = $('#categoryTemplate').text();
return function(){
//Replace all instances of {{ID}} in our template with the cloneIndex.
return template.replace(/{{ID}}/g, ++cloneIndex);
}
})();//self executing function.
var categories = $('#categories')
$(document).on("click", 'button.clone', function(){
categories.append(clone());
});
//Start us off with 1 category.
categories.append(clone());
HTML - notice that the HTML is inside a text/template script tag.
<script type="text/template" id="categoryTemplate">
<div class="category" id="category{{ID}}">
<div class="row">
<!-- Till Category -->
<div class="col col-lg-8">
<div class="form-group">
<label class="control-label" for="Category{{ID}}">Category{{ID}}</label>
<select id="Category{{ID}}" name="Category{{ID}}" class="form-control">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
<!-- helpful addition-->
<div class="col col-lg-1">
<div class="form-group">
<label class="control-label" for="Qty{{ID}}">qty{{ID}}</label>
<input id="Qty{{ID}}" name="Qty{{ID}}" type="text" placeholder="Quantity" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Cost{{ID}}">Cost{{ID}}</label>
<input id="Cost{{ID}}" name="Cost{{ID}}" type="text" placeholder="Cost" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Total{{ID}}">Total{{ID}}</label>
<input id="Total{{ID}}" name="Total{{ID}}" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
</script>
<div id='categories'></div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="another">New</label>
<button type="button" name="another" class="btn btn-info btn-sm form-control clone">+</button>
</div>
</div>