Hi i have my code here where now i would like 1 button click to add a input box to contact Name and contact No
Example of image when user click on the add more field
Currently what i have is 2 different input fields where i have hidden the button for the contact No:
Originally i am allow to press on the 2 button to display a newinput but now i would like that 1 button input appear for each new input for contact name and contact no how can i combine it?
Here my code snippet for the code
// Script on create a new input box 1 for Contact: Name
const $container1 = $('#contactContainername')
$(".remove1").eq(0).hide()
$container1.on('click', ".no", function(e) {
const add1 = $(this).is(".add1")
const $input1 = $container1.find(".contactname");
const len1 = $input1.length;
if (add1) {
const $newInput1 = $input1.eq(0).clone(true)
$newInput1.find("[name=contactname]")
.attr("id", `new_${$input1.length}`)
.val("");
$container1.append($newInput1);
$newInput1.find(".add1").remove()
$newInput1.find(".remove1").show()
// $newPhone.find(".add").hide(len>0)
} else {
$(this).closest(".contactname").remove()
}
})
// Script on create a new input box 2 for Contact: No
const $container = $('#contactContainer')
$(".remove").eq(0).hide()
$container.on('click', ".ar", function(e) {
const add = $(this).is(".add");
const $input = $container.find(".contact");
const len = $input.length;
if (add) {
const $newInput = $input.eq(0).clone(true)
$newInput.find("[name=contact]")
.attr("id", `new_${$input.length}`)
.val("");
$container.append($newInput);
$newInput.find(".add").remove()
$newInput.find(".remove").show()
// $newPhone.find(".add").hide(len>0)
} else {
$(this).closest(".contact").remove()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact Name:</label>
<div class="col-4" id="contactContainername">
<div class="flex contactname" style="margin-bottom:10px;">
<input style="margin-right: 10px; width: 200px;" id="validationcontactname" name="contactname" type="text" class="form-control" placeholder="Name" required>
<input type="button" class="no add1" value="Add More Field" style="cursor: pointer;">
<span class="no remove1"><label style="cursor: pointer; padding-top: 5px;"><i style="width: 20px; height: 20px; color: lightseagreen;"data-feather="x"></i></label></span>
</div>
</div>
</div>
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact No:</label>
<div class="col-4" id="contactContainer">
<div class="flex contact" style="margin-bottom:10px;">
<input style="margin-right: 10px; width: 200px;" id="validationcontact" name="contact" type="text" class="form-control" placeholder="9343****" pattern="\b\d{8}\b" required>
<input type="button" class="ar add" value="Add More Field" style="cursor: pointer;" hidden>
<!-- <span class="ar add"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="plus" ></i></label></span> -->
<span class="ar remove"><label style="cursor: pointer; padding-top: 5px;"><i style="width: 20px; height: 20px; color: lightseagreen;"data-feather="x"></i></label></span>
</div>
</div>
</div>
I've just changed your code,I've added onclick event to add more field button
function addMoreField() {
const $contactContainername = $('#contactContainername');
const $contactContainerNo = $('#contactContainer');
const $contactNameinput = $contactContainername.find(".contactname");
const $contactNoInput = $contactContainerNo.find(".contact");
const $newContactNameinput = $contactNameinput.eq(0).clone(true);
$newContactNameinput.find("[name=contactname]")
.attr("id", `contactNameInput_${$contactNameinput.length}`)
.val("");
$newContactNameinput.attr("id", `contactName_${$contactNameinput.length}`);
const removeButton = $newContactNameinput.find(".removeButton");
removeButton.attr("onclick", `removeField(${$contactNameinput.length})`);
removeButton.show();
const $newContactNoinput = $contactNoInput.eq(0).clone(true);
$newContactNoinput.attr("id", `contactNo_${$contactNameinput.length}`);
$newContactNoinput.find("[name=contact]")
.attr("id", `contactNoInput_${$contactNoInput.length}`)
.val("");
$contactContainername.append($newContactNameinput);
$contactContainerNo.append($newContactNoinput);
}
function removeField(id) {
if (id === 0) return;
const $contactContainername = $('#contactContainername');
const $contactContainerNo = $('#contactContainer');
const $contactNameinput = $contactContainername.find(`#contactName_${id}`);
const $contactNoinput = $contactContainerNo.find(`#contactNo_${id}`);
$contactNameinput.remove();
$contactNoinput.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" onclick='addMoreField()' class="no add1" value="Add More Field" style="cursor: pointer;">
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact Name:</label>
<div class="col-4" id="contactContainername">
<div id="contactName_0" class="flex contactname" style="margin-bottom:10px;">
<input style="margin-right: 10px; width: 200px;" id="validationcontactname" name="contactname" type="text" class="form-control" placeholder="Name" required>
<input class="removeButton" type="button" onclick='removeField(0)' value="Remove" style="cursor: pointer;display:none">
</div>
</div>
</div>
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact No:</label>
<div class="col-4" id="contactContainer">
<div id="contactNo_0" class="flex contact" style="margin-bottom:10px;">
<input style="margin-right: 10px; width: 200px;" id="validationcontact" name="contact" type="text" class="form-control" placeholder="9343****" pattern="\b\d{8}\b" required>
<input type="button" class="ar add" value="Add More Field" style="cursor: pointer;" hidden>
<!-- <span class="ar add"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="plus" ></i></label></span> -->
<span class="ar remove"><label style="cursor: pointer; padding-top: 5px;"><i style="width: 20px; height: 20px; color: lightseagreen;"data-feather="x"></i></label></span>
</div>
</div>
</div>
Related
What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).
What I am trying to do: I am trying to change ID of previously added entry or div.
Program is changing ID only once.
My javascript code:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map(student => {
var passport = student.imgLink;
return `
<div class="row" id="student-id-details" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map(student => {
return `
<div class="row" id="student-id-image" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
setTimeout(changeIds, 3000);
}
const changeIds = () => {
var oldId = document.getElementById("student-id-details");
oldId.id = "no-animation";
console.log(document.querySelectorAll("#student-id-details"));
console.log(document.querySelectorAll("#no-animation"));
}
I cannot use any library or framework for doing this task.
In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.
What can be the problem here?
My html code for reference -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
<script src="script_js.js"></script>
</body>
</html>
My css code for animation -
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#student-id-image{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#student-id-details{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
I would appreciate different solutions for achieving animations in new entries only too.
You have to apply fade-in-animation class to new entry, current logic apply animation class to all list.
I just update your code with minor changes, i hope it'll help you out. Thank You
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map((student, index) => {
var passport = student.imgLink;
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills} ${index}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map((student, index) => {
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
}
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-animation{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have a form. And I want to write an onClick function which whenever is clicked, a toast including inputs value appears at the end of the page.
here I wrote a function that produce a toast just on the first click.
function Function1() {
var y = document.getElementsByTagName("select")[0].value;
var z = document.getElementsByTagName("input")[0].value;
var x = document.getElementById("toast1");
x.innerHTML = y + " has a " + z + "<span >×</span>";
x.className = "show";
}
<form class="needs-validation" novalidate>
<h5>Select the owner?</h5>
<div class="form-group col mx-auto" style="width: 80%;">
<label for="validationDefault01" class="sr-only">households</label>
<select
class="custom-select place-holder form-control form-control-lg OwnerName"
style="font-size: 15px;"
id="validationDefault01"
style="border-radius: 2px;"
required
>
<option value="" selected hidden>Choose...</option>
<option value="Jack London"> Jack London</option>
<option value="Sarah London"> Sarah London</option>
<option value="Mike"> Mike</option>
</select>
</div>
<br />
<h5>What is the brand?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">Brand</label>
<input
class="form-control brand"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
placeholder="Brand"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5>What is the model year?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">yyyy</label>
<input
class="form-control"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
onkeypress="return CheckNumeric()"
placeholder="yyyy"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5 class="mx-2">How much is worth?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<div class="input-group-prepend">
<div
class="input-group-text font-weight-bold"
style="
font-size: 15px;
background-color: rgba(50, 157, 105, 1);
color: white;
"
>
$
</div>
</div>
<label for="validationDefault01" class="sr-only">deposite</label>
<input
type="text"
class="form-control floatNumber"
id="validationDefault01"
style="font-size: 15px;"
onkeypress="return CheckNumeric()"
onkeyup="FormatCurrency(this)"
placeholder="example: 10000"
required
/>
</div>
<p id="demo"></p>
<br />
<div class="row">
<div class="col">
<button
class="quebtn1 mx-auto"
style="width: 130px;"
type="button"
onclick="Function1()"
>
Add Vehicle
</button>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="quebtn1 float-right" type="button">Back</button>
</div>
<div class="col-6">
<button class="quebtn1" type="submit">Next</button>
<br />
</div>
<div class="row pt-0 mx-auto text-center">
<div
class="toast-body toast no-gutters"
data-autohide="false"
role="alert"
aria-live="assertive"
aria-atomic="true"
id="toast1"
></div>
</div>
</div>
</form>
But I want when user fill the form and click on "add vehicle" button to add another vehicle again and again, each time a toast including information of the previous vehicle user added, produce.
To understand why you aren't getting the results you're looking for, you have to understand the DOM. Currently, whenever the button is clicked, you are always changing the same DOM element.
var x = document.getElementById("toast1");
x.innerHTML = y + " has a " + z + "<span >×</span>";
x.className = "show";
See how you're selecting the element with the ID of toast1 and manipulating that element every time by setting its innerHTML and className?
What you want to do is create a new element, and place that new element underneath the element with the ID of toast1.
To create an new element, you would use createElement:
var newEl = document.createElement("p");
newEl.innerHTML = y + " has a " + z + "<span >×</span>";
newEl.className = "show";
And then to insert it use appendChild:
x.appendChild(newEl);
Here's the complete code:
function Function1() {
var y = document.getElementsByTagName("select")[0].value;
var z = document.getElementsByTagName("input")[0].value;
var x = document.getElementById("toast1");
var newEl = document.createElement("div");
newEl.innerHTML = y + " has a " + z + "<span >×</span>";
newEl.className = "show";
x.appendChild(newEl);
}
<form class="needs-validation" novalidate>
<h5>Select the owner?</h5>
<div class="form-group col mx-auto" style="width: 80%;">
<label for="validationDefault01" class="sr-only">households</label>
<select
class="custom-select place-holder form-control form-control-lg OwnerName"
style="font-size: 15px;"
id="validationDefault01"
style="border-radius: 2px;"
required
>
<option value="" selected hidden>Choose...</option>
<option value="Jack London"> Jack London</option>
<option value="Sarah London"> Sarah London</option>
<option value="Mike"> Mike</option>
</select>
</div>
<br />
<h5>What is the brand?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">Brand</label>
<input
class="form-control brand"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
placeholder="Brand"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5>What is the model year?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">yyyy</label>
<input
class="form-control"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
onkeypress="return CheckNumeric()"
placeholder="yyyy"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5 class="mx-2">How much is worth?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<div class="input-group-prepend">
<div
class="input-group-text font-weight-bold"
style="
font-size: 15px;
background-color: rgba(50, 157, 105, 1);
color: white;
"
>
$
</div>
</div>
<label for="validationDefault01" class="sr-only">deposite</label>
<input
type="text"
class="form-control floatNumber"
id="validationDefault01"
style="font-size: 15px;"
onkeypress="return CheckNumeric()"
onkeyup="FormatCurrency(this)"
placeholder="example: 10000"
required
/>
</div>
<p id="demo"></p>
<br />
<div class="row">
<div class="col">
<button
class="quebtn1 mx-auto"
style="width: 130px;"
type="button"
onclick="Function1()"
>
Add Vehicle
</button>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="quebtn1 float-right" type="button">Back</button>
</div>
<div class="col-6">
<button class="quebtn1" type="submit">Next</button>
<br />
</div>
<div class="row pt-0 mx-auto text-center">
<div
class="toast-body toast no-gutters"
data-autohide="false"
role="alert"
aria-live="assertive"
aria-atomic="true"
id="toast1"
></div>
</div>
</div>
</form>
Also, here are some tips that aren't directly related to your question:
There's also querySelector instead of stuff like getElementsByTagName. It lets you basically use CSS selectors to select elements, which a lot of people find easy to use.
For this sort of DOM manipulation, you also might want to try using the jQuery library
It's good to learn how DOM manipulation works for educational purposes, but on real projects the field has moved towards UI libraries like React and Vue.
You named your function Function1. This works, but it's better if you could name it something more descriptive, like addVehicle. That way it's more clear what it's doing. With one function Function1 is probably fine, but imagine if you had 12 functions and had to think to yourself, "Wait, what is Function3 doing again? Did I want to use Function7?"
It's good to learn by doing, but it's also good to mix that with a more "bottom up" approach of reading books and stuff to give you the foundation you'll need for fun projects like this.
I was looking all over for a snippet to include another input bootstrap input group and I couldn't find one so wouldn't you know it I coded one myself.
<style>
.CENTERFORM {
display: table;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- Player And Score -->
<div id="PLAYERCONTAINER">
<div class="col-9 col-md-8 CENTERFORM my-3 text-center">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">Player 1</span>
</div>
<input type="text" class="form-control" id="PLAYER_NAME">
<div class="col-3">
<input type="number" class="form-control" id="PLAYER_SCORE">
</div>
</div>
<button class="btn btn-outline-success" onclick="cloneThis(this,this.parentNode)">Another?</button>
</div>
</div>
<script>
// Autoincrement button for player names and scores
let count = 1;
function cloneThis(button, playerform) {
const clone = playerform.cloneNode(playerform);
const playerNameInput = clone.childNodes[1].childNodes[3].id = `PLAYER_NAME${count}`;
const playerScoreInput = clone.childNodes[1].childNodes[5].childNodes[1].id = `PLAYER_SCORE${count++}`;
console.log(playerScoreInput);
button.remove();
console.log("clicked");
document.getElementById('PLAYERCONTAINER').append(clone);
}
</script>
here is my code,
while adding input field by clicking add button so field will appear but after trying to remove those fields by removing button so it is not working.
$(document).ready(function() {
//#naresh action dynamic childs
var next = 0;
$("#add-more").click(function(e) {
e.preventDefault();
var addto = "#field" + next;
var addRemove = "#field" + (next);
next = next + 1;
var newIn = ' <div id="field' + next + '" name="field' + next + '"><!-- Text input--> <div class="form-group"> <div class="col-6"> <label for="vat" ></label><input type="text" placeholder="Check In Date" id="datepicker-12" name="PeriodFrom[]" class=" datepicker_recurring_start" value=""></div><div class="col-6"><label for="street" ></label><input type="text" name="PeriodTo[]" placeholder="Check Out Date" class=" datepicker_recurring_start" value=""></div></div><div class="form-group"><div class="col-6"><label for="vat" ></label><input type="text" id="DoubleBad" name="DoubleBad" placeholder="Double Bed" value=""></div><div class="col-6"><label for="street" ></label><input type="text" placeholder="Above 12 Years" id="EXTRA_ADL_ABOVE_12_YRS" name="EXTRA_ADL_ABOVE_12_YRS" value=""></div></div><div class=" form-group"> <label for="postal-code" > </label><label for="postal-code" ></label><input type="text" id="CNB" name="MaxCNB[]" value="" required="required" placeholder="Max Rate CNB"> </div> </div>';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#field" + next).attr('data-source', $(addto).attr('data-source'));
$("#count").val(next);
$('body').on('click', '.remove-me', function(e) {
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length - 1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="right-panel" class="right-panel">
<div class="content mt-3" >
<div class="animated fadeIn">
<div class="row" style="border:none;">
<div class="col-md-12">
<div class="card" >
<div class="card-header">
<div class="row" >
<i class="fa fa-hotel" style="font-size:24px;"></i>
<h4 style=" font-family: 'Ubuntu',sans-serif;margin-left:20px;"> Manage Hotels </h4>
</div>
</div>
<div class="card-body">
<form method="post" action="<?php echo base_url(); ?>Admin/Insert-Hotels">
<div class="card-body card-block">
<div class="form-group">
<div class="col-6" id="content">
<label for="vat" ></label><input type="text" id="datepicker_recurring_start" name="PeriodFrom[]" class=" datepicker_recurring_start" placeholder="Check In Date" value="" required="required">
</div>
<div class="col-6" id="content">
<label for="street" ></label><input type="text" id="datepicker-13" name="PeriodTo[]" class=" datepicker_recurring_start" placeholder="Check Out Date" value="" required="required">
</div>
</div>
<div class=" form-group">
<div class="col-6">
<label for="vat" ></label><input type="text" id="DoubleBed" name="MaxDoubleBed[]" value="" placeholder="Max Rate Double Bed" required="required">
</div>
<div class="col-6">
<label for="postal-code" ></label><input type="text" id="SigleBed" name="MaxSigleBad[]" value="" placeholder="Max Rate Sigle Bed" required="required">
</div>
</div>
<div class=" form-group">
<div class="col-6">
<label for="postal-code" ></label><input type="text" id="CNB" name="MaxCNB[]" value="" required="required" placeholder="Max Rate CNB">
</div>
<div class="col-6">
<label for="postal-code" ></label>
<select name="cityID" id="cityID" class="-md " required="required">
<option value="">Select Country and City</option>
<?php
foreach ($fatch_hotels_country as $key => $fatch_hotels_country) {
echo "<option value='".$fatch_hotels_country->id."'>".$fatch_hotels_country->citiesName."</option>";
}
?>
</select>
</div>
</div>
<div class=" form-group">
<label for="postal-code" ></label>
<label for="company" ></label><input type="text" id="HotelName" name="Star" value="" required="required" placeholder="Star">
</div>
</div>
<!----------------------------------- Add More Data Start -------------------------->
<div class=" form-group">
<div id="field">
<div id="field0">
</div>
</div >
<!----------------------------------- Add More Data End -------------------------->
</div>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-danger" value="Reset">
<input type="submit" class="btn btn-primary" value="Insert">
<button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
here you can see,
I'm trying to add input fields by clicking "add more" button right below right side.
while fields are displaying you can see "remove" button right top of dynamically added input fields.
while clicking on that button so those fields are not remove.
It seems the div id to be removed is getting wrong so
Change
var fieldNum = this.id.charAt(this.id.length - 1);
var fieldID = "#field" + fieldNum;
to
var fieldNum = +this.id.charAt(this.id.length - 1);
var fieldID = "#field" + parseFloat(fieldNum + 1);
and Add
next = fieldNum;
in $('body').on('click', '.remove-me', function(e) {
DEMO HERE
Try this
$(document).ready(function() {
//#naresh action dynamic childs
var next = 0;
$("#add-more").click(function(e) {
e.preventDefault();
var addto = "#field" + next;
var addRemove = "#field" + (next);
next = next + 1;
var newIn = ' <div id="field' + next + '" name="field' + next + '"><!-- Text input--> <div class="form-group"> <div class="col-6"> <label for="vat" ></label><input type="text" placeholder="Check In Date" id="datepicker-12" name="PeriodFrom[]" class=" datepicker_recurring_start" value=""></div><div class="col-6"><label for="street" ></label><input type="text" name="PeriodTo[]" placeholder="Check Out Date" class=" datepicker_recurring_start" value=""></div></div><div class="form-group"><div class="col-6"><label for="vat" ></label><input type="text" id="DoubleBad" name="DoubleBad" placeholder="Double Bed" value=""></div><div class="col-6"><label for="street" ></label><input type="text" placeholder="Above 12 Years" id="EXTRA_ADL_ABOVE_12_YRS" name="EXTRA_ADL_ABOVE_12_YRS" value=""></div></div><div class=" form-group"> <label for="postal-code" > </label><label for="postal-code" ></label><input type="text" id="CNB" name="MaxCNB[]" value="" required="required" placeholder="Max Rate CNB"> </div> </div>';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#field" + next).attr('data-source', $(addto).attr('data-source'));
$("#count").val(next);
});
$(document).on('click', '.remove-me', function(e) {
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length - 1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
<html><head>
<style>
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
#-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
#-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
#-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
#keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style>
</head>
<body>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="right-panel" class="right-panel">
<div class="content mt-3">
<div class="animated fadeIn">
<div class="row" style="border:none;">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row">
<i class="fa fa-hotel" style="font-size:24px;"></i>
<h4 style=" font-family: 'Ubuntu',sans-serif;margin-left:20px;"> Manage Hotels </h4>
</div>
</div>
<div class="card-body">
<form method="post" action="<?php echo base_url(); ?>Admin/Insert-Hotels">
<div class="card-body card-block">
<div class="form-group">
<div class="col-6" id="content">
<label for="vat"></label><input type="text" id="datepicker_recurring_start" name="PeriodFrom[]" class=" datepicker_recurring_start" placeholder="Check In Date" value="" required="required">
</div>
<div class="col-6" id="content">
<label for="street"></label><input type="text" id="datepicker-13" name="PeriodTo[]" class=" datepicker_recurring_start" placeholder="Check Out Date" value="" required="required">
</div>
</div>
<div class=" form-group">
<div class="col-6">
<label for="vat"></label><input type="text" id="DoubleBed" name="MaxDoubleBed[]" value="" placeholder="Max Rate Double Bed" required="required">
</div>
<div class="col-6">
<label for="postal-code"></label><input type="text" id="SigleBed" name="MaxSigleBad[]" value="" placeholder="Max Rate Sigle Bed" required="required">
</div>
</div>
<div class=" form-group">
<div class="col-6">
<label for="postal-code"></label><input type="text" id="CNB" name="MaxCNB[]" value="" required="required" placeholder="Max Rate CNB">
</div>
<div class="col-6">
<label for="postal-code"></label>
<select name="cityID" id="cityID" class="-md " required="required">
<option value="">Select Country and City</option>
<!--?php
foreach ($fatch_hotels_country as $key =--> $fatch_hotels_country) {
echo "<option value="".$fatch_hotels_country->id."">".$fatch_hotels_country->citiesName."</option>";
}
?>
</select>
</div>
</div>
<div class=" form-group">
<label for="postal-code"></label>
<label for="company"></label><input type="text" id="HotelName" name="Star" value="" required="required" placeholder="Star">
</div>
</div>
<!----------------------------------- Add More Data Start -------------------------->
<div class=" form-group">
<div id="field">
<div id="field0">
</div>
</div>
<!----------------------------------- Add More Data End -------------------------->
</div>
</form></div>
<div class="modal-footer">
<input type="reset" class="btn btn-danger" value="Reset">
<input type="submit" class="btn btn-primary" value="Insert">
<button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//#naresh action dynamic childs
var next = 0;
$("#add-more").click(function(e) {
e.preventDefault();
var addto = "#field" + next;
var addRemove = "#field" + (next);
next = next + 1;
var newIn = ' <div id="field' + next + '" name="field' + next + '"><!-- Text input--> <div class="form-group"> <div class="col-6"> <label for="vat" ></label><input type="text" placeholder="Check In Date" id="datepicker-12" name="PeriodFrom[]" class=" datepicker_recurring_start" value=""></div><div class="col-6"><label for="street" ></label><input type="text" name="PeriodTo[]" placeholder="Check Out Date" class=" datepicker_recurring_start" value=""></div></div><div class="form-group"><div class="col-6"><label for="vat" ></label><input type="text" id="DoubleBad" name="DoubleBad" placeholder="Double Bed" value=""></div><div class="col-6"><label for="street" ></label><input type="text" placeholder="Above 12 Years" id="EXTRA_ADL_ABOVE_12_YRS" name="EXTRA_ADL_ABOVE_12_YRS" value=""></div></div><div class=" form-group"> <label for="postal-code" > </label><label for="postal-code" ></label><input type="text" id="CNB" name="MaxCNB[]" value="" required="required" placeholder="Max Rate CNB"> </div> </div>';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div class="field"></div>';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#field" + next).attr('data-source', $(addto).attr('data-source'));
$("#count").val(next);
$('body').on('click', '.remove-me', function(e) {
e.preventDefault();
var fieldNum = parseInt(this.id.charAt(this.id.length - 1))+1;
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
});
</script>
<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>
I have tried to add a form wizard with validation. The main problem I am facing is the disable function of the steps doesnt work. When I click on the step numbers on top, it just goes off without any validation.
Here is my html
<div class="x_content">
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
</div>
My CSS:
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
The JS:
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
Please let me know what am I doing wrong. How can I get it to work normally.
Thanks a lot.
You are triggering the click event from allNextBtn.click(function(){.
You may consider trigger( event [, extraParameters ] ) can use extra parameters.
Taking advantage of this you may distinguish if you are triggering from the above function or from the user.
Moreover, before to remove disabled atribute for the next element:
nextStepWizard.removeAttr('disabled').trigger('click', {'isManual': true});
you need to add the disabled attribute to all (so only one will be enabled):
$('div.setup-panel div a[href^="#"]').attr('disabled', 'disabled')
My snippet:
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e, isManual) {
e.preventDefault();
//
// test if the click event is ....
//
if (($('div.setup-panel div a[disabled]').length == ($('div.setup-panel div a').length - 1)) &&
(isManual === undefined)) {
return;
}
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) {
if (nextStepWizard.index(('div.setup-panel div a')) == ($('div.setup-panel div a').length - 1)) {
//
// remove the disabled attribute to all
//
$('div.setup-panel div a[href^="#"]').removeAttr('disabled');
nextStepWizard.trigger('click', {'isManual': true});
} else {
//
// add the disabled attribute to all
//
$('div.setup-panel div a[href^="#"]').attr('disabled', 'disabled');
//
// remove disabled only for the right element
//
nextStepWizard.removeAttr('disabled').trigger('click', {'isManual': true});
}
}
});
$('div.setup-panel div a.btn-primary').trigger('click', {'isManual': true});
});
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="x_content">
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
</div>