We Keep Coding

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);
}

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?

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>

Labels with inputfields next to each other not responsive in Bootstrap 4

I am learning bootstrap 4 and I have made a contact form with labels and inputs fields.
This is my code for structure and styling:
<div class="row no-gutters">
<div class="col-12">
<div class="row">
<div class="col-4 mt-3">
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-3">NAME</label>
<div class="col-6">
<input class=" form-control rounded-0" />
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input a class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<textarea class="form-control rounded-0"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is when I resize the browser it isn't responsive. The input field goes over the label.
I have made a jsfiddle so you can see the behaviour:
https://jsfiddle.net/mkgvape9/1/
Sources I use:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Bootstrap horizontal form "control-label" not using responsive styling
How can I make the label and input field responsive?

Try this HTML structure..
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row no-gutters">
<div class="col-12">
<div class="row">
<div class="col-4 mt-3">
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class=" form-control rounded-0" />
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input a class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<textarea class="form-control rounded-0"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>

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>