why dynamically added fields not removing by clicking remove button? - javascript

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>

Related

How to add 2 new input from 1 button?

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>

proplem in jquery when creating inputs cannot create a limit for the created elements

I am trying to create inputs with jquery when user click on specific button as i create the inputs i want them to stop creating if the number of inputs exceeds 10
and here is the code
<script>
$(document).ready(function(){
var inputs = $('.product-options').length;
var max_inputs = 15;
var i=inputs;
var number = inputs;
if(inputs < 2){
$('.add_field_button').click(function(e){
e.preventDefault();
number++
i++;
$('.form-product').append('<span id="row'+i+'" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childen'+number+'"'+'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice'+number+'"'+ 'value="" placeholder="option price"></div> </div> <div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childsrb'+number+'"'+'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
});
}
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
number--
i--;
});
});
</script>
html code
<div class="form-group product-option">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 product-option">
<button type="button" class="add_field_button on-hover" style="background: none; border:none;">
<i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
<label for="option">Product options</label><br>
<div class="form-group product-option form-product">
</div>
</div>
</div>
You can use an if statement to check whether i is smaller than 11:
$(document).ready(function() {
var inputs = $('.product-options').length;
var max_inputs = 15;
var i = inputs;
var number = inputs;
if (inputs < 2) {
$('.add_field_button').click(function(e) {
e.preventDefault();
number++
i++;
if (i < 11) {
$('.form-product').append('<span id="row' + i + '" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childen' + number + '"' + 'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice' + number + '"' + 'value="" placeholder="option price"></div> </div> <div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childsrb' + number + '"' + 'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
}
});
}
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
number--
i--;
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group product-option">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 product-option">
<button type="button" class="add_field_button on-hover" style="background: none; border:none;">
<i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
<label for="option">Product options</label><br>
<div class="form-group product-option form-product">
</div>
</div>
</div>

Edit and Delete buttons are not working in form how to fix it

The code is incorrect for edit button when click on edit button it has to show the data of person which we clicked, and delete button also has to delete the selected person's data can't solve this issue buttons are not working properly give some advice how to fix it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wizard form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/form.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min
.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
//css
.nav-item{width:160px;text-align: center;}
h2 {text-align: center; text-transform: uppercase;font-weight: bold}
li a :hover{}
.tab-content{display: none;}
.tab-content.active{display: block}
.next{padding: 5px 10px;border: 1px solid grey;
border-radius: 5px;
float: right;
text-align: center;
font-weight: 700;
cursor: pointer;}
.prev{padding: 5px 10px;border: 1px solid grey;
border-radius: 5px;
float: left;
text-align: center;
font-weight: 700;
cursor: pointer;}
.next:hover{background-color: #ccc}
.prev:hover{background-color: #ccc}
.wrap{padding:200px 30px 0 30px;}
table{width:100%}
tr{width:100%;}
tr th{width:8%; text-align:center; font-size:12px; border-bottom: 1px solid grey }
tr td{width:8%; text-align:center; font-size:12px; }
java script jquery started
<script> // variables used
var tab_id;
var id=0;
var fnm;
var lnm;
var gen;
var mail;
var num;
var dob;
var sport;
var about;
var tcn;
var target;
var edit;
var count;
$(document).ready(function () {
$(".next").click(function () { //click function for next button
count = $(this).attr('data-tab');
show_form(count);
fnm = $("#fname").val();
lnm = $("#lname").val();
gen = $("input[name='gender']:checked").val();
mail = $("#mail").val();
num = $("#number").val();
dob = $("#dob").val();
});
$(".prev").click(function () {
count = $(this).attr('data-tab');
show_form(count);
});
function show_form(count) {
tab_id = count;
$('li a').removeClass('active');
$('.tab-content').hide();
$("." + tab_id).addClass("active");
$("#" + tab_id).show();
}
function reset() {
$("#fname").val("");
$("#lname").val("");
$("input[name='gender']").prop("checked", false);
$("#mail").val(" ");
$("#number").val(" ");
$("#dob").val("");
$("#sport").val("");
$("#about").val("");
$("#tc").prop("checked", false);
console.log(id, fnm, lnm, gen, mail, num, dob, sport, about, tcn);
}
$("#sbmt").click(function () {
if ($('#tc').is(":checked")) {
tcn = "agree";
} else {
tcn = "disagree";
}
sport = $("#sport").val();
about = $("#about").val();
tab_data();
reset();
});
function tab_data() {
id++;
var data_dlt = "<button class='next delete'>delete</button>";
var data_edt = "<a class='edit next' data-tab='tab1'>edit</a>";
$("table").append("<tr>" + "<td id='uid'>" + id + "</td>" + "<td>" + fnm + "</td>" + "<td>" + lnm + "</td>" +
"<td>" + gen + "</td>" + "<td>" + mail + "</td>" + "<td>" + num + "</td>" + "<td>" + dob + "</td>" +
"<td>" + sport + "</td>" + "<td>" + about + "</td>" + "<td>" + tcn + "</td>" + "<td>" + data_edt + "</td>" + "<td>" + data_dlt + "</td>" + "</tr>");
$(".edit").click(function () {
count = $(this).attr('data-tab');
show_form(count);
edit = ($(this).index());
console.log(edit);
$("#fname").val(fnm);
$("#lname").val(lnm);
$("input[name='gender']").prop("checked", false);
$("#mail").val(mail);
$("#number").val(num);
$("#dob").val(dob);
$("#sport").val(sport);
$("#about").val(about);
$("#tc").prop("checked", false);
console.log(id, fnm, lnm, gen, mail, num, dob, sport, about, tcn);
});
$("#del").click(function () {
target = $("td button .delete").index(this);
console.log(target);
});
}
})
</script>
HTML with Bootstrap
<div class="container clearfix" style="padding:30px 20%;">
<h2>Wizard Form</h2>
<br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link tab1 active" data-tab="tab1" >STEP 1</a>
</li>
<li class="nav-item">
<a class="nav-link tab2" data-tab="tab2" >STEP 2</a>
</li>
<li class="nav-item">
<a class="nav-link tab3" data-tab="tab3">STEP 3</a>
</li>
</ul>
<!-- Tab panes -->
<div id="tab1" class=" tab-pane tab-content active"><br>
<form>
<div class="form-group row">
<label for="fname" class="col-sm-3 col-form-label">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="fname" placeholder="Enter first name">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-3 col-form-label">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lname" placeholder="Enter last name">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-3 pt-0">Gender:</legend>
<div class="col-sm-8">
<div class="form-check">
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</div>
</div>
</div>
</fieldset>
<div>
<a data-tab="tab2" class="next" >SAVE & NEXT</a>
</div>
</form>
</div>
<div id="tab2" class="tab-pane tab-content"><br>
<form action="#" method="post">
<div class="form-group row">
<label for="mail" class="col-sm-3 col-form-label">Email:</label>
<div class="col-sm-8">
<input id="mail" type="email" placeholder="Enter Email" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="number" class="col-sm-3 col-form-label">Contact No:</label>
<div class="col-sm-8">
<input id="number" type="text" placeholder="Enter contact number" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="dob" class="col-sm-3 col-form-label">Date Of Birth: </label>
<div class="col-sm-8">
<input id="dob" type="text" placeholder="dd/mm/yyyy" class="form-control">
</div>
</div>
<div style="margin-top:20px;">
<a data-tab="tab1" class=" prev">PREVIOUS</a>
<a data-tab="tab3" class=" next">SAVE & NEXT</a>
</div>
</form>
</div>
<div id="tab3" class="tab-pane tab-content"><br>
<form action="#" methos="post">
<div class="form-group row">
<label for="sport" class="col-sm-3 col-form-label"> Favourite Sport</label>
<div class="col-sm-8">
<select id="sport" class="form-control">
<option selected></option>
<option >Cricket</option>
<option >Tennis</option>
<option >Soccer</option>
<option >Hockey</option>
<option >Wrestling</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="about" class="col-sm-3 col-form-label">About Yourself</label>
<div class="col-sm-8">
<textarea class="form-control" id="about" rows="1"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<input type="checkbox" id="tc" value="agree">
<label for="tc" class=" col-form-label" >I agree to Terms & Conditions</label>
</div>
</div>
<a data-tab="tab2 " class="prev">PREVIOUS</a>
<a class="next " data-tab="tab1" id="sbmt" >submit</a>
</form>
</div>
</div>
<div class="wrap">
<table>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Email</th>
<th>Contact no </th>
<th>DOB</th>
<th>sports</th>
<th>About </th>
<th>T&C</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</table>
</div>
</body>
</html>
Replace
var data_dlt = "<button class='next delete'>delete</button>";
With
var data_dlt = "<button class='next delete' id='del' name='del'>delete</button>";

How to get values of dynamic id in Javascript?

As i'm new to javascript i'm struggling to to get input values of dynamically generated id.
var i = 0;
function addRow() {
var div = document.createElement('div');
div.className = 'rTableRow';
div.id = 'Taxrow' + i;
div.innerHTML =
'<div class="rTableCell"><input type="text" name="product'+i+'" id="product'+i+'" placeholder="Product Name"></div>\
<div class="rTableCell"><input type="text" name="price'+i+'" id="price'+i+'" placeholder="Item Price"></div>\
<div class="rTableCell"><input type="text" name="qty'+i+'" id="qty'+i+'" onchange="subTotal();" placeholder="Item Quantity"></div>\
<div class="rTableCell"><input type="text" name="tax'+i+'" id="tax'+i+'" onkeyup="Total();" placeholder="Tax Percentage"></div>\
<div class="rTableCell"><input name="subtotal'+i+'" type="text" id="subtotal'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="salestax'+i+'" type="text" id="salestax'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="gtotal'+i+'" type="text" id="gtotal'+i+'" size="10" disabled></div>\
<input type="button" value="-" onclick="removeRow(this)">';
document.getElementById('dyncalc').appendChild(div);
i=i+1;
}
function removeRow(input) {
document.getElementById('dyncalc').removeChild(input.parentNode);
}
/*
function setValue(node){
var price = document.getElementById(node.value).value;
//alert(price);
}​
*/
function subTotal() {
/* var price = document.getElementById('price[i]').value;
var qty = document.getElementById('qty[i]').value;*/
var price = document.TaxCalculator.price.value;
var qty = document.TaxCalculator.qty.value;
var productPrice = price * qty;
document.TaxCalculator.subtotal.value = productPrice.toFixed(2);
return productPrice;
}
function Total() {
var subtotal = subTotal();
var stax = (document.TaxCalculator.tax.value) / 100 ;
tax = subtotal * stax ;
document.TaxCalculator.subtotal.value = subtotal.toFixed(2);
document.TaxCalculator.salestax.value = tax.toFixed(2);
var gtotal = subtotal + tax;
document.TaxCalculator.gtotal.value = gtotal.toFixed(2);
}
.taxCalculator h3{
text-align: center;
text-transform: uppercase;
padding: 10px;
color: #ffffff;
}
.rTable { display: table; }
.rTableRow { display: table-row; }
.rTableHeading { display: table-header-group; }
.rTableBody { display: table-row-group; }
.rTableFoot { display: table-footer-group; }
.rTableCell, .rTableHead { display: table-cell; }
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Tax Calculator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="taxCalculator">
<div class="container">
<p></p>
<div class="card">
<h3 style="text-align: center;" class="card-header bg-info">Tax Caluculator </h3>
<p></p>
<div class="form-group d-flex justify-content-center">
<form action="" name="TaxCalculator" id="TaxCalculator" class="form-inline">
<div class="rTable" id="dyncalc">
<div class="rTableRow">
<div class="rTableHead"><input type="button" class="btn btn-info" value="AddItems" onclick="addRow()"></div>
</div>
<div class="rTableRow">
<div class="rTableHead"><label for="product" >Product Name</label></div>
<div class="rTableHead"><label for="price" >Price</label></div>
<div class="rTableHead"><label for="qty" >Item Qty</label></div>
<div class="rTableHead"><label for="tax" >Tax Percentage (%) </label></div>
<div class="rTableHead"><label for="subtotal" >Sub Total: </label></div>
<div class="rTableHead"><label for="salestax" >Tax :</label></div>
<div class="rTableHead"><label for="gtotal" >Grand Total: </label></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I want to get the input values of Taxrow[i] id . I tired onchange and var price = document.TaxCalculator.price[i].value; I know, I made something wrong.
and also I used document.getElementById(node.value).value using onchange(getValue.this)
help me to achieve this.
You can make the functions Total and Subtotal have a parameter : Total(i) . Then generate the html to call the functions like this :
div.innerHTML =
'<div class="rTableCell"><input type="text" name="product'+i+'" id="product'+i+'" placeholder="Product Name"></div>\
<div class="rTableCell"><input type="text" name="price'+i+'" id="price'+i+'" placeholder="Item Price"></div>\
<div class="rTableCell"><input type="text" name="qty'+i+'" id="qty'+i+'" onchange="subTotal('+ i +');" placeholder="Item Quantity"></div>\
<div class="rTableCell"><input type="text" name="tax'+i+'" id="tax'+i+'" onkeyup="Total('+ i +');" placeholder="Tax Percentage"></div>\
<div class="rTableCell"><input name="subtotal'+i+'" type="text" id="subtotal'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="salestax'+i+'" type="text" id="salestax'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="gtotal'+i+'" type="text" id="gtotal'+i+'" size="10" disabled></div>\
<input type="button" value="-" onclick="removeRow(this)">';

I am having trouble with validation and form wizard

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>

Categories