I have this div.form-group dynamically added. I have button to click to get the index. my problem is that when I delete an elment using index the third div also is deleted. how can I delete only one div by the given index, if I delete again looks like it's not updating index after it remove. is this because it is dynamically added ?
<div class="mycontainer">
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control" >
</div>
<div class="form-group">
<input type="text" class="form-control" >
</div>
</div>
$('.mycontainer').find('div.form-group').eq(index).remove();
Actually, you really don't need jQuery for it:
const removeByIndex = (index = 0) =>
[...document.querySelectorAll('.mycontainer .form-group')][index].remove();
setTimeout(() => removeByIndex(2), 2000);
<div class="mycontainer">
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control" value="will be removed ...">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</div>
Your code working fine... check isn't your script runs twice.
$('.mycontainer').find('div.form-group').eq(1).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
<div class="form-group">
<input type="text" value="0" class="form-control">
</div>
<div class="form-group">
<input type="text" value="1" class="form-control">
</div>
<div class="form-group">
<input type="text" value="2" class="form-control" >
</div>
<div class="form-group">
<input type="text" value="3" class="form-control" >
</div>
</div>
Related
I'm trying to make a message to appear when all validation in a form are through but it doesn't work
here's my codepen
https://codepen.io/v-ho-ng-hip/pen/ExVRLMv
//submit form
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
//prevent default submit
event.preventDefault();
//run validators
validateFName();
validateLName();
validateEmail();
validatePass();
validateConfirmPass();
validateCity();
validateGender();
if (validateFName() && validateLName() && validateEmail() && validatePass() && validateConfirmPass && validateCity() && validateGender()) {
const successMsg = document.getElementById('success');
successMsg.innerHTML = 'Registered successfully!';
};
What am I doing wrong here? I'm trying to make a message appear when all inputs are through.
here's my html
<body>
<div class="container">
<form method="POST" id="myForm" name="myForm" class="form-horizontal" role="form" novalidate>
<h2>Registration</h2>
<div class="form-row">
<div class="form-group col-lg-6 px-4">
<label for="firstName" class="control-label">First Name*</label>
<div>
<input type="text" id="firstName" placeholder="First Name" class="form-control" onfocusout="return validateFName()">
<div name="message"></div>
</div>
</div>
<div class="form-group col-lg-6 px-4">
<label for="lastName" class="control-label">Last Name*</label>
<div>
<input type="text" id="lastName" placeholder="Last Name" class="form-control" onfocusout="return validateLName()">
<div name="message"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email* </label>
<div class="col-sm-12">
<input type="" id="email" placeholder="Email" class="form-control" name="email" onfocusout="return validateEmail()">
<div name="message"></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-12 control-label">Password* <em>(Password must have more than 8 characters)</em></label>
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" class="form-control" onfocusout="return validatePass()">
<div name="message"></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">Confirm Password*</label>
<div class="col-sm-12">
<input type="password" id="password2" placeholder="Password" class="form-control" onfocusout="return validateConfirmPass()">
<div name="message"></div>
</div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-12">
<input type="date" id="birthDate" class="form-control">
</div>
<div name="message"></div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-3 control-label">City*</label>
<div class="col-sm-12">
<select name="city" id="city" class="form-control" placeholder="" onfocusout="return validateCity()">
<option>
Select </option>
<option>
TP. Hồ Chí Minh </option>
<option>
Đà Nẵng </option>
<option>
Hải Phòng </option>
<option>
Hà Nội </option>
<option>
Long An </option>
<option>
Bình Dương </option>
<option>
Đồng Nai </option>
<option>
Bà Rịa - Vũng Tàu </option>
<option>
Other </option>
</select>
<div name="message"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Gender*</label>
<div class="col-sm-6">
<div class="row" id="genderSelect">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="gender" id="femaleRadio" value="Female">Female
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="gender" id="maleRadio" value="Male">Male
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="gender" id="otherRadio" value="Other">Other
</label>
</div>
</div>
<div name="message"></div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-12 col-sm-offset-3">
<span class="help-block">*Required fields</span>
</div>
</div>
<div id="success"></div>
<button type="submit" class="btn btn-primary btn-block">Register</button>
</form> <!-- /form -->
</div> <!-- ./container -->
<script src="script.js"></script>
</body>
All validations work but the message doesnt. Im a newbie so if there are any tips i can improve im welcoming them all. thanks!
Your problem here is not very complicated, so whenever you trying to validate one of your inputs, you are calling a function related to that input, some of your existing function does not work as expected like the below one:
function validateFName() {
// check if is empty
if (checkIfEmpty(firstName)) return;
// is if it has only letters
if (checkIfOnlyLetters(firstName)) return;
return true;
};
What's happening here?
So the problem here is in both cases of success or failure of your check attempt you will return undefined like this: if (checkIfOnlyLetters(firstName)) return;, because of the second return statement (return true) never runs, since the first return statement (return;) block the execution of other lanes in this function.
At last your condition:
if (validateFName() && validateLName() && validateEmail() && validatePass() && validateConfirmPass && validateCity() && validateGender())
will return false so it won't run the next two lines in your condition anymore.
How to fix this?
So you need to make a little change here like this:
function validateFName() {
// check if is empty
if (checkIfEmpty(firstName)) return false;
// is if it has only letters
if (checkIfOnlyLetters(firstName))
return true;
};
So whenever your check attempt is successful it will return true otherwise it will return false.
Working demo: codepen.io
NOTE: You can read more about return here.
I am having a problem removing an element from a form when a select input option is changed. When the select input is placed to "Manually Specify" the javascript correctly adds to the form as i would expect. When the option is changed again to anything other than "Manually Specify i would like it to remove the form inputs previously added, but can not seem to get this to work.
$(function() { /* DOM ready */
$("#distanceSelect").change(function() {
if ($(this).val() == "Manually Specify") {
var html = $("#distanceSpecifyInput").html();
$("#distanceSelectInput").after(html);
} else {
var child = document.getElementById("distanceSpecifyInput");
if (child) {
child.parentNode.removeChild(child);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="form-group row" id="distanceSelectInput">
<div class="col-sm-3">
<label for="distanceSelect" class="control-label">Distance:</label>
<select class="form-control" id="distanceSelect">
<option>5km</option>
<option>10km</option>
<option>Half Marathon</option>
<option>Marathon</option>
<option>Manually Specify</option>
</select>
</div>
</div>
<div class="hide" id="distanceSpecifyInput">
<div class="form-group row">
<div class="col-sm-1">
<input type="number" class="form-control" step="0.1" id="distance">
</div>
<div class="col-sm-2">
<select class="form-control" name="distanceFormat" id="distanceFormat">
<option>miles</option>
<option>km</option>
<option>meters</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<label for="hours" class="control-label">Desired Finish Time:</label>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
</div>
</form>
</div>
Thanks for any help.
You should create a specific DIV to hold the content, rather than using .after(). That way you can clear it with .empty().
$(function() { /* DOM ready */
$("#distanceSelect").change(function() {
if ($(this).val() == "Manually Specify") {
var html = $("#distanceSpecifyInput").html();
$("#distanceOutput").html(html);
} else {
$("#distanceOutput").empty();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="form-group row" id="distanceSelectInput">
<div class="col-sm-3">
<label for="distanceSelect" class="control-label">Distance:</label>
<select class="form-control" id="distanceSelect">
<option>5km</option>
<option>10km</option>
<option>Half Marathon</option>
<option>Marathon</option>
<option>Manually Specify</option>
</select>
</div>
</div>
<div class="hide" id="distanceSpecifyInput">
<div class="form-group row">
<div class="col-sm-1">
<input type="number" class="form-control" step="0.1" id="distance">
</div>
<div class="col-sm-2">
<select class="form-control" name="distanceFormat" id="distanceFormat">
<option>miles</option>
<option>km</option>
<option>meters</option>
</select>
</div>
</div>
</div>
<div id="distanceOutput">
</div>
<div class="form-group row">
<div class="col-sm-12">
<label for="hours" class="control-label">Desired Finish Time:</label>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="hours" required name="hours" id="hours">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="mins" required name="mins" id="mins">
</div>
<div class="col-sm-1">
<input type="number" class="form-control" required step="1" placeholder="secs" required name="secs" id="secs">
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="calculateRacePace()">Submit</button>
</div>
</form>
</div>
Note that copying the HTML like this results in duplicate IDs distance and distanceFormat. IDs are supposed to be unique, so you should fix up the IDs after copying.
I'm new to scripting and trying to understand it better. I have a modal being displayed after clicking a button that has a form inside of it. There is a dropdown box with two selections. The first selection (Single) is meant for all divs and text fields to be displayed with the exception of the Guest text fields since they will be coming alone without a guest.
What I am trying to do is make the text fields show up once the second option (Couple) is selected so that the Guest name fields can be entered, and I can't seem to get them to display so that text can be entered. Here is my code:
<div class="form-group" id="selector">
<label for"selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
<option value="40.00">Single - $40.00</option>
<option value="75.00">Couple - $75.00</option>
</select>
</div>
<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
<input type="hidden" name="on0" value="First Name">
<input type="text" class="form-control" id="first_name"
name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on1" value="Last Name">
<input type="text" class="form-control" id="last_name"
name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>
<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" style="display: none">
<input type="hidden" name="on3" value="Guest's First Name">
<input type="text" class="form-control" id="guestFirstName" name="os3"
placeholder="i.e. Jane" autofocus>
</div>
</div>
<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on4" value="Guest's Last Name">
<input type="text" class="form-control" id="guestLastName" name="os4"
placeholder="i.e. Smith" autofocus>
</div>
</div>
-----
<script>
$('#selection').on('change', function() {
if ( this.value == '75.00')
{
$("#guestFirstName").show();
}
else
{
$("#guestFirstName").hide();
}
});
</script>
Problem : you set the input field to display via jQuery but set display:none property to the col-xs-8 before that input filed.
Solution: I think you need to hide the div id #guestFirst, #guestLast and show them after select couple from dropdown.
So set those div style display none using css. then show those divs using if else condition on jQuery.
LiveOnFiddle
$('#selection').on('change', function() {
if ( this.value == '75.00')
{
$("#guestFirst, #guestLast").show();
}
else
{
$("#guestFirst, #guestLast").hide();
}
});
#guestFirst, #guestLast{
display:none;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group" id="selector">
<label for="selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
<option value="40.00">Single - $40.00</option>
<option value="75.00">Couple - $75.00</option>
</select>
</div>
<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
<input type="hidden" name="on0" value="First Name">
<input type="text" class="form-control" id="first_name"
name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on1" value="Last Name">
<input type="text" class="form-control" id="last_name"
name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>
<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" >
<input type="hidden" name="on3" value="Guest's First Name">
<input type="text" class="form-control" id="guestFirstName" name="os3"
placeholder="i.e. Jane" autofocus>
</div>
</div>
<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8" >
<input type="hidden" name="on4" value="Guest's Last Name">
<input type="text" class="form-control" id="guestLastName" name="os4"
placeholder="i.e. Smith" autofocus>
</div>
</div>
what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap.
Here is my html part:-
<div class="container">
<div class="jumbotron checkInGuest">
<h3 class="h3Heading">Request for following information from guest</h3>
<form class="form-horizontal" id="checkInForm">
<div class="form-group">
<label for="reservationId" class="col-md-4">Reservation Id</label>
<div class="col-md-8">
<input type="text" class="form-control" id="reservationId" name="reservationId" required>
</div>
</div>
<div class="form-group">
<label for="dlNum" class="col-md-4">Driver License #</label>
<div class="col-md-8">
<input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
</div>
</div>
</form>
<!-- Form when info is found. Initially all fields are disabled-->
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Information Found</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="resId" class="col-md-3">Reservation Id</label>
<div class="col-md-3">
<input type="text" class="form-control" id="resId" name="resId" disabled>
</div>
<label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
<div class="col-md-3">
<input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
</div>
</div>
<div class="form-group">
<label for="guestFullName" class="col-md-3">Guest Full Name</label>
<div class="col-md-3">
<input type="text" class="form-control" id="guestFullName" name="guestFullName" disabled>
</div>
<label for="email" class="col-md-3">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" id="email" name="email" disabled>
</div>
</div>
<div class="form-group">
<label for="numRooms" class="col-md-3">Rooms Booked</label>
<div class="col-md-3">
<input type="number" class="form-control readable" id="numRooms" name="numRooms" disabled>
</div>
<label for="roomType" class="col-md-1">Room Type</label>
<div class=" col-md-2">
<label for="smoking">
<input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
</label>
</div>
<div class=" col-md-3">
<label for="nonSmoking">
<input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
</label>
</div>
</div>
<div class="form-group">
<label for="discount" class="col-md-3">Discount</label>
<div class="col-md-3">
<select class="form-control readable" id="discount" disabled>
<option selected>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
</select>
</div>
<label for="checkInDate" class="col-md-3">CheckIn Date</label>
<div class="col-md-3">
<input type="date" class="form-control readable" id="checkInDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<label for="checkOutDate" class="col-md-3">CheckOut Date</label>
<div class="col-md-9">
<input type="date" class="form-control readable" id="checkOutDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
</div>
</div>
</form>
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Final Room Order</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
<div class="col-md-8 " id="perInEachRoom">
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="checkInButton">Check In</button>
</div>
</div>
</div>
</form>
</div>
</div>
And this is jquery part:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
</script>
You need to put your code in a document.ready() function, so:
$(document).ready(function() {
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
});
You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?
Long story short, you should use
<button type="button"...
not
<button type="submit"...
Actually, all I did is:-
$("#checkInForm").submit(function(e)
{
e.preventDefault();
});
And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.
Relatively new to Angular, and trying to create a form that is used for both create and edit operations. There are forms fields that I am hoping to share, but from what I understand ng-include creates a new scope, so my fields (using ng-model) are not bound to the original scope. The result is that when the form is submitted my fields are not sent in.
If I am going about this the wrong way, please direct me to any documentation that might be of assistance. Part of my problem is I am not sure where to look at this point. Thanks!
Create Form
<section data-ng-controller="AlbumsController">
<div class="page-header">
<h1>New Album</h1>
</div>
<form data-ng-submit="create()">
<section data-ng-include="'/modules/albums/views/form.html'"></section>
<input type="submit" class="btn btn-primary" value="Add Album">
</form>
</section>
Form Partial
<fieldset class="well">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="album.name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="name">Album Picture</label>
<div class="controls">
<input type="text" data-ng-model="album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="releaseDate">Release Date</label>
<div class="controls">
<input type="date" data-ng-model="album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="sku">SKU</label>
<div class="controls">
<input type="text" data-ng-model="album.sku" id="sku" class="form-control" placeholder="SKU" required>
</div>
</div>
</fieldset>
change: <section data-ng-include="'/modules/albums/views/form.html'"></section>
to: <section data-ng-include src="'/modules/albums/views/form.html'"></section>
As I see, you do it right. What you may left is you need to define $scope.album on the $scope before use it on child scope.
$scope.album = {}; // set it on your AlbumsController
I have the same problem with you, in my solution, I used parent scope to bind data at child view. Like this:
<fieldset class="well">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="name">Album Picture</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="releaseDate">Release Date</label>
<div class="controls">
<input type="date" data-ng-model="$parent.album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="sku">SKU</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.sku" id="sku" class="form-control" placeholder="SKU" required>
</div>
</div>
</fieldset>
It's ugly, but work's good for me.