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.
Related
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>
pushData = [];
//+ button when clicked
function myFunction() {
var custOfficeId = document.getElementById('customOfficeId').value;
var custOfficeName = $("#customOfficeId option:selected").text();
var fromDate = document.getElementById('fromDate').value;
var toDate = document.getElementById('toDate').value;
var consignmentNo = document.getElementById('consignmentNo').value;
var selectionName = "A";
var selectionId = 1;
var selecOff = {
custOfficeId,
custOfficeName,
fromDate,
toDate,
consignmentNo,
selectionId,
selectionName
};
console.log(selecOff);
pushData.push(selecOff);
console.log(pushData);
populateSelectionCustomTable();
}
function populateSelectionCustomTable() {
$("#tempTable tbody").html("");
for (var i = 0; i < pushData.length; i++) {
var r = pushData[i];
$("#tempTable tbody")
.append(
"<tr>" +
"<td>" +
r.custOfficeName +
"</td><td>" +
r.fromDate +
"</td><td>" +
r.toDate +
"</td>" +
"<td>" +
r.consignmentNo +
"</td>" +
"<td>" +
r.selectionName +
"</td>" +
"<td>" +
"<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
i +
"' class='deleteIcon'/>" +
"</td></tr></tbody>");
}
}
<!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>
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required
name="customOfficeId" >
<option value="" disabled selected>Choose</option>
<option value=1>Office 1</option>
<option value=2>Office 2</option>
</select>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate"
onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate"
name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo"
required name="consignmentNo">
</div>
<div class="col-md-1">
<button onclick="myFunction()">+</button>
</div>
</div>
<table class="table table-bodered" id="tempTable">
<thead>
<th>Custom Office</th>
<th>From Date</th>
<th>To Date</th>
<th>Consignment No</th>
<th>Selection Name</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have added the "required" attribute in each of the input field and in select options above in html.But if i even didn't enter any data and click plus button it is getting pushed in table rather it should show me the validation required error. In "select" also i added the required field but the default is getting added in table automatically.How can i make this html5 required validation working here?
You can use checkValidity() to check if the fields in a form are valid.
https://www.w3schools.com/js/js_validation_api.asp
pushData = [];
//+ button when clicked
function myFunction() {
var custOfficeId = document.getElementById('customOfficeId').value;
var custOfficeName = $("#customOfficeId option:selected").text();
var fromDate = document.getElementById('fromDate').value;
var toDate = document.getElementById('toDate').value;
var consignmentNo = document.getElementById('consignmentNo').value;
var selectionName = "A";
var selectionId = 1;
var selecOff = {
custOfficeId,
custOfficeName,
fromDate,
toDate,
consignmentNo,
selectionId,
selectionName
};
console.log(selecOff);
if (document.getElementById("new-row").checkValidity()) {
pushData.push(selecOff);
console.log(pushData);
populateSelectionCustomTable();
} else {
alert('New row data is invalid or incomplete');
}
}
function populateSelectionCustomTable() {
$("#tempTable tbody").html("");
for (var i = 0; i < pushData.length; i++) {
var r = pushData[i];
$("#tempTable tbody")
.append(
"<tr>" +
"<td>" +
r.custOfficeName +
"</td><td>" +
r.fromDate +
"</td><td>" +
r.toDate +
"</td>" +
"<td>" +
r.consignmentNo +
"</td>" +
"<td>" +
r.selectionName +
"</td>" +
"<td>" +
"<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
i +
"' class='deleteIcon'/>" +
"</td></tr></tbody>");
}
}
<!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="new-row">
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required name="customOfficeId">
<option value="" disabled selected>Choose</option>
<option value=1>Office 1</option>
<option value=2>Office 2</option>
</select>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate" name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo" required name="consignmentNo">
</div>
</form>
<div class="col-md-1">
<button onclick="myFunction()">+</button>
</div>
</div>
<table class="table table-bodered" id="tempTable">
<thead>
<th>Custom Office</th>
<th>From Date</th>
<th>To Date</th>
<th>Consignment No</th>
<th>Selection Name</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have a simple form that adds an extra row of fields on the click of
a green button.
I would like a 2nd red button to appear to the right of the green button
after the the green button is clicked for the 1st time.
I would like this red button to remove the most recent row of fields
added every time it is clicked
i would like for the red button to disappear when all added rows
have been removed.
Can anyone help me with this? I'm not very experienced with javascript or jquery obviously.
The code is as follows:
test.php
<form role="form">
<h3>
Band Details
<small>Enter each band name and primary contact information...</small>
</h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button type="submit" class="btn btn-primary pull-right" align="right">Submit</button>
</div>
</div>
</div>
</form>
Javascript:
var band_i = 0;
function addNewBandRow() {
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row"><div class = "col-md-3"><input type="text" class="form-control" id="newBandName' + band_i + '" name="newBandName' + band_i + '" placeholder="Enter Band Name"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryContact' + band_i + '" name="primaryContact' + band_i + '" placeholder="Enter Name"/></div> <div class="col-md-3"><input type="email" class="form-control" id="primaryEmail' + band_i + '" name="primaryEmail' + band_i + '" placeholder="Enter Email"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryPhone' + band_i + '" name="primaryPhone' + band_i + '" placeholder="Enter Phone #"/></div></div><br>';
document.getElementById('newBandRows').appendChild(bandDiv);
}
Tested Copy
<html>
<head>
<script>
var band_i = 0;
var click = 0;
function addNewBandRow() {
click++;
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row"><div class = "col-md-3"><input type="text" class="form-control" id="newBandName' + band_i + '" name="newBandName' + band_i + '" placeholder="Enter Band Name"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryContact' + band_i + '" name="primaryContact' + band_i + '" placeholder="Enter Name"/></div> <div class="col-md-3"><input type="email" class="form-control" id="primaryEmail' + band_i + '" name="primaryEmail' + band_i + '" placeholder="Enter Email"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryPhone' + band_i + '" name="primaryPhone' + band_i + '" placeholder="Enter Phone #"/></div></div><br>';
document.getElementById('newBandRows').appendChild(bandDiv);
if (click === 1) {
var rmDiv = document.createElement('div');
rmDiv.innerHTML = '<div id="remove">Remove</div>';
document.getElementById('remover').appendChild(rmDiv);
}
}
function removeNewBandRow() {
var container = document.getElementById("newBandRows")
var children = container.childNodes;
container.removeChild(children[children.length - 1]);
//console.log(children.length);
if (children.length === 3) {
var redbutton = document.getElementById("remover");
redbutton.parentNode.removeChild(redbutton);
}
}
</script>
</head>
<body>
<form role="form">
<h3>
Band Details
<small>Enter each band name and primary contact information...</small>
</h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div id="remover" onClick="removeNewBandRow();" ></div>
<div class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button type="submit" class="btn btn-primary pull-right" align="right">Submit</button>
</div>
</div>
</div>
</form>
</body>
</html>
At a high level, here are the steps you will need to implement:
Generate the HTML for the new red button.
This new red button will be hidden and unhidden based on a condition.
Example:
if (condition) {
$('#secondRedButton').hide();
} else {
$('#secondRedButton').show();
}
http://api.jquery.com/hide/
Bind an event handler to the "click" JavaScript event
Example:
$('#secondRedButton').click(function() {
// do something
});
https://api.jquery.com/click/
Please let me know if this helps.
You might as well use simple hiding statements as this:
var band_i = 0;
function addNewBandRow(con){
var e = con.getAttribute('name');
var c = document.getElementById('delBtn');
if(e == 'addRowBtn'){
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row" id="' + band_i + '"><div class = "col-md-3"><input type="text" class="form-control" id="newBandName' + band_i + '" name="newBandName' + band_i + '" placeholder="Enter Band Name"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryContact' + band_i + '" name="primaryContact' + band_i + '" placeholder="Enter Name"/></div> <div class="col-md-3"><input type="email" class="form-control" id="primaryEmail' + band_i + '" name="primaryEmail' + band_i + '" placeholder="Enter Email"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryPhone' + band_i + '" name="primaryPhone' + band_i + '" placeholder="Enter Phone #"/></div></div><br>';
document.getElementById('newBandRows').appendChild(bandDiv);
if(band_i != 0){
c.style.display = 'block';
}
}
}
function removeBandRow(con){
var e = con.getAttribute('name');
var c = document.getElementById('delBtn');
if(e == 'delRowBtn'){
var container = document.getElementById("newBandRows")
var nodes = container.childNodes;
container.removeChild(nodes[nodes.length - 1]);
band_i--;
if(band_i == 0)
c.style.display = 'none';
}
}
And modify buttons using this attributes.
<div class="col-md-1">
<button type="button" name="addRowBtn" class="btn btn-success pull-left" onClick="addNewBandRow(this);">+</button>
<button type="button" name="delRowBtn" id="delBtn" class="btn btn-danger pull-left" onClick="removeBandRow(this);" style='display:none' >-</button>
</div>
This should work for removing last child.
function removeBandRow(){
var container = document.getElementById("newBandRows")
var children = container.childNodes;
container.removeChild(children[children.length - 1]);
}
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 */
});
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>