Giving different ID to dynamically created button in jQuery

Giving different ID to dynamically created button in jQuery - javascript

I am trying to create a set of textboxes using jQuery and give them ids. I need give id only textboxes.
It doesn't have to be the same ids I gave right now, there may be other. I couldn't figure out how. Is there can any help?
var cT = '<hr>';
cT += ' <div id="divMessageProfile"></div>';
cT += ' <div class="form-group" id="modalStockAdd" >';
cT += ' <div class="row">'
cT += ' <div class="col-lg-9 col-sm-9" >';
cT += ' <label class="pull-left">Barkod No</label> ';
cT += ' </div >';
cT += ' <div class="col-lg-3 col-sm-3" >';
cT += ' <label class="pull-left">Adet</label> ';
cT += ' </div >';
cT += ' </div >';
cT += ' <div class="row">'
cT += ' <div class="col-lg-9 col-sm-9" >';
cT += ' <input type="text" id="txtBarkod" class="form-control border-input" placeholder="Barkod No Giriniz"> ';
cT += ' </div >';
cT += ' <div class="col-lg-3 col-sm-3" >';
cT += ' <input type="text" id="txtPiece" class="form-control border-input pull-left" placeholder="Adet Giriniz"> ';
cT += ' </div >';
cT += ' </div >';
cT += ' </div >';
jQuery(document).on('click', '#btnContinue', function () {
$('#modalStockAdd').append(
' <div class="col-lg-9 col-sm-9" >'
+ ' <label class="pull-left">Barkod No</label> '
+ ' </div >'
+ ' <div class="col-lg-3 col-sm-3" >'
+ ' <label class="pull-left">Adet</label> '
+ ' </div >'
+ ' </div >'
+ ' <div class="row">'
+ ' <div class="col-lg-9 col-sm-9" >'
+ ' <input type="text" id="txtBarkod" class="form-control border-input" placeholder="Barkod No Giriniz"> '
+ ' </div >'
+ ' <div class="col-lg-3 col-sm-3" >'
+ ' <input type="text" id="txtPiece" class="form-control border-input pull-left" placeholder="Adet Giriniz"> '
+ ' </div > '
)
});

If i understadn you right this will do the job for you just adapt it for your html
var number = 0;
$('button').on("click", function(){
var html = '<p>number '+number+'</p>'
$('#message').append(html);
number++
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Append</button>
<div id="message"></div>

Related

How to change the dev position?

In my browsers Firefox and Chrome I don't get any errors or warnings. It's just practice. I'm taking a course in javascript and Dynamic HTML. If anybody cares to look at my code and tell me what I'm doing wrong I'd appreciate it. There's got to be something that I'm not getting right.
I want to create new divs as the page loads. These divs will appear as an ordered group that changes depending upon external data from a JSON file. I will need to do this with a for a loop because there are over 100 divs needed.
HTML:
<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new group</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
$('#addFilter').click(function () {
count++;
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-4 mb-3">'+
'<label for="name">Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="latin">Latin</label>'+
'<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="field">Select a field</label>'+
'<select id="field" class="form-select" name="filters['+count+'][field]">'+
'<option value="1">CheckBox</option>'+
'<option value="2">Color</option>'+
'</select>'+
'</div>'+
'</div>'+
'<div id="showGroups"> '+
'</div>'+
'<div class="w-100 text-center">'+
'<p>Add new subgroup.</p>'+
'<a onclick="addChildFilter()" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
'<i class="fas fa-plus"></i>'+
'</a>'+
'</div>'+
'</div>';
$('#showFilters').append(html);
});
function addChildFilter() {
count++;
let selectedField = $('#field').val();
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
$('#showGroups').append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
$('#showGroups').append(html);
}
}
</script>
</body>
</html>

Fixed all of your issues in the above demo. Click Run code snippet to see.
The issue is you don't use dynamic element id to render.
For example, in function addChildFilter(), you still use the id of the first groups $('#field').val(). You should dynamic it too.
So I add an id for each groups: id="group' + count + '". And then, I can easy to query the field value in any groups by let selectedField = $('#group' + groupId).find('.field').first().val();
And we also have to spend the new HTML into right group by $('#group' + groupId).find('.showGroups').append(html);.
In all cases we dynamic add/remove HTML. You should use class, or use element Id with a specific number for eachs.
<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new group</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
$('#addFilter').click(function () {
count++;
let html = '<div id="group' + count + '" class="position-relative">'+
'<div class="row">'+
'<div class="col-md-4 mb-3">'+
'<label for="name">Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="latin">Latin</label>'+
'<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="field">Select a field</label>'+
'<select class="form-select field" name="filters['+count+'][field]">'+
'<option value="1">CheckBox</option>'+
'<option value="2">Color</option>'+
'</select>'+
'</div>'+
'</div>'+
'<div id="showGroups" class="showGroups"> '+
'</div>'+
'<div class="w-100 text-center">'+
'<p>Add new subgroup.</p>'+
'<a onclick="addChildFilter('+count+')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
'<i class="fas fa-plus"></i>'+
'</a>'+
'</div>'+
'</div>';
$('#showFilters').append(html);
});
function addChildFilter(groupId) {
let selectedField = $('#group' + groupId).find('.field').first().val();
console.log(selectedField);
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
$('#group' + groupId).find('.showGroups').append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
$('#group' + groupId).find('.showGroups').append(html);
}
}
</script>
</body>
</html>

The problem with your code is that you're adding the same code with elements with the same id, so when you're selecting one with $('#showGroups') it will go from top to bottom on the html and find the first one.
So what I did was adding a new variable called group that will keep the count of the group number, and assigned it along the id and send it on your addChildFilter method.
You can check the solution here: (Also note that you'll have the same problem with other id's like the $('#field') one you have there.
<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new group</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
let group = 0;
$('#addFilter').click(function() {
count++;
group++;
let html = '<div class="position-relative">' +
'<div class="row">' +
'<div class="col-md-4 mb-3">' +
'<label for="name">Name</label>' +
'<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
'</div>' +
'<div class="col-md-4 mb-3">' +
'<label for="latin">Latin</label>' +
'<input type="text" id="latin" class="form-control" name="filters[' + count + '][latin]">' +
'</div>' +
'<div class="col-md-4 mb-3">' +
'<label for="field">Select a field</label>' +
'<select id="field" class="form-select" name="filters[' + count + '][field]">' +
'<option value="1">CheckBox</option>' +
'<option value="2">Color</option>' +
'</select>' +
'</div>' +
'</div>' +
'<div id="showGroups' + group + '"> ' +
'</div>' +
'<div class="w-100 text-center">' +
'<p>Add new subgroup.</p>' +
'<a onclick="addChildFilter(' + group + ')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">' +
'<i class="fas fa-plus"></i>' +
'</a>' +
'</div>' +
'</div>';
$('#showFilters').append(html);
});
function addChildFilter(group) {
count++;
let selectedField = $('#field').val();
if (selectedField == 1) {
let html = '<div class="w-100">' +
'<div class="col-md-4 mb-3 position-relative">' +
'<label for="name">Check Box Name</label>' +
'<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
'</div>' +
'</div>';
$('#showGroups' + group).append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">' +
'<div class="row">' +
'<div class="col-md-6 mb-3">' +
'<label for="name">Color Name</label>' +
'<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
'</div>' +
'<div class="col-md-6 mb-3">' +
'<label for="code">Code Color</label>' +
'<input type="text" id="code" class="form-control jscolor" name="filters[' + count + '][code]">' +
'</div>' +
'</div>' +
'</div>';
$('#showGroups').append(html);
}
}
</script>
</body>
</html>

<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new form</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
$('#addFilter').click(function () {
count++;
let html = '<div id="group' + count + '" class="position-relative">'+
'<div class="row">'+
'<div class="col-md-4 mb-3">'+
'<label for="name">Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="latin">Latin</label>'+
'<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="field">Select a field</label>'+
'<select class="form-select field" name="filters['+count+'][field]">'+
'<option value="1">CheckBox</option>'+
'<option value="2">Color</option>'+
'</select>'+
'</div>'+
'</div>'+
'<div id="showGroups" class="showGroups"> '+
'</div>'+
'<div class="w-100 text-center">'+
'<p>Add new box.</p>'+
'<a onclick="addChildFilter('+count+')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
'<i class="fas fa-plus"></i>'+
'</a>'+
'</div>'+
'</div>';
$('#showFilters').append(html);
});
function addChildFilter(groupId) {
let selectedField = $('#group' + groupId).find('.field').first().val();
console.log(selectedField);
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
$('#group' + groupId).find('.showGroups').append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
$('#group' + groupId).find('.showGroups').append(html);
}
}
</script>
</body>
</html>

replace <a onclick="addChildFilter()" to onclick="addChildFilter(this)"
and replace your function addChildFilter() to this:
function addChildFilter(e) {
count++;
let element = $(e).parents('.position-relative').find('#showGroups');
let selectedField = $('#field').val();
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
element.append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
element.append(html);
}
}

How to align form fileds in JavaScript?

I've built a form in php which has a bit of JavaScript code. I have mentor 1 in php and then mentor 2 onwards is in JavaScript. I want mentor 2 fileds to have same layout as mentor 1.
Here's the code:
<div class="container">
<div id="id_of_div_to_hide" class="form-group col-md-6" style="display: none">
</br></br>
<div class="container">
<div class=”row”>
<h1>Mentor #1</h1>
<div class="form-group col-md-6">
<label for="lengthinresearch">Length of time in Research</label>
<input type="text" class="form-control" id="lengthinreseasrch" name="lengthinresearch" required>
</div>
<div class="form-group col-md-6">
<p><b>Type of Research</b></p>
<input type="checkbox" name="basic" value="basic">
<label for="basic">Basic</label><br>
<input type="checkbox" name="clinical" value="clinical">
<label for="clinical">Clinical</label><br>
</div>
<div class="form-group col-md-6">
<label for="researchinstitution">Research Institution</label>
<input type="text" class="form-control" id="researchinstitution" name="researchinstitution" required>
</div>
<div class="form-group col-md-6">
<label for="researchmentor">Research Mentor</label>
<input type="text" class="form-control" id="researchmentor" name="researchmentor" required>
</div>
</div>
</div>
.
<div class="container">
<h1>Mentor's Contact Information</h1>
<div class="form-group col-md-6">
<label for="mentorsphone1">Mentor's Phone </label>
<input type="text" class="form-control" id="mentorsphone1" name="mentorsphone1" required>
</div>
<div class="form-group col-md-6">
<label for="mentorsemail1">Mentor's Email </label>
<input type="email" class="form-control" id="mentorsemail1" name="mentorsemail1" required>
</div>
<div class="form-group col-md-6">
<label for="describeresearch1">Describe your research in 1-2 sentences </label>
<input type="text" class="form-control" id="describeresearch1" name="describeresearch1" maxlength="50" required>
</div>
</div>
<button type="button" class="btn btn-default" onClick="addSite()">Add Mentor</button>
<button type="button" class="btn btn-default" onClick="removeSite()">Remove Mentor</button>
<input type="hidden" value="1" id="total_sites">
<script>
function addSite() {
var new_total_sites = parseInt($('#total_sites').val()) + 1;
if ($('#total_sites').val() >= 4) {
$('button:contains("Add Mentor")').prop('disabled', true);
}
var new_label= "<label id='new_label9_" + new_total_sites
+ "'><h1>Mentor #"+ new_total_sites +"</h1></label><br>";
var new_site_label =
" <div class='form-row'><div class='container'> <div class='form-group col-md-6'><label id='new_label1_'" + new_total_sites
+ "'>Length of Time in Research: </label></div></div></div>";
var new_site_input = "<div class='form-row'><div class='container'> <div class='form-group col-md-6'><input id='new_site_"
+ new_total_sites
+ "' type='text' class='form-control' list='sites' name='time[]'></div></div></div>";
var new_slot_label = "<div class='form-row'><div class='container'> <div class='form-group col-md-6'><label id='new_label2_ " + new_total_sites
+ "'>Research Institution</label></div></div></div>";
var new_slot_input = "<div class='form-row'><div class='container'> <div class='form-group col-md-6'><input class='form-control' id='new_slot_"
+ new_total_sites + "' name='institution[]'></div></div></div>";
var new_research_label = "<div class='form-row'><div class='container'> <div class='form-group col-md-6'><label id='new_label3_" + new_total_sites
+ "'>Research Mentor</label></div></div></div>";
var new_research_input = "<div class='form-row'><div class='container'> <div class='form-group col-md-6'><input class='form-control' id='new_research_"
+ new_total_sites + "' name='mentor[]'></div></div></div>";
var new_form_group_label= "<label id='new_label4_" + new_total_sites
+ "'>Type of Research</label><br>";
var new_basic_label = "<input type='checkbox' name='basic1[]' id='checkbox1" + new_total_sites +"' value='basic'><label for='basic' id='basic"+ new_total_sites +"'>Basic</label></br>";
var new_clinical_label = "<input type='checkbox' name='basic1[]' id='checkbox2" + new_total_sites +"' value='clinical'><label for='basic' id='basic"+ new_total_sites +"'>Clinical</label></br>"
var new_form_label= "<label id='new_label5_" + new_total_sites
+ "'><h1>Mentor's Contact Information</h1></label>";
var new_mentor_label = "<label id='new_label6_" + new_total_sites
+ "'>Mentor's Phone</label>";
var new_mentor_input = "<input class='form-control col-md-6' id='new_mentor_"
+ new_total_sites + "' name='phone[]'></br>";
var new_mentoremail_label ="<label id='new_label7_" + new_total_sites
+ "'>Mentor's Email</label>";
var new_mentoremail_input = "<input class='form-control col-md-6' id='new_mentoremail_"
+ new_total_sites + "' name='email[]'></br>";
var new_describeresearch_label = "<label id='new_label8_" + new_total_sites
+ "'>Describe your research</label></div>";
var new_describeresearch_input = "<input class='form-control col-md-6' id='new_describeresearch_"
+ new_total_sites + "' name='describeresearch[]'></br></div></div>";
$('#new_site').append(new_label);
$('#new_site').append(new_site_label);
$('#new_site').append(new_site_input);
$('#new_site').append(new_slot_label);
$('#new_site').append(new_slot_input);
$('#new_site').append(new_research_label);
$('#new_site').append(new_research_input);
$('#new_site').append(new_form_group_label);
$('#new_site').append(new_basic_label);
$('#new_site').append(new_clinical_label);
$('#new_site').append(new_form_label);
$('#new_site').append(new_mentor_label);
$('#new_site').append(new_mentor_input);
$('#new_site').append(new_mentoremail_label);
$('#new_site').append(new_mentoremail_input);
$('#new_site').append(new_describeresearch_label);
$('#new_site').append(new_describeresearch_input);
$('#total_sites').val(new_total_sites)
}
function removeSite() {
var last_total_site = $('#total_sites').val();
if (last_total_site > 1) {
$('#new_label9_' + last_total_site).remove('');
$('#new_label1_' + last_total_site).remove('');
$('#new_site_' + last_total_site).remove('');
$('#new_label2_' + last_total_site).remove('');
$('#new_slot_' + last_total_site).remove('');
$('#new_label3_' + last_total_site).remove('');
$('#new_research_' + last_total_site).remove('');
$('#new_label4_' + last_total_site).remove('');
$('#basic' + last_total_site).remove('');
$('#clinical' + last_total_site).remove('');
$('#checkbox1' + last_total_site).remove('');
$('#checkbox2' + last_total_site).remove('');
$('#new_label5_' + last_total_site).remove('');
$('#new_label6_' + last_total_site).remove('');
$('#new_mentor_' + last_total_site).remove('');
$('#new_label7_' + last_total_site).remove('');
$('#new_mentoremail_' + last_total_site).remove('');
$('#new_label8_' + last_total_site).remove('');
$('#new_describeresearch_' + last_total_site).remove('');
$('#total_sites').val(last_total_site - 1);
}
}
</script>
I'm very new to JavaScript. I want the mentor 2 onwards should have same look as mentor 1. Right now mentor 2 onwards has fields below each other. I want them to be one beside another like two fileds on one line and other two fileds on other as mentor 1.

How to put input value in card-title and card-text

I'm new from scripting world so sorry for my bad factory code.
I'm trying to make appear the input value in "card title" and "card-text" of my "cards" variable
Here is the code:
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>
<script>
$(document).ready(function(){
$("#create").click(function(){
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title"></h5>' +
'<p class="card-text"></p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
</script>
Thanks everyone for the help!

You can achieve that in the way like this:
$(document).ready(function() {
$("#create").click(function() {
let cards =
'<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
`<h5 class="card-title">${$('#input1').val()}</h5>` +
`<p class="card-text">${$('#input2').val()}</p>` +
'<button class="btn btn-primary">Go somewhere</button>' +
"</div>" +
"</div>";
$(document.body).append(cards);
})

Try with the following:
$(document).ready(function() {
$("#create").click(function() {
var cardtitle = $('#input1').val();
var cardtext = $('#input2').val();
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+cardtitle+'</h5>' +
'<p class="card-text">'+cardtext+'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
Demo
$(document).ready(function() {
$("#create").click(function() {
var cardtitle = $('#input1').val();
var cardtext = $('#input2').val();
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+cardtitle+'</h5>' +
'<p class="card-text">'+cardtext+'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>

$(document).ready(function(){
$("#create").click(function(){
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+ $('#input1').val() +'</h5>' +
'<p class="card-text">'+ $('#input2').val() +'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});

Not working HTML table rows from jQuery append()

How to create rows in tables by append() that still be able to operate with math operations?
Now I have row in HTML including netto price, amount, discount, tax rate and brutto price - brutto price is shown after input netto and amount, tax is selected from , but it's working only for HTML generated row, not for jQuery append. How to fix it?
HTML
<table class="table table-striped table-bordered" id="invoice">
<thead>
<tr>
<th class="col-xs-0">Lp.</th>
<th class="col-xs-4">Towar/usługa</th>
<th class="col-xs-1">PKWiU</th>
<th class="col-xs-1">Ilość</th>
<th class="col-xs-1">Jedn.</th>
<th class="col-xs-1">Cena netto</th>
<th class="col-xs-1">Rabat</th>
<th class="col-xs-2">VAT</th>
<th class="col-xs-1">Cena brutto</th>
</tr>
</thead>
<tbody>
<tr>
<th><p class="form-control-static">1.</p></th>
<td>
<div class="form-group input-sm">
<input type="text" name="product[]" class="form-control" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="pkwiu[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="quantity[]" class="form-control quantity" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="unit[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="nettoprice[]" class="form-control nettoprice" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="discount[]" class="form-control discount">
</div>
</td>
<td>
<div class="form-group">
<div class="col-xs-12">
<select class="form-control vatrate" name="vatrate[]" form="invoice">
<option value="0">zw.</option>
<option value="1.00">0%</option>
<option value="1.05">5%</option>
<option value="1.08">8%</option>
<option value="1.23" selected>23%</option>
</select>
</div>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">
</div>
</td>
</tr>
</tbody>
</table>
jQuery
var x = 2;
$("#addProduct").click(function(){
$row = '<tr>' +
'<th>'+x+'.</th>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="product[]" class="form-control" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="pkwiu[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="quantity[]" class="form-control quantity" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="unit[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="nettoprice[]" class="form-control nettoprice" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="discount[]" class="form-control discount">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group">' +
'<div class="col-xs-12">' +
'<select class="form-control vatrate" name="vatrate[]" form="invoice">' +
'<option value="0">zw.</option>' +
'<option value="1.00">0%</option>' +
'<option value="1.05">5%</option>' +
'<option value="1.08">8%</option>' +
'<option value="1.23" selected>23%</option>' +
'</select>' +
'</div>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">' +
'</div>' +
'</td>' +
'</tr>';
$('#invoice > tbody:last').append($row);
x=x+1;
});
$("#deleteProduct").click(function(){
$("tbody > tr:last").remove();
if(x > 1) {
x = x - 1;
}
});
$('select').on('change', function () {
var vat = this.selectedOptions[0].value;
console.log(vat);
});
$(":input").on('input', function(){
var $tr = $(this).closest("tr");
var netto = parseFloat($tr.find('.nettoprice').val()),
quantity = parseFloat($tr.find('.quantity').val()),
vat = parseFloat($tr.find('.vatrate').val()),
discount = parseFloat($tr.find('.discount').val());
if(isNaN(discount)) {
discount = 1;
} else {
discount = discount / 100;
discount = 1 - discount;
}
if(vat == 0 || vat == -1) {
vat = 1;
}
var v = '';
console.log(netto, quantity, vat, discount);
if(!isNaN(netto) && !isNaN(vat) && !isNaN(quantity)) {
v = netto * quantity * discount * vat;
v = v.toFixed(2);
}
$tr.find('.bruttoprice').val(v.toString());
});

Remove the last or make it :last-child:
$('#invoice > tbody').append($row);
$('#invoice > tbody:last-child').append($row);

Either remove the :last from it:
$('#invoice > tbody').append($row);
or use it with .after() with the :last tr of the table:
$('#invoice > tbody tr:last').after($row);

Okay, I found mistake - function works fine now.
$(document).on('input', ':input', function(){
/* Foo */
});

How to set option value dynamically using jquery/javascript

I want to set option value dynamically using Jquery/Javascript.I am explaining my work flow with code below.
index.html:
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload=function(){
getYears();
}
function getYears() {
var dropdown = document.getElementById("txtPassingYear");
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
</script>
<script type="text/javascript">
function GetDynamicTextBox(value, value1, value2) {
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id=$(objId).closest('select');
console.log('id is',id);
getYears();
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>
In this above code first time after page load user is getting 3 fields i.e-Qualification,College,Passing year fields and the the years in drop down list is coming properly.When user is clicking on + button again another set of 3 fields is generating and in this section user is not getting any year in drop down list.Please help me to add years dynamically in dropdown list which is coming after clicked on + button.Please help me.

We have implemented the code for you. Id for the element is unique and for this we have created a dynamic id counter. Whenever you add the textboxes it will assign new id to select drop down and assign the year option to it.
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload=function(){
getYears();
}
function getYears() {
var dropdown = document.getElementById("txtPassingYear");
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
function getYearsOther() {
var dropdown = document.getElementById("txtPassingYear" + counter);
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
</script>
<script type="text/javascript">
var counter = 0;
function GetDynamicTextBox(value, value1, value2) {
counter++;
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear' + counter + '" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id=$(objId).closest('select');
console.log('id is',id);
getYearsOther();
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>

You could try this code
function getYears() {
var $dropdown =$('#txtPassingYear');
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
$dropdown.append($('<option>', {
value: i,
text: i
}));
}
}
CODE AFTER EDIT**
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload = function () {
var $dropdown = $('#txtPassingYear');
getYears($dropdown);
}
function getYears(element) {
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
element.append($('<option>', {
value: i,
text: i
}));
}
}
</script>
<script type="text/javascript">
var selectId=1;
function GetDynamicTextBox(value, value1, value2) {
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear' + selectId + '" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
selectId++;
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id = $(objId).closest('select');
console.log('id is', id);
var $dropdown = $('#txtPassingYear' + selectId);
getYears($dropdown);
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Giving different ID to dynamically created button in jQuery - javascript

Related

How to change the dev position?

How to align form fileds in JavaScript?

How to put input value in card-title and card-text

Not working HTML table rows from jQuery append()

How to set option value dynamically using jquery/javascript

Categories

Resources