We Keep Coding

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>

How to get data from a form which is written in inner HTML?

This is my code, here I want to access data from the textfields, how can I access them
This is my javascript function to add new form eevrytime add button is clicked
function elementAppender() {
if (count <= 5) {
let element = document.createElement('div');
element.id = `${count}`
Here, the code from which I have to get data is written in inner html
element.innerHTML = `<div class="col-md-6 mx-auto my-5" id="myDiv">
<div class="kumite-form">
<button type="button" class="close col-md-2" data-dismiss="form" style="color: coral; float: right;" onclick="remdiv(), count-=1">×</button>
<form action="#" class="mx-auto">
<h3 style="text-align: left;margin-left:10%">Group ${count}</h3>
<ul>
<li>
<div class="text-center">
Category:
<input class="" type="radio" name="category" value="female" style="font-size: 0.5px;">
<label>Male</label>
<input class="" type="radio" name="category" value="male" style="font-size: 0.5px;">
<label>Female</label>
</div>
</li>
<h4 style="text-align: left;margin-left:10%">Player 1</h4>
<li><input type="text" placeholder="Player 1 Name"></li>
<input type="text" placeholder="Date of Birth" onfocus="(this.type='date')"
onblur="(this.type='text')">
<li><input type="Number" placeholder="Weight (in kg)"></li>

The "value" property in JS comes in handy.
var myInput = document.querySelector("#idOfField").value

Create a canvasjs on submit on a dynamically generated element

NEW to javascript, jquery, and CanvasJS!
Here's my problem:
As you can notice, I'm going to submit a bunch of data with ajax. Since some don't exist, I'm gonna attach the event onsubmit, to make it works.
Now, my problem is the chart: I'm using CanvasJS to create my chart, and right before the code to make it happens, I created a div dynamically with the id chartContainer, and right after I will initiate the cart with the function CanvasJS.Chart().
The problem is that, if I create the div in the html file, the code will work, but if I will create the div in the script, the code will fail because:
CanvasJS Error: Chart Container with id "chartContainer" was not found.
How can I overcome the problem?
$(document).ready(function() {
$(document).on('submit', 'form', function(event) {
$.ajax({
type: 'POST',
url: $(this).attr("action"),
data: $(this).serialize(),
dataType: 'json',
encode: true
}).done(function(data) {
var result = data.kg / Math.pow((data.centimeter / 100), 2);
var result3 = result.toFixed(2);
var result2 = '<div class="results">' + result.toFixed(2);
result2 += '<div id="clickhere">back</div>';
if (result > 25) {
result2 += '<div>Your should loose at least the 5% of your weight</div>'
} else if (result > 18.5) {
result2 += '<div>Your weight is ideal</div>'
} else {
result2 += '<div>You\'re underweight, you should take integrate your diet with different food and eat more often</div>'
}
result2 += '<div id="chartContainer"></div>'
var gauge = {
title: {
text: "BMI"
},
data: {
y: result3
},
maximum: 30
};
var chart = new CanvasJS.Chart("chartContainer");
createGauge(chart);
function createGauge(chart) {
gauge.unoccupied = {
y: gauge.maximum - gauge.data.y,
color: "#e3e3e3",
toolTipContent: null,
highlightEnabled: false,
click: function() {
gauge.unoccupied.exploded = true;
}
}
gauge.data.click = function() {
gauge.data.exploded = true;
};
if (!gauge.data.color)
gauge.data.color = "#6b58f2";
gauge.valueText = {
text: gauge.data.y.toString(),
verticalAlign: "center"
};
var data = {
type: "doughnut",
dataPoints: [{
y: gauge.maximum,
color: "transparent",
toolTipContent: null
},
gauge.data,
gauge.unoccupied
],
};
if (!chart.options.data)
chart.options.data = [];
chart.options.data.push(data);
if (gauge.title) {
chart.options.title = gauge.title;
}
if (!chart.options.subtitles)
chart.options.subtitles = [];
chart.options.subtitles.push(gauge.valueText);
chart.render();
}
result2 += '</div>';
var clickhere = $('#clickhere');
var form = $('form');
$('form').replaceWith(result2);
$(document).on("click", "#clickhere", function() {
$('.results').remove();
});
});
event.preventDefault();
});
});
<form action="/send.php" id="formid" method="post">
<div class="row">
<div class="col-md-4">
<div class="row">
<h3 class="col-md-9">Height</h3>
<p class="switch col-md-3">cm</p>
</div>
<div class="antbits-bmi-form_section_layer antbits-bmi-metric">
<div>
<label for="antbits-bmi-cm" class="antbits-bmi-form_section_label">Centimetres</label>
<input class="form-control" id="antbits-bmi-cm" aria-describedby="antbits-bmi-form_height-error" alt="height, centimeters" inputmode="numeric" type="text" step="0.1" min="0" maxlength="5" name="centimeter" placeholder="cm" required="">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<h3 class="col-md-9">Weight</h3>
<p class="col-md-3 switch">st, lb</p>
</div>
<div class="antbits-bmi-form_section_layer antbits-bmi-imperial">
<div>
<label for="antbits-bmi-kg" class="antbits-bmi-form_section_label">Kg</label>
<input class="form-control" id="antbits-bmi-kg" placeholder="Kg" alt="kg" type="text" inputmode="numeric" min="0" maxlength="2" name="kg" required="">
</div>
</div>
</div>
<div class="col-md-4">
<h3>Age</h3>
<div class="antbits-bmi-form_section_inner">
<div>
<label for="antbits-bmi-age" class="antbits-bmi-form_section_label antbits-accessible_hidden">Age in years</label>
<select class="form-control" id="age" name="age" required=""></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Sex<small>?</small></h3>
<div class="info hide">
<h3>Sex<small>?</small></h3>
<p>For children, BMI centile is gender specific. For both children and adults, we give more personalised information based on whether you are male or female.</p>
</div>
<div class="radio-click row height">
<div class="radio-inline col-md-6 checked" id="male">
<input type="radio" name="optradio" value="male">Male
</div>
<div class="radio-inline col-md-6" id="female">
<input type="radio" name="optradio" value="female">Female
</div>
</div>
</div>
<div class="col-md-4">
<h3>Ethnic Group (optional)<small>?</small></h3>
<div class="info hide">
<h3>Ethnic</h3>
<p>Black, Asian and other minority ethnic groups with a BMI of 23 or more have a higher risk of getting type 2 diabetes and other long term illnesses.</p>
</div>
<select class="form-control" id="antbits-bmi-ethnicity" alt="Ethnic group" name="ethnic" required="">
<option disabled selected value class="antbits-bmi-form_option">Not stated</option>
<option value="2" class="antbits-bmi-form_option">White</option>
<option value="3" class="antbits-bmi-form_option">Black Caribbean</option>
<option value="4" class="antbits-bmi-form_option">Black African</option>
<option value="5" class="antbits-bmi-form_option">Indian</option>
<option value="6" class="antbits-bmi-form_option">Pakistani</option>
<option value="7" class="antbits-bmi-form_option">Bangladeshi</option>
<option value="8" class="antbits-bmi-form_option">Chinese</option>
<option value="9" class="antbits-bmi-form_option">Middle Eastern</option>
<option value="10" class="antbits-bmi-form_option">Mixed</option>
<option value="11" class="antbits-bmi-form_option">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Activity Level</h3>
<p>So we can personalize your results</p>
<div class="slidercontainer">
<input type="range" min="0" max="150" value="75" class="slider" id="myRange" name="range">
<div class="row center height activity">
<div class="col-md-4">
<p>Inactive</p>
</div>
<div class="col-md-4">
<p>Moderate Active</p>
</div>
<div class="col-md-4">
<p>Active</p>
</div>
</div>
<div class="row center height">
<div class="col-md-4">
<p>Less than 30 minutes a week</p>
</div>
<div class="col-md-4">
<p>Between 30 and 60 minutes a week</p>
</div>
<div class="col-md-4">
<p>Between 60 and 150 minutes a week</p>
</div>
</div>
<p>Value: <span id="demo"></span></p>
</div>
</div>
</div>
<!-- <div id="chartContainer"></div> -->
<div class="center">
<input type="submit" value="Calculate">
</div>
</form>

Append the div to the document before calling the chart.
You need to move
result2 += '</div>';
var clickhere = $('#clickhere');
var form = $('form');
$('form').replaceWith(result2);
to right before
var chart = new CanvasJS.Chart("chartContainer");
createGauge(chart);
You can even more the function outside as well. It is not needed inside the document.ready
And this
$(document).on("click", "#clickhere", function() {
$('.results').remove();
});
does not belong in the .done either
Here is a better version
function createGauge(chart) {
gauge.unoccupied = {
y: gauge.maximum - gauge.data.y,
color: "#e3e3e3",
toolTipContent: null,
highlightEnabled: false,
click: function() {
gauge.unoccupied.exploded = true;
}
}
gauge.data.click = function() {
gauge.data.exploded = true;
};
if (!gauge.data.color)
gauge.data.color = "#6b58f2";
gauge.valueText = {
text: gauge.data.y.toString(),
verticalAlign: "center"
};
var data = {
type: "doughnut",
dataPoints: [{
y: gauge.maximum,
color: "transparent",
toolTipContent: null
},
gauge.data,
gauge.unoccupied
],
};
if (!chart.options.data)
chart.options.data = [];
chart.options.data.push(data);
if (gauge.title) {
chart.options.title = gauge.title;
}
if (!chart.options.subtitles)
chart.options.subtitles = [];
chart.options.subtitles.push(gauge.valueText);
chart.render();
}
$(function() {
$(document).on("click", "#clickhere", function() {
$('.results').remove();
});
$(document).on('submit', 'form', function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr("action"),
data: $(this).serialize(),
dataType: 'json',
encode: true
}).done(function(data) {
var result = data.kg / Math.pow((data.centimeter / 100), 2);
var result3 = result.toFixed(2);
var result2 = '<div class="results">' + result.toFixed(2);
result2 += '<div id="clickhere">back</div>';
if (result > 25) {
result2 += '<div>Your should loose at least the 5% of your weight</div>'
} else if (result > 18.5) {
result2 += '<div>Your weight is ideal</div>'
} else {
result2 += '<div>You\'re underweight, you should take integrate your diet with different food and eat more often</div>'
}
result2 += '<div id="chartContainer"></div>'
result2 += '</div>';
var form = $('form');
$('form').replaceWith(result2);
var gauge = {
title: {
text: "BMI"
},
data: {
y: result3
},
maximum: 30
};
var chart = new CanvasJS.Chart("chartContainer");
createGauge(chart);
});
});
});
<form action="/send.php" id="formid" method="post">
<div class="row">
<div class="col-md-4">
<div class="row">
<h3 class="col-md-9">Height</h3>
<p class="switch col-md-3">cm</p>
</div>
<div class="antbits-bmi-form_section_layer antbits-bmi-metric">
<div>
<label for="antbits-bmi-cm" class="antbits-bmi-form_section_label">Centimetres</label>
<input class="form-control" id="antbits-bmi-cm" aria-describedby="antbits-bmi-form_height-error" alt="height, centimeters" inputmode="numeric" type="text" step="0.1" min="0" maxlength="5" name="centimeter" placeholder="cm" required="">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<h3 class="col-md-9">Weight</h3>
<p class="col-md-3 switch">st, lb</p>
</div>
<div class="antbits-bmi-form_section_layer antbits-bmi-imperial">
<div>
<label for="antbits-bmi-kg" class="antbits-bmi-form_section_label">Kg</label>
<input class="form-control" id="antbits-bmi-kg" placeholder="Kg" alt="kg" type="text" inputmode="numeric" min="0" maxlength="2" name="kg" required="">
</div>
</div>
</div>
<div class="col-md-4">
<h3>Age</h3>
<div class="antbits-bmi-form_section_inner">
<div>
<label for="antbits-bmi-age" class="antbits-bmi-form_section_label antbits-accessible_hidden">Age in years</label>
<select class="form-control" id="age" name="age" required=""></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Sex<small>?</small></h3>
<div class="info hide">
<h3>Sex<small>?</small></h3>
<p>For children, BMI centile is gender specific. For both children and adults, we give more personalised information based on whether you are male or female.</p>
</div>
<div class="radio-click row height">
<div class="radio-inline col-md-6 checked" id="male">
<input type="radio" name="optradio" value="male">Male
</div>
<div class="radio-inline col-md-6" id="female">
<input type="radio" name="optradio" value="female">Female
</div>
</div>
</div>
<div class="col-md-4">
<h3>Ethnic Group (optional)<small>?</small></h3>
<div class="info hide">
<h3>Ethnic</h3>
<p>Black, Asian and other minority ethnic groups with a BMI of 23 or more have a higher risk of getting type 2 diabetes and other long term illnesses.</p>
</div>
<select class="form-control" id="antbits-bmi-ethnicity" alt="Ethnic group" name="ethnic" required="">
<option disabled selected value class="antbits-bmi-form_option">Not stated</option>
<option value="2" class="antbits-bmi-form_option">White</option>
<option value="3" class="antbits-bmi-form_option">Black Caribbean</option>
<option value="4" class="antbits-bmi-form_option">Black African</option>
<option value="5" class="antbits-bmi-form_option">Indian</option>
<option value="6" class="antbits-bmi-form_option">Pakistani</option>
<option value="7" class="antbits-bmi-form_option">Bangladeshi</option>
<option value="8" class="antbits-bmi-form_option">Chinese</option>
<option value="9" class="antbits-bmi-form_option">Middle Eastern</option>
<option value="10" class="antbits-bmi-form_option">Mixed</option>
<option value="11" class="antbits-bmi-form_option">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Activity Level</h3>
<p>So we can personalize your results</p>
<div class="slidercontainer">
<input type="range" min="0" max="150" value="75" class="slider" id="myRange" name="range">
<div class="row center height activity">
<div class="col-md-4">
<p>Inactive</p>
</div>
<div class="col-md-4">
<p>Moderate Active</p>
</div>
<div class="col-md-4">
<p>Active</p>
</div>
</div>
<div class="row center height">
<div class="col-md-4">
<p>Less than 30 minutes a week</p>
</div>
<div class="col-md-4">
<p>Between 30 and 60 minutes a week</p>
</div>
<div class="col-md-4">
<p>Between 60 and 150 minutes a week</p>
</div>
</div>
<p>Value: <span id="demo"></span></p>
</div>
</div>
</div>
<!-- <div id="chartContainer"></div> -->
<div class="center">
<input type="submit" value="Calculate">
</div>
</form>

How to show the JSON data into dynamic input text fields?

I have a JSON data coming through AJAX GET method is:The JsonData is stored in var trDataSecondTable and displayed when I did console.log(trDataSecondTable).
{
"assessCatAmount":[
{
"assessmentNo":1,
"assessmentType":"PRE",
"assessCatId":1,
"assessReason":"A",
"assessAmount":1,
"assessPenalty":2,
"entryBy":"PCS",
"rStatus":"1"
},
{
"assessmentNo":1,
"assessmentType":"PRE",
"assessCatId":1,
"assessReason":"D",
"assessAmount":3,
"assessPenalty":4,
"entryBy":"PCS",
"rStatus":"1"
},
{
"assessmentNo":1,
"assessmentType":"PRE",
"assessCatId":2,
"assessReason":"B",
"assessAmount":5,
"assessPenalty":6,
"entryBy":"PCS",
"rStatus":"1"
},
{
"assessmentNo":1,
"assessmentType":"PRE",
"assessCatId":2,
"assessReason":"E",
"assessAmount":7,
"assessPenalty":8,
"entryBy":"PCS",
"rStatus":"1"
},
{
"assessmentNo":1,
"assessmentType":"PRE",
"assessCatId":3,
"assessReason":"C",
"assessAmount":9,
"assessPenalty":10,
"entryBy":"PCS",
"rStatus":"1"
},
{
"assessmentNo":1,
"assessmentType":"PRE",
"assessCatId":3,
"assessReason":"F",
"assessAmount":10,
"assessPenalty":10,
"entryBy":"PCS",
"rStatus":"1"
}
]
}
My form looks like this which is dynamic type (can be added by clicking "+" or can be deleted by pressing "-")
My form when page is loaded first looks like :
I need to show these six JSON data into this form.If there is three JSON data then there should be three row total along with data.If there is twelve json data then twelve row needs to appear along with data in input field.
function sumIt() {
$("#formContainer [type=number]").each(function() {
var $row = $(this).closest(".row");
var $fields = $row.find("[type=number]");
var val1 = $fields.eq(0).val();
var val2 = $fields.eq(1).val();
var tot = (isNaN(val1) ? 0 : +val1) + (isNaN(val2) ? 0 : +val2)
$row.find(".sum").text(tot);
});
var total = 0;
$(".sum").each(function() {
total += isNaN($(this).text()) ? 0 : +$(this).text()
});
$("#tot").text(total);
return total;
}
$(".customs-table .remove:lt(1)").hide();
$(".vat-table .remove:lt(1)").hide();
$(".excise-table .remove:lt(1)").hide();
$("#formContainer").on("click", "button", function() {
var selector = "div.row";
var $div = $(this).closest(selector);
if ($(this).is(".add")) {
var $newDiv = $div.clone();
$newDiv.find(":input").val(""); // clear all
$newDiv.find("[type=number]").val(0); // clear numbers
$newDiv.find(".sum").text(0); // clear total
$newDiv.insertAfter($div)
}
else {
$div.remove();
sumIt();
}
$(".customs-table .remove:gt(0)").show();
$(".vat-table .remove:gt(0)").show();
$(".excise-table .remove:gt(0)").show();
});
$("#formContainer").on("input", "[type=number]", sumIt);
$("form").submit(function() {
event.preventDefault();
var user_profile = [];
$(".row").each(function() {
var $fields = $(this).find(":input");
if ($fields.length > 0) {
var cat = $(this).find("div>label").eq(0).text(); // use the label of the row
var catId = ["","Customs","VAT","Excise"].indexOf(cat)
user_profile.push({
assessmentType: "PRE",
assessCatID : catId,
assessReason: $fields.eq(0).val(),
assessAmount: $fields.eq(1).val(),
assessPenalty: $fields.eq(2).val(),
assessTotal: +$fields.eq(1).val() + +$fields.eq(2).val() // the leading + makes it a number
});
}
});
console.log(user_profile);
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<form id="myForm">
<div id="formContainer" class="col-md-12" style="float: none;">
<!-- <button onclick="myFunction()" class="pull-right">+</button> -->
<div style="margin-bottom: 30px;">
<div class="form-group row">
<div class="col-md-1"></div>
<div class="col-md-4">
<label>Reason</label>
</div>
<div class="col-md-2">
<label>Amount</label>
</div>
<div class="col-md-2">
<label>Penalty</label>
</div>
<div class="col-md-1">Total</div>
<div class="col-md-2">Action</div>
</div>
<div class="customs-table row">
<div class="col-md-1">
<label>Customs</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control customReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="vat-table row">
<div class="col-md-1">
<label>VAT</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control vatReason" name="vatReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="excise-table row">
<div class="col-md-1">
<label>Excise</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control exciseReason" name="exciseReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="col-md-12 pull-right">
<label>Total:</label> <b><span id="tot">0</span></b>
</div>
</div>
<button type="submit" class="btn btn-success pull-right">Submit</button>
</div>
</form>
</body>
</html>
I tried to manipulate using the for loop but not able to show them into those dynamic field.How can i achieve this?
Updated Code:
Since there are customs,vats,excise i need their each number like 1,2.Each of their start with 1,2,3 so on.
So here is what i try:
i added customNo class.
<div class="col-md-1 customNo">
<label>Customs</label>
</div>
and to show 1,2,3 i declared 3 different variable.
var showEmpty=true;
var i=1,j=1,k=1;
$.each(data.assessCatAmount, function(_,cat) {
showEmpty = false; // there was data
var type = types[cat.assessCatId];
var $newDiv = $("#formContainer").find("."+type+"-table").eq(0).clone();
$.each(cat,function(key,value) {
$(".customNo").append("<div><label for="name"> i </label></div>");
var fieldName = key.replace("assess",type);
var $field = $newDiv.find("."+fieldName);
if ($field) $field.val(value);
i=i+1;
});
$("#formContainer").append($newDiv)
So i tried $(".customNo").append("<div><label for="name"> i </label></div>"); it is not displaying me 1,2. How can i get this?

You need to copy the clone part
var types = ["","customs","vat","excise"]; // 1,2,3 must match class names
$.each(data.assessCatAmount, function(_,cat) {
var type = types[cat.assessCatId];
var $newDiv = $("#formContainer").find("."+type+"-table").eq(0).clone(); // clone the FIRST one
$.each(cat,function(key,value) {
var fieldName = key.replace("assess",type);
var $field = $newDiv.find("."+fieldName);
if ($field) $field.val(value);
});
$("#formContainer").append($newDiv)
});
You may need to hide or fill the first 3 divs since I do not fill them, I only use them to clone from
Also move the total to the bottom like I did with the submit
var types = ["", "customs", "vat", "excise"]; // 1,2,3
function getText(str) {
return $.trim(/\s/.test(str)?str.split(/\s+/)[1]:str);
}
var data = {
"assessCatAmount": [{
"assessmentNo": 1,
"assessmentType": "PRE",
"assessCatId": 1,
"assessReason": "A",
"assessAmount": 1,
"assessPenalty": 2,
"entryBy": "PCS",
"rStatus": "1"
},
{
"assessmentNo": 1,
"assessmentType": "PRE",
"assessCatId": 1,
"assessReason": "D",
"assessAmount": 3,
"assessPenalty": 4,
"entryBy": "PCS",
"rStatus": "1"
},
{
"assessmentNo": 1,
"assessmentType": "PRE",
"assessCatId": 2,
"assessReason": "B",
"assessAmount": 5,
"assessPenalty": 6,
"entryBy": "PCS",
"rStatus": "1"
},
{
"assessmentNo": 1,
"assessmentType": "PRE",
"assessCatId": 2,
"assessReason": "E",
"assessAmount": 7,
"assessPenalty": 8,
"entryBy": "PCS",
"rStatus": "1"
},
{
"assessmentNo": 1,
"assessmentType": "PRE",
"assessCatId": 3,
"assessReason": "C",
"assessAmount": 9,
"assessPenalty": 10,
"entryBy": "PCS",
"rStatus": "1"
},
{
"assessmentNo": 1,
"assessmentType": "PRE",
"assessCatId": 3,
"assessReason": "F",
"assessAmount": 10,
"assessPenalty": 10,
"entryBy": "PCS",
"rStatus": "1"
}
]
}
function sumIt() {
$("#formContainer [type=number]").each(function() {
var $row = $(this).closest(".row");
var $fields = $row.find("[type=number]");
var val1 = $fields.eq(0).val();
var val2 = $fields.eq(1).val();
var tot = (isNaN(val1) ? 0 : +val1) + (isNaN(val2) ? 0 : +val2)
$row.find(".sum").text(tot);
});
var total = 0;
$(".sum").each(function() {
total += isNaN($(this).text()) ? 0 : +$(this).text()
});
$("#tot").text(total);
return total;
}
// data={} // test no data
function addNums(i) {
$(this).html(function() {
var text = $(this).text();
// Get the text without leading number - fake a space in case there are none yet
var type = getText(text);
var length = $("."+type.toLowerCase()+"-table").length;
return (length===1?"":i+ " ") + type; // only show numbers if more than one
});
}
function cleanUp() {
$(".customs-table .remove:gt(0)").show();
$(".vat-table .remove:gt(0)").show();
$(".excise-table .remove:gt(0)").show();
$(".customs-table.row > div > label").each(addNums);
$(".vat-table.row > div > label").each(addNums);
$(".excise-table.row > div > label").each(addNums);
}
$(function() {
$(".customs-table .remove:lt(1)").hide();
$(".vat-table .remove:lt(1)").hide();
$(".excise-table .remove:lt(1)").hide();
$("#formContainer").on("click", "button", function() {
var selector = "div.row";
var $div = $(this).closest(selector);
if ($(this).is(".add")) {
var $newDiv = $div.clone();
$newDiv.find(":input").val(""); // clear all
$newDiv.find("[type=number]").val(0); // clear numbers
$newDiv.find(".sum").text(0); // clear total
$newDiv.insertAfter($div)
} else {
$div.remove();
sumIt();
}
cleanUp();
});
$("#formContainer").on("input", "[type=number]", sumIt);
$("form").submit(function() {
event.preventDefault();
var user_profile = [];
$(".row:visible").each(function() {
var $fields = $(this).find(":input");
if ($fields.length > 0) {
var cat = getText($(this).find("div>label").eq(0).text()); // use the label of the row
var catId = types.indexOf(cat.toLowerCase())
user_profile.push({
assessmentType: "PRE",
assessCatID: catId,
assessReason: $fields.eq(0).val(),
assessAmount: $fields.eq(1).val(),
assessPenalty: $fields.eq(2).val(),
assessTotal: +$fields.eq(1).val() + +$fields.eq(2).val() // the leading + makes it a number
});
}
});
console.log(user_profile);
});
var showEmpty = true;
$.each(data.assessCatAmount, function(_, cat) {
showEmpty = false; // there was data
var type = types[cat.assessCatId];
var $newDiv = $("#formContainer").find("." + type + "-table").eq(0).clone();
$.each(cat, function(key, value) {
var fieldName = key.replace("assess", type);
var $field = $newDiv.find("." + fieldName);
if ($field) $field.val(value);
});
$("#formContainer").append($newDiv)
});
$(".customs-table").eq(0).toggle(showEmpty);
$(".vat-table").eq(0).toggle(showEmpty);
$(".excise-table").eq(0).toggle(showEmpty);
cleanUp();
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<form id="myForm">
<div id="formContainer" class="col-md-12" style="float: none;">
<!-- <button onclick="myFunction()" class="pull-right">+</button> -->
<div style="margin-bottom: 30px;">
<div class="form-group row">
<div class="col-md-1"></div>
<div class="col-md-4">
<label>Reason</label>
</div>
<div class="col-md-2">
<label>Amount</label>
</div>
<div class="col-md-2">
<label>Penalty</label>
</div>
<div class="col-md-1">Total</div>
<div class="col-md-2">Action</div>
</div>
<div class="customs-table row">
<div class="col-md-1">
<label>Customs</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control customsReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customsAmount" value="0" name="abc" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customsPenalty" value="0" name="abc" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="vat-table row">
<div class="col-md-1">
<label>VAT</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control vatReason" name="vatReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="excise-table row">
<div class="col-md-1">
<label>Excise</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control exciseReason" name="exciseReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 pull-right">
<label>Total:</label> <b><span id="tot">0</span></b>
</div>
<button type="submit" class="btn btn-success pull-right">Submit</button>
</form>
</body>
</html>

how to get radio input value that the selector gotten using find() function

I try to get value from children element that each child (item) has input fields with the same name. To do that, I used each() function. I get problem when retrieving value from radio input, I get the value from radio input that shouldn't. Here the code
<div class="accordion" id="menu-ui-sortable" role="tablist" aria-multiselectable="true">
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-1" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-1" aria-expanded="false" aria-controls="menu-item-settings-1">
<h4 class="panel-title">Menu Item 1</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Halaman Web</i>
</a>
<input type="hidden" name="menu_item_type" value="page"/>
<input type="hidden" name="menu_item_page_id" value="12"/>
<input type="hidden" name="menu_item_content_id" value=""/>
<input type="hidden" name="menu_item_url" value="www.example.com/page-12"/>
<div id="menu-item-settings-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-1">
<div class="panel-body">
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 1"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 1"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1" checked=""> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-glass"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<p class="link-to-original">Asli: <a class="a-link" href="http://wordpress.dev/new-page-page/">new page page</a></p>
<a class="item-delete danger-highlight" href="#">Hapus</a><span> | </span>
<a class="item-cancel" href="#">Cancel</a>
</div>
</div>
</div>
</div>
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-2" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-2" aria-expanded="false" aria-controls="menu-item-settings-2">
<h4 class="panel-title">Menu Item 2</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Homepage Content</i>
</a>
<input type="hidden" name="menu_item_type" value="homepage-content"/>
<input type="hidden" name="menu_item_page_id" value=""/>
<input type="hidden" name="menu_item_content_id" value="4"/>
<input type="hidden" name="menu_item_url" value="#content-4"/>
<div id="menu-item-settings-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-2">
<div class="panel-body">
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 2"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 2"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-search"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left"> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right" checked=""> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<a class="item-delete danger-highlight" id="delete-2" href="#">Hapus</a><span> | </span>
<a class="item-cancel" id="cancel-2" href="#">Cancel</a>
</div>
</div>
</div>
</div>
<div class="panel menu-item">
<a class="panel-heading collapsed" role="tab" id="heading-menu-item-3" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-3" aria-expanded="false" aria-controls="menu-item-settings-3">
<h4 class="panel-title">Menu Item 3</h4>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="item-type pull-right">Tautan Tertentu</i>
</a>
<input type="hidden" name="menu_item_type" value="custom-link"/>
<input type="hidden" name="menu_item_page_id" value=""/>
<input type="hidden" name="menu_item_content_id" value=""/>
<div id="menu-item-settings-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-3">
<div class="panel-body">
<label>URL</label>
<input type="text" class="form-control" name="menu_item_url" value="www.example.com"/>
<label>Label Navigasi</label>
<input type="text" class="form-control" name="menu_item_title" value="label 3"/>
<label>Atribut Judul</label>
<input type="text" class="form-control" name="menu_item_attr_title" value="attr 3"/>
<p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>
<label>CSS Classes/Icon</label>
<input type="text" class="form-control" name="menu_item_classes" value="fa fa-files"/>
<label>Letak CSS Classes/Icon</label>
<div class="radio">
<label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
<label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
</div>
<label class="move-button-handle">
<span>Pindahkan: </span>
Naik Satu
Turun Satu
Urutan Pertama
Urutan Terakhir
</label>
<div class="menu-item-actions submitbox">
<a class="item-delete danger-highlight" id="delete-3" href="#">Hapus</a><span> | </span>
<a class="item-cancel" id="cancel-3" href="#">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<br/>
<button id="menu-nav-action" type="submit" class="btn btn-success btn-sm">Save</button>
The js
$(document).ready(function () {
$("#menu-ui-sortable").collapse().sortable({
placeholder: "ui-sortable-placeholder",
start: function(evt, ui ){
ui.placeholder.height(ui.helper.outerHeight());
},
helper: function(evt, ui){
var $clone = $(ui).clone();
$clone .css('position','absolute');
return $clone.get(0);
}
});
$(document).on('click', '#menu-nav-action', function (evt) {
var menuNav = [];
var ctn = 0;
$("#menu-ui-sortable > div.panel.menu-item").each(function () {
var menu_item_target = $(this).find('input[name="menu_item_target"]');
var menu_item_target_ = menu_item_target.is(':checked') ? menu_item_target.val() : '0';
var menu_item_classes_position = $(this).find('input[name="menu_item_classes_position"]');
var menu_item_classes_position_ = '';
for (var i = 0, length = menu_item_classes_position.length; i < length; i++) {
if (menu_item_classes_position[i].checked) {
menu_item_classes_position_ = menu_item_classes_position[i].value;
console.log(menu_item_classes_position_);
break;
}
}
/* Using each() function not work too */
/*$(menu_item_classes_position).each(function () {
if ($(this).is(':checked')) {
menu_item_classes_position_ = $(this).val();
console.log(menu_item_classes_position_);
}
});*/
menuNav.push({
nav_label: $(this).find('input[name="menu_item_title"]').val(),
nav_title_attr: $(this).find('input[name="menu_item_attr_title"]').val(),
nav_open_new_tab: menu_item_target_,
nav_css_classes: $(this).find('input[name="menu_item_classes"]').val(),
nav_css_classes_position: menu_item_classes_position_,
nav_type: $(this).find('input[name="menu_item_type"]').val(),
nav_link: $(this).find('input[name="menu_item_url"]').val(),
nav_order: ctn});
ctn++;
});
console.log(menuNav);
alert(JSON.stringify(menuNav));
});
});
Here the output:
[
{
"nav_label":"label 1",
"nav_title_attr":"attr 1",
"nav_open_new_tab":"1",
"nav_css_classes":"fa fa-glass",
"nav_css_classes_position":"", // **this should be "left"**
"nav_type":"page",
"nav_link":"www.example.com/page-12",
"nav_order":0
},
{
"nav_label":"label 2",
"nav_title_attr":"attr 2",
"nav_open_new_tab":"0",
"nav_css_classes":"fa fa-search",
"nav_css_classes_position":"", // **this should be "right"**
"nav_type":"homepage-content",
"nav_link":"#content-4",
"nav_order":1
},
{
"nav_label":"label 3",
"nav_title_attr":"attr 3",
"nav_open_new_tab":"0",
"nav_css_classes":"fa fa-files",
"nav_css_classes_position":"left",
"nav_type":"custom-link",
"nav_link":"www.example.com",
"nav_order":2
}
]
Based the HTML, the correct value for nav_css_classes_position in each item are "left", "right", and "left".
Here the demo: jsfiddle

you are using same radio names[name="menu_item_classes_position"]for every group. Use different names for each group.
In your example, there are 3 menu items containing radio buttons wrapped in accordion. But these radio buttons are acting as a one group. that is,when you select radio button of second menu item, it will deselect radio button of first menu item.

your problem is due to this
<input type="radio" name="menu_item_classes_position" value="left" checked="checked"> Sebelah kiri label</label>
All of your radio element belongs to same group name="menu_item_classes_position" , as per the documentation of the radio input only one button of a group can be checked at a time. This is why only in menu 3 the radio button is checked. You can confirm this in your fiddle as well.
You should give each set of radio button in a menu a different name to select the correct value.