Copy data using checkbox not working in repeater field - javascript

On the 1st image link, I have enter the required data in the first tab.
On the 2nd image link, when I go to second tab and click on checkbox it copy data from 1st tab and show in the 2nd tab form
On the 3rd image link, when I repeat the form and also when click on check box the data did not show in the respective field.
$(document).ready(function() {
$(".repeater").repeater({
defaultValues: {
//"text-input": "foo"
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm("Are you sure you want to delete this element?")) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
//$dragAndDrop.on('drop', setIndexes);
},
repeaters: [
{
selector: ".inner-repeater"
}
]
});
});
function myFunction() {
var checkBox = document.getElementById("single_checkbox");
var door_no = document.getElementById("doorno");
var street_name = document.getElementById("streetname");
var client_area = document.getElementById("area");
var client_statename = document.getElementById("statename");
var client_dist = document.getElementById("distname");
var client_city = document.getElementById("city");
var client_pincode = document.getElementById("pincode");
var dr_number = document.getElementById("doornos");
var contact_street = document.getElementById("streetnames");
var contact_area = document.getElementById("contactarea");
var contact_state = document.getElementById("statenamecontact");
var contact_dist = document.getElementById("contactdist");
var contact_city = document.getElementById("contactcity");
var contact_pincode = document.getElementById("pincode_contact");
if (checkBox.checked == true){
dr_number.value=door_no.value;
contact_street.value=street_name.value;
contact_area.value=client_area.value;
contact_state.value=client_statename.value;
contact_dist.value=client_dist.value;
contact_city.value=client_city.value;
contact_pincode.value=client_pincode.value;
} else {
dr_number.value="";
contact_street.value="";
contact_area.value="";
contact_state.value="";
contact_dist.value="";
contact_city.value="";
contact_pincode.value="";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script>
<div class="row match-height">
<div class="col-md-12">
<div class="">
<div class=" collapse show">
<div class="">
<form action="clientinsert2" method="post" enctype="multipart/form-data">
<div class="">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Client</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Client Contact</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="tab-pane active pd_0"><br>
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Client Name </label>
<input type="text" class="form-control" value="" name="clientname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control" value="" name="phone">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Door Number</label>
<input type="text" class="form-control" value="" id="doorno" name="doorno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="issueinput4">Street Name</label>
<input type="text" class="form-control" value=""id="streetname" name="streetname">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Area</label>
<input type="text" class="form-control" id="area" name="area" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">State</label>
<select class="form-control" name="State" id="statename" value="">
<option>Select</option>
<option>odisha</option>
<option>Bihar</option>
<option>Assam</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">District</label>
<select class="form-control" id="distname" name="districtname" value="">
<option>Select</option>
<option>jajpur</option>
<option>puri</option>
<option>cuttack</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">City</label>
<select class="form-control" name="cityname" id="city" value="">
<option>Select</option>
<option>Bhubaneswar</option>
<option>Bari</option>
<option>Mangalpur</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Pincode</label>
<input type="text" class="form-control" name="pincode" value="" id="pincode">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Status</label>
<select class="form-control" name="status" value="">
<option selected>Please Select Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Logo</label>
<input type="file" class="form-control" name="client_logo">
</div>
</div>
</div>
</div>
</div>
<!-- client contact form start-->
<div id="menu1" class="tab-pane fade pd_0"><br>
<div class="form-group mb-2 repeater">
<div data-repeater-list="outer-list">
<div data-repeater-item>
<div class="row mb-1">
<div class="col-md-6">
<div class="form-group">
<label for="">Contact Person </label>
<input type="text" class="form-control" name="contactname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Contact Person Phone</label>
<input type="text" class="form-control" name="contactphone">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Mail</label>
<input type="email" class="form-control" name="contactmail">
</div>
</div>
<!-- <div class="col-md-4">
<div class="form-group">
<label for="">Client Primary Spoc</label>
<div class="skin skin-square">
<input type="checkbox"
id="single_checkbox1" name="client_contact_primary_spoc"
value="checked">
<label for="single_checkbox1">checked</label>
</div>
</div>
</div> -->
<div class="col-md-4">
<div class="form-group">
<label for="">Designation</label>
<input type="text" class="form-control" name="designation">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Status</label>
<select class="form-control" name="status">
<option selected>Please Select Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Client Branch</label>
<select class="form-control" name="clientbranch">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Corporate Address</label>
<div class="">
<input type="checkbox" value="1" id="single_checkbox"
name="checkbox" onclick="myFunction()">
<label for="">checked
</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Door Number</label>
<input type="text" class="form-control" name="doorno" id="doornos">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="issueinput4">Street Name</label>
<input type="text" class="form-control" name="streetname" id="streetnames">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Area</label>
<input type="text" class="form-control" name="area" id="contactarea">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">State</label>
<select class="form-control" name="State"
id="statenamecontact">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">District</label>
<select class="form-control" name="districtname"
id="contactdist">
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">City</label>
<select class="form-control" name="cityname"
id="contactcity">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Pincode</label>
<input type="text" class="form-control" name="pincode" id="pincode_contact">
</div>
</div>
<div class="col-12">
<button type="button" data-repeater-delete
class="btn btn-icon btn-danger mr-1"><i
class="ft-x"></i></button>
</div>
</div>
</div>
</div>
<button type="button" data-repeater-create id="repeater-button"
class="btn btn-info">
<i class="ft-plus"></i> Add new file
</button>
</div>
<div class="form-actions">
<span id="hide">
<a href="/client"><input type="button" class="btn btn-warning"
value="Back"></a>
</span>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- Tab panes -->
</div>
</div>
</div>
</div>
</div>
<!-- Form wizard with icon tabs section end -->
</div>

Related

JQuery : doesn work javascript files after use load method?

I searched for this question a lot but did not get an answer...
I have an a tag and I want a div to be loaded in the partial view when clicked,
The code works fine, but there is a problem with the partial view. I have a JavaScript file in partial view that does not work at all.
$('#v-pills-tab2-tab').click(function () {
$('#js-newhorse').load(' #js-newhorse');
});
html :
<div class="widget widget-bordered title-a" id="js-newhorse">
#if (userInfo == true)
{
<span class="alert alert-danger d-block text-center">Not access!!</span>
}
else
{
List<Tuple<Guid, string>> productions = await _scope.GetProductionsHorse();
List<Tuple<Guid, string>> microchips = await _scope.GetMicrochipsHorse();
List<Tuple<Guid, string>> Farsiname = await _scope.GetFaHorseName();
List<Tuple<Guid, string>> colors = await _scope.GetColorsHorse();
List<Race> Races = await _scope.GetRaces();
<div class="widget-box">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="checkbox">
<input class="js-checkcode" type="checkbox">
</div>
</div>
<div class="form-group js-box-micro">
<div class="floating-label-group">
<select class="form-control selectmicro js-selected-code js-selected-item" id="select-mcode">
#foreach (var item in microchips)
{
<option value="#item.Item1">#item.Item2</option>
}
</select>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<div class="checkbox">
<input class="js-checkname" type="checkbox">
</div>
</div>
<div class="form-group js-box-name">
<div class="floating-label-group">
<select class="form-control selectname js-selected-name js-selected-item" id="select-name">
#foreach (var item in Farsiname)
{
<option value="#item.Item1">#item.Item2</option>
}
</select>
</div>
</div>
</div>
</div>
<hr>
<form id="CreateHorse" method="post">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<input type="text" maxlength="15" asp-for="MicrochipCode" autocomplete="off" class="form-control js-inputs">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<input type="text" asp-for="FaName" autocomplete="off" class="form-control js-inputs">
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<input type="text" asp-for="EnName" autocomplete="off" class="form-control js-inputs">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<input type="text" asp-for="FaFatherHorseName" autocomplete="off" class="form-control js-inputs">
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<input type="text" asp-for="EnFatherHorseName" autocomplete="off" class="form-control js-inputs">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<input type="text" asp-for="FaMotherHorseName" autocomplete="off" class="form-control js-inputs">
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<input type="text" asp-for="EnMotherHorseName" autocomplete="off" class="form-control js-inputs">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<select asp-for="Race" class="form-control js-inputs">
#foreach (var item in Races)
{
<option value="#item.Id">#item.Title</option>
}
</select>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<select asp-for="ProductionId" class="form-control js-inputs">
#foreach (var item in productions)
{
<option value="#item.Item1">#item.Item2</option>
}
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="floating-label-group">
<select asp-for="ColorId" class="form-control js-inputs">
#foreach (var item in colors)
{
<option value="#item.Item1">#item.Item2</option>
}
</select>
</div>
</div>
</div>
</div>
<br style="clear: both;">
<input type="submit" value="ثبت" class="btn btn-lg btn-primary pull-left btn-signin js-btninputs js-btn__mcode">
</form>
</div>
<script src="~/site/js/select.js" defer></script>
<script src="~/site/js/assest/js/horse.js" defer></script>
}
Can anyone find a solution to this problem?

change the style of only first element in an array of class elements using javascript

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

How to remove only first set of div of a specific class jquery

I have html structure like this :
<div class="row clearfix student">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Student</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
<div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
<div>
<div class="row clearfix class">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
<div>
<div class="row clearfix student">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Student</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
<div>
<div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
<div>
<div class="row clearfix class">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
<div>
..
..
There is a student row and multiple subject row.There is a dropdown on the Student row, so what i want is to remove the subject rows only when dropdown is changed. I'm using this code but it is not working.
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
$(nearest_row).next().remove();
});
I don't want to delete student, only the subjects rows of that student.
I believe the problem is that you have lots of unclosed <div> in your code, the each row is actually inside each other. If you look at the example below, i have closed the divs, and now it seems to work.
Working demo
jQuery(document).on('change', 'select.subject', function(e) {
var nearest_row = $(this).closest('div.row');
if ($(nearest_row).next('.row').find("select").length == 0) {
$(nearest_row).next().remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row clearfix student">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Student</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix class">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix student">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Student</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix class">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
</div>

How to repeat a section on click?

I have this fiddle https://jsfiddle.net/74mh06v9/ where I am stuck on how to repeat the form group?
This code I am using is as below;
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
});
});
My HTML is
<div class="col-md-12" class="repeatable">
<h4>Invoice Details </h4>
<table>
//various form groups here to repeat
</table>
<button class="repeat">Add Another</button>
First of all your html ws wrong inside table there should be td,tr etc but u placed div's i dont kno why. i hv corrected it
its working now.
HTML:
<div class="col-md-12" class="repeatable">
<div class="base-group" style="display:none;">
<h4>Invoice Details </h4>
<div class="col-sm-3">
<div class="form-group">
<label>Service User</label>
<div class="input-group">
<input name="service_user" id="service_user" class="form-control" type="text"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Hours</label>
<div class="input-group">
<input name="total_hours" id="total_hours" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Rate</label>
<div class="input-group">
<input name="rate" id="rate" class="form-control" type="text">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Sub Total</label>
<div class="input-group">
<input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
<div id="main-form">
<div class="child-group">
<h4>Invoice Details </h4>
<div class="col-sm-3">
<div class="form-group">
<label>Service User</label>
<div class="input-group">
<input name="service_user" id="service_user" class="form-control" type="text"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Hours</label>
<div class="input-group">
<input name="total_hours" id="total_hours" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Rate</label>
<div class="input-group">
<input name="rate" id="rate" class="form-control" type="text">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Sub Total</label>
<div class="input-group">
<input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="repeat">Add Another</button>
JS:
$(function() {
$(".repeat").on('click', function(e) {
var c = $('.base-group').clone();
c.removeClass('base-group').css('display','block').addClass("child-group");
$("#main-form").append(c);
});
});
fiddle https://jsfiddle.net/riazxrazor/74mh06v9/9/
if you want to try
Firslty, there is no need of table(no rows and columns), and replace table to div and add a class frm to it, then make a clone and append it.
$(function() {
$(".repeat").on('click', function(e) {
var frm =$('.frm:first').clone();
frm.find('input').val('');
$('.frm:last').after(frm);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 repeatable">
<div class="frm">
<h4>Invoice Details </h4>
<div class="col-sm-3">
<div class="form-group">
<label>Service User</label>
<div class="input-group">
<input name="service_user" id="service_user" class="form-control" type="text"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Hours</label>
<div class="input-group">
<input name="total_hours" id="total_hours" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Rate</label>
<div class="input-group">
<input name="rate" id="rate" class="form-control" type="text">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Sub Total</label>
<div class="input-group">
<input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
<button class="repeat">Add Another</button>
Slight changes to the answer above:
<script>
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var clonedForm = $(".frm").clone();
clonedForm.appendTo("#table");
frm.find('input').val('');
});
});
</script>
<div class="col-md-12" class="repeatable">
<table id ="table">
<div class="frm">
<h4>Invoice Details </h4>
<div class="col-sm-3">
<div class="form-group">
<label>Service User</label>
<div class="input-group">
<input name="service_user" id="service_user" class="form-control" type="text"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Hours</label>
<div class="input-group">
<input name="total_hours" id="total_hours" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Rate</label>
<div class="input-group">
<input name="rate" id="rate" class="form-control" type="text">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Sub Total</label>
<div class="input-group">
<input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</table>
<button class="repeat">Add Another</button>

Not trigger form validation on button click

I have a form which consists of two buttons. None of them have the "submit" declaration in type.
My issue is that the form validation is triggered during both button button clicks where as I want the validation only to happen on one particular button click.
Can this be achieved?
Below is my code.
<form class="form-horizontal" ng-controller="checkoutCtrl" name="ordersubmitform">
<div class="panel panel-default" ng-init="init()">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">PERSONAL INFO</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.name" name="username" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">E-Mail</label>
<div class="col-lg-9">
<input type="email" ng-model="customer.email" name="email" class="form-control" required />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile Number</label>
<div class="col-lg-9">
<input ng-model="customer.contact" type="text" name="mobile" class="form-control" pattern=".{9,}" required title="9 characters minimum" />
</div>
</div>
<legend class="text-semibold">ADDRESS</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Organisation Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.organisation" name="org" class="form-control" pattern=".{0}|.{5,}" title="Either 0 OR (5 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Floor</label>
<div class="col-lg-9">
<input ng-model="customer.floor" type="text" name="floor" class="form-control" pattern=".{0}|.{1,}" title="Either 0 OR (1 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 1</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetNumber" name="line1" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 2</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetAddress" name="line2" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Postcode</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.postal" name="postal" class="form-control" value="<?php echo $this->session->userdata('postalcode');?>" required/>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">ITEMS</legend>
<div class="container" ng-repeat="item in items">
<div class="row">
<div class="col-md-1 col-xs-3 col-sm-2">
<a href="#" class="thumbnail">
<img ng-src="{{ item.thumbnail }}">
</a>
</div>
<div style="font-size:15px;" class="col-md-6"><span style="color:coral;">{{ item.qty }} x </span>{{ item.title }}</div>
<div style="font-size:13px;" class="col-md-6">{{ item.description }}</div>
<div class="col-md-6" style="padding-top:5px; font-size: 15px;">$ {{ item.line_total }}</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-semibold">CHECK OUT</legend>
</fieldset>
<div class="form-group">
<label class="col-lg-3 control-label">Vouchercode</label>
<div class="col-lg-6">
<input type="text" ng-model="voucher" name="voucher" class="form-control" />
</div>
<div class="col-lg-3">
<button id="voucherbtn" ng-click="verifyVoucher()" class="btn btn-primary">Apply</button>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Special Notes</label>
<div class="col-lg-9">
<textarea rows="5" cols="5" class="form-control" name="instructions" placeholder="Enter any special instructions here"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Total</label>
<div class="col-lg-9">NZ {{total | currency}}</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button style="width: 100%; font-weight: bold; font-size: 15px;" ng-click="finalizeOrder()" class="btn btn-primary">Place Order</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Add type to the button:
<button>I submit by default</button>
<button type="button">I don't submit</button>
<button type="submit">I do</button>

Categories