JQuery : doesn work javascript files after use load method? - javascript

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?

Related

DataLayer onClick Submit Form

Good afternoon everyone! I need help with this here:
I need to pull the data from this form to a Datalayer in my ".JS":
<form action="https://primeseguroviagem.com.br/cotacao-rapida" method="GET" autocomplete="chrome-off" enctype="text/plain" id="form_cotation">
<div class="row">
<div class="text-center text-secondary h2 mb-3">
<b>Faça Sua Cotação Gratuita</b>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="destinyGroup" class="form-label">Qual seu destino</label>
<select name="destinyGroup" id="destinyGroup" class="form-control " required>
<option value="">Selecione seu destino</option>
<option value="1">Brasil</option>
<option value="2">América Latina (inclui México)</option>
<option value="4">Estados Unidos e Canadá</option>
<option value="3">Europa</option>
<option value="5">Ásia</option>
<option value="6">África</option>
<option value="7">Oceania</option>
<option value="8">Múltiplos destinos</option>
</select>
</div>
<div class="row">
<label class="form-label"></label>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="" style="font-size: 17px;"> Data de Ida
<input type="text" class="form-control " id="departure" name="departure" value="required" placeholder="Embarque" autocomplete="chrome-off" data-date-format='dd-mm-yyyy' required>
</label>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="" style="font-size: 17px;"> Data de Volta
<input type="text" class="form-control " id="arrival" name="arrival" value="required" placeholder="Chegada" autocomplete="chrome-off" data-date-format='dd-mm-yyyy' required>
</label>
</div>
</div>
</div>
<div class="mb-3 relative">
<label for="ages" class="form-label">Idade do(s) passageiro(s):</label>
<input type="text" class="form-control " id="ages" name="ages" value="Selecione as idades" readonly required>
<div class="w-100 selectAges">
<div class="card">
<div class="card-body ">
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>0 a 40</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old0" id="old0" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>41 a 64</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old1" id="old1" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>65 a 75</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old2" id="old2" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>76 a 99</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old3" id="old3" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a type="submit" class="btn btn-warning btn-aplicar text-white save">
<b>
Aplicar
</b>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="name" class="form-label">Nome:</label>
<input type="text" class="form-control " name="name" id="name" value="" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail:</label>
<input type="email" name="email" class="form-control " id="email" value="" required>
</div>
<div class="mb-3">
<label for="phone" class=" form-label">Telefone:</label>
<input type="text" name="phone" class="phone form-control " id="phone" value="" required>
</div>
</div>
<div class="col-lg-12 mt-3 mb-3 order-3">
<button class="btn w-100 btn-cotation" id="submitbtnt" type="submit">Cotar agora! ››</button>
</div>
</div>
</form>
I need a dataLayer to pull the data filled in the form and add an onClick when submitting the form.
something like:
dataLayer.push ({
event: "formSubmit",
name: (value of input here)
});
What I'm not able to do is transform my inputs into variables to be able to put them in the dataLayer.

Delay in Form Redirection Right After Clicking Submit Button

I need help with a specific script, I have a form that performs an action with the "GET" method and I need to put a delay of 200ms before the form's action is executed.
Form:
<form action="#" method="GET" autocomplete="chrome-off" enctype="text/plain" id="form_cotation">
<div class="row">
<div class="text-center text-secondary h2 mb-3">
<b>Faça Sua Cotação Gratuita</b>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="destinyGroup" class="form-label">Qual seu destino</label>
<select name="destinyGroup" id="destinyGroup" class="form-control ">
<option value="">Selecione seu destino</option>
<option value="1">Brasil</option>
<option value="2">América Latina (inclui México)</option>
<option value="4">Estados Unidos e Canadá</option>
<option value="3">Europa</option>
<option value="5">Ásia</option>
<option value="6">África</option>
<option value="7">Oceania</option>
<option value="8">Múltiplos destinos</option>
</select>
</div>
<div class="row">
<label class="form-label">Data da Viagem:</label>
<div class="col-lg-6 ">
<div class="mb-3">
<input type="text" class="form-control " id="departure" name="departure" value="" placeholder="Embarque" autocomplete="chrome-off" data-date-format='yyyy-mm-dd'>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<input type="text" class="form-control " id="arrival" name="arrival" value="" placeholder="Chegada" autocomplete="chrome-off" data-date-format='yyyy-mm-dd'>
</div>
</div>
</div>
<div class="mb-3 relative">
<label for="ages" class="form-label">Idade do(s) passageiro(s):</label>
<input type="text" class="form-control " id="ages" name="ages" value="Selecione as idades" readonly>
<div class="w-100 selectAges">
<div class="card">
<div class="card-body ">
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>0 a 40</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old0" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>41 a 64</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old1" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>65 a 75</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old2" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>76 a 99</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old3" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a type="submit" class="btn btn-warning btn-aplicar text-white save">
<b>
Aplicar
</b>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="name" class="form-label">Nome:</label>
<input type="text" class="form-control " name="name" value="nome" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail:</label>
<input type="email" name="email" class="form-control " id="email" value="email" id="email">
</div>
<div class="mb-3">
<label for="phone" class=" form-label">Telefone:</label>
<input type="text" name="phone" class="phone form-control " id="phone" value="telefone" id="phone">
</div>
</div>
<div class="col-lg-12 mt-3 mb-3 order-3">
<button class="btn w-100 btn-cotation" id="submitbtnt" type="submit">Cotar agora! ››</button>
</div>
</div>
</form>
and script
let timeToWait = 200;
let button = document.getElementById('submitbtnt');
setTimeout(() => {
button.onclick = function(e) {
e.preventDefault();
location.href ='URL-AQUI'
}
}, timeToWait);
I've tried in several ways but I'm not able to activate the delay with setTimeout()
In short, what I need is to leave a delay of 200ms before right after clicking the submit button

to prevent form submit ion you need to run preventDefault() on the submit event
const formCotation = document.getElementById('form_cotation');
formCotation.addEventListener("submit", function(event){
event.preventDefault();
setTimeout(() => {
formCotation.submit()
}, 200);
});

You need to add the setTimeout inside the onclick function, so the delay start right after users click the button
button.onclick = function(e) {
setTimeout(() => {
e.preventDefault();
location.href ='URL-AQUI'
}, timeToWait);
}

Copy data using checkbox not working in repeater field

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>

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>

Remove <br/> tag and Button Text in Jquery while fetching value of all control

I am trying to get value of all HTML controls of Form using JQuery. Here is my HTML code:
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlGender" class="form-control">
<option value="his">C/O</option>
</select>
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
And Using following JQuery, I am getting value of all controls:
$("#BtnSave").click(function() {
var values = [];
$('input,select,label').each(function() {
if ($(this).val() != "") {
values.push($(this).val().trim().replace(/<br>/g, " "));
} else {
values.push($(this).text().trim().replace(/<br>/g, " "));
}
});
console.log(values);
});
As you can see in attached image, I am getting tag in array element. I want to remove it. I've already tried to replace br tag with space.
Also, I don't want text of input type button. What should I do?
Output Image: http://prnt.sc/emr80l
CodePen : http://codepen.io/anon/pen/ZexLaX?editors=1111

$("#BtnSave").click(function() {
var values = [];
$('input,select,label').each(function() {
if($(this).attr('type') == 'button')) return true;
if ($(this).val() != "") {
values.push($(this).val().trim().replace(/<br>/g, " "));
} else {
values.push(($(this).text().trim().replace(/<br>/g, " ")).replace(/\s+/g, " "));
}
});
console.log(values);
});
.replace(/\s+/g, " ") replaces consecutive whitespaces with a single whitespace.

Categories