We Keep Coding

How do I get Dynamic form Value

I try to create dynamic form that will allow user to select option and populate price automatically in input field but unfortunately it only work in first field, it does not work in another added field. please help.
Here is my code
<select class="form-control item" name="madic" id="medicine" required>
<option value="" selected >Select Madicine</option>
<?php
$query2 ="SELECT * FROM pharmacy WHERE Qty != '0'";
$result2 = $con->query($query2);
if($result2->num_rows> 0){
while($optionData1=$result2->fetch_assoc()){
$mid =$optionData1['p_id'];
$madicine =$optionData1['madicine'];
$mrate =$optionData1['mrate_price'];?>
?>
<option value="<?php echo $mid ?>" data-price=<?php echo $mrate; ?>><?php echo $madicine; ?></option>
<?php }} ?>
</select>
</div>
<div class="col col-md-2">
<input type="text" name="mrate[]" value="0" class="mrate form-control " id="mrate" readonly>
</div>
<div class="col col-md-1">
<input type="text" name="Qty[]" class="form-control Qty" value="1" id="Qty" >
</div>
<div class="col col-md-1">
<input type="text" name="mdiscount[]" class="form-control mdiscount" value="0" id="mdiscount" >
</div>
<div class="col col-md-2">
<input type="text" name="pack[]" class="form-control" placeholder="eg: Tab,box .." >
</div>
<div class="col col-md-1">
<button type="button" id="add" class="btn btn-success">+</button>
</div>
JQUERY
$('select[name="madic"]').change(mediSum);
function mediSum(){
var elemente = $('select[name="madic"]').find('option:selected');
var desc1 = Number(elemente.data("price"));
var rate2 = $('.mrate').val(desc1);
}
Here I have Appended
$(document).ready(function(){
var i = i;
$('#add').click(function(){
i++;
$('#mad').append('<div id="row'+i+'"><div class="col col-md-4"><select class="form-control medicine" name="madic[]" id="medicine" required><option value="" selected >Select Madicine</option><?php
$query2 ="SELECT * FROM pharmacy WHERE Qty != '0'";
$result2 = $con->query($query2);
if($result2->num_rows> 0){
while($optionData1=$result2->fetch_assoc()){
$mid =$optionData1['p_id'];
$madicine =$optionData1['madicine'];
$mrate =$optionData1['mrate_price'];?>
?><option value="<?php echo $mid ?>" data-price=<?php echo $mrate; ?>"><?php echo $madicine; ?></option><?php }} ?>
</select></div><div class="col col-md-2"><input type="text" name="mrate[]" value="0" class="mrate form-control " id="mrate" readonly></div><div class="col col-md-1"><input type="number" name="Qty[]" class="form-control Qty" value="1" id="Qty" ></div><div class="col col-md-1"> <input type="number" name="mdiscount[]" class="form-control discount" value="0" id="mdiscount" ></div><div class="col col-md-2"><input type="text" name="pack[]" class="form-control" placeholder="eg: Tab,box .." ></div><div class="col col-md-1"><button type="button" id="'+i+'" class="btn btn-danger remove_row">-</button></div></div>');
});
$(document).on('click','.remove_row', function(){
var row_id = $(this).attr('id');
$('#row'+row_id+'').remove();
});
});
$(document).ready(function(){
var i = i;
$('#add').click(function(){
i++;
$('#mad').append('<div id="row'+i+'"><div class="col col-md-4"><select class="form-control medicine" name="madic[]" id="medicine" required><option value="" selected >Select Madicine</option><option value="1" data-price="125">Amoxline1</option><option value="2" data-price="163">Amoxline2</option><option value="3" data-price="723">Amoxline3</option>
</select></div><div class="col col-md-2"><input type="text" name="mrate[]" value="0" class="mrate form-control " id="mrate" readonly></div><div class="col col-md-1"><input type="number" name="Qty[]" class="form-control Qty" value="1" id="Qty" ></div><div class="col col-md-1"> <input type="number" name="mdiscount[]" class="form-control discount" value="0" id="mdiscount" ></div><div class="col col-md-2"><input type="text" name="pack[]" class="form-control" placeholder="eg: Tab,box .." ></div><div class="col col-md-1"><button type="button" id="'+i+'" class="btn btn-danger remove_row">-</button></div></div>');
});
$(document).on('click','.remove_row', function(){
var row_id = $(this).attr('id');
$('#row'+row_id+'').remove();
});
});
$('select[name="madic"]').change(mediSum);
function mediSum(){
var elemente = $('select[name="madic"]').find('option:selected');
var desc1 = Number(elemente.data("price"));
var rate2 = $('.mrate').val(desc1);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--- madicine row ----->
<div class="row col col-md-12 madi" id="mad" style="display: block;">
<br>
<div class="col col-md-4">
<select class="form-control item" name="madic" id="medicine" required>
<option value="" selected >Select Madicine</option>
<option value="1" data-price="125">Amoxline1</option>
<option value="2" data-price="163">Amoxline2</option>
<option value="3" data-price="723">Amoxline3</option>
<?php }} ?>
</select>
</div>
<div class="col col-md-2">
<input type="text" name="mrate[]" value="0" class="mrate form-control " id="mrate" readonly>
</div>
<div class="col col-md-1">
<input type="text" name="Qty[]" class="form-control Qty" value="1" id="Qty" >
</div>
<div class="col col-md-1">
<input type="text" name="mdiscount[]" class="form-control mdiscount" value="0" id="mdiscount" >
</div>
<div class="col col-md-2">
<input type="text" name="pack[]" class="form-control" placeholder="eg: Tab,box .." >
</div>
<div class="col col-md-1">
<button type="button" id="add" class="btn btn-success">+</button>
</div>
</div><!-- end medicines -->
Example of what I want when user select then data-price value display in next input field even when I add another row.

When you called
$('select[name="madic"]').change(mediSum);
you have specified that all select tags existent (at the time) in the document, having the name of madic should handle change events by calling mediSum. However, when such a select is created later, it does not have this handler. So, I recommend changing your code to:
$('select[name="madic"]:not(.initialized)').change(mediSum).addClass('initialized');
So, any select tags having the name of madic that were not initialized (we know that by the fact that they don't have the initialized class yet) will be associated with the given change handler and will receive the initialized class. Now, you have a feature that dynamically adds similar select tags. Those new tags will not have the initialized class, so running the same code when the add event happens as the one suggested above should solve your issue.

Scores of students adding up on one student's total score

There is a section in my school web app that allows me to add scores for all students of a specific class at once.
I recently added some codes that automatically calculates the sum of input values with javascript.
It works fine. Problem is, scores of all students are been added up as one to just one student at the top.
Please see image below
I want each student to have their own total score.
<?php }elseif($class_id >= 15 && $class_id <= 17){ ?>
<form action="<?php echo site_url('admin/mtprimary/assigngradeActionMT') ?>" method="POST" id="formSubjectTeacher">
<?php echo $this->customlib->getCSRF(); ?>
<div class="row">
<div class="col-lg-3">
<input type="hidden" name="class" value="<?php echo $class_id; ?>">
<input type="hidden" name="subject_id" value="<?php echo $subject_id; ?>">
</div>
<div class="col-lg-4">
<h4><strong><?php echo $session_name; ?></strong></h4>
</div>
</div>
<br>
<hr>
<?php foreach($students as $student){?>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label>Student Name</label>
<input type="hidden" name="number[]" value="">
<input type="hidden" name="section_id" value="<?php echo $section_id; ?>">
<input type="hidden" name="session_id[]" value="<?php echo $student->session_id; ?>">
<input type="hidden" name="student_id[]" value="<?php echo $student->student_id; ?>">
<input type="hidden" name="class_id[]" value="<?php echo $class_id; ?>">
<input type="text" value="<?php echo $CI->GetStudentNameWithID($student->student_id); ?>" class="form-control " readonly>
</div>
</div>
<div class="col-lg-1">
<label>Test1 </label>
<input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="t2">
<label>Test2</label>
<input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="assg">
<label>Test3</label>
<input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1">
<label>Total</label>
<output id="result"></output>
</div>
</div>
<script>
const $inputs = $('input[type="number"]')
$inputs.change(function() {
var total = 0;
$inputs.each(function() {
if ($(this).val() != '') {
total += parseInt($(this).val());
}
});
$('#result').html(total);
});
</script>

As has been pointed out, you have multiple elements with an id of result which is not allowed, you should use a class of result instead. But your main problem is that you need to qualify the inputs that you sum to get the total score for a student. You can do this by finding the parent div with class row for the input which changes, and then only sum the inputs that are children of that div. You can then store the total to the result output which is a child of that div:
const $inputs = $('input[type="number"]')
$inputs.change(function() {
var total = 0;
var parent = $(this).closest('.row');
parent.find('input[type="number"]').each(function() {
if ($(this).val() != '') {
total += parseInt($(this).val());
}
});
parent.find('.result').html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label>Student Name</label>
<input type="hidden" name="number[]" value="">
<input type="hidden" name="section_id" value="1">
<input type="hidden" name="session_id[]" value="5">
<input type="hidden" name="student_id[]" value="1">
<input type="hidden" name="class_id[]" value="1">
<input type="text" value="Bill" class="form-control " readonly>
</div>
</div>
<div class="col-lg-1">
<label>Test1 </label>
<input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
<input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="t2">
<label>Test2</label>
<input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="assg">
<label>Test3</label>
<input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1">
<label>Total</label>
<output class="result"></output>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label>Student Name</label>
<input type="hidden" name="number[]" value="">
<input type="hidden" name="section_id" value="1">
<input type="hidden" name="session_id[]" value="5">
<input type="hidden" name="student_id[]" value="2">
<input type="hidden" name="class_id[]" value="1">
<input type="text" value="Mary" class="form-control " readonly>
</div>
</div>
<div class="col-lg-1">
<label>Test1 </label>
<input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
<input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="t2">
<label>Test2</label>
<input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="assg">
<label>Test3</label>
<input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1">
<label>Total</label>
<output class="result"></output>
</div>
</div>

The attribute id must be unique in a document, use class instead. First change the HTML with class.
From
<output id="result"></output>
To
<output class="result"></output>
In jQuery Change
$('#result').html(total);
To
$(this).parent().next().find('.result').text(total);
Please Note: It is good practice to use text() instead of html() if the the text is plain string (not htmlString).
I will also prefer input event instead of change to output the immediate changes by changing
$inputs.change(function() {
To
$inputs.on('input', function() {

jQuery: Adding html elements dynamically using jquery

I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.

Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');

Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>

you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>

Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>

I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});

Hide/Show multiple textfields based on select option

Im using bootstrap 4, html, css, js the lot when trying to do this.
I'm trying to show some text boxes depending on the choice of the select option.
So if I choose "adadelta" I'd like to have only 4 specific text boxes(number type) show and everything else remain hidden. Should mention that the below form in hosted in a popover window which works fine, as such I've only included the form itself.
I've tried various javascript examples for similar situations but its just not showing the text boxes even when I try document.getElementById etc.
Any suggestions would be much appreciated.
<form>
<div class="form-group">
<label for="epochEdit">Epochs:</label>
<input type="number" class="form-control" id="epochEdit">
<label for="batchEdit">Batch Size:</label>
<input type="number" class="form-control" id="batchEdit">
</div>
<div class="form-group">
<label for="optChoose">Optimizer:</label>
<select class="form-control" id="optChoose">
<option selected>Open this menu</option>
<option value="sgd">sgd</option>
<option value="adadelta">adadelta</option>
<option value="rmsprop">rmsprop</option>
<option value="adam">adam</option>
<option value="adamax">adamax</option>
<option value="adagrad">adagrad</option>
<option value="nadam">nadam</option>
</select>
</div>
<div class="form-group">
<fieldset disabled>
<div class="form-group">
<label for="disabledNote">Note:</label>
<input type="text" id="disabledNote" class="form-control" placeholder="Optimizers will use keras default values!">
</div>
</fieldset>
<label for="lr">Learning Rate:</label>
<input type="number" class="form-control" id="lr">
<label for="rho">Rho:</label>
<input type="number" class="form-control" id="rho">
<label for="epsilon">Epsilon:</label>
<input type="number" class="form-control" id="epsilon">
<label for="decay">Decay:</label>
<input type="number" class="form-control" id="decay">
<label for="b1">Beta #1:</label>
<input type="number" class="form-control" id="b1">
<label for="b2">Beta #2:</label>
<input type="number" class="form-control" id="b2">
<label for="sDecay">Schedule Decay:</label>
<input type="number" class="form-control" id="sDecay">
<label for="moment">Momentum:</label>
<input type="number" class="form-control" id="moment">
<label for="nesterov">Nesterov:</label>
<input type="checkbox" class="form-check-input" id="nesterov">
</div>
<button id="subSettings" class="bg-color-3 btn btn-info"> Submit </button>
</form>

Try this
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var el = '<label for="lr">Learning Rate:</label>\
<input type="number" class="form-control" id="lr">\
\
<label for="rho">Rho:</label>\
<input type="number" class="form-control" id="rho">\
\
<label for="epsilon">Epsilon:</label>\
<input type="number" class="form-control" id="epsilon">\
\
<label for="decay">Decay:</label>\
<input type="number" class="form-control" id="decay">\
\
<label for="b1">Beta #1:</label>\
<input type="number" class="form-control" id="b1">\
\
<label for="b2">Beta #2:</label>\
<input type="number" class="form-control" id="b2">\
\
<label for="sDecay">Schedule Decay:</label>\
<input type="number" class="form-control" id="sDecay">\
\
<label for="moment">Momentum:</label>\
<input type="number" class="form-control" id="moment">';
function select() {
var optSel = $("#optChoose").val();
appendControls(optSel);
}
function appendControls(num) {
$('#elcontainer').empty();
if (num == "adadelta") {
$('#elcontainer').append(el);
}
}
</script>
</head>
<body>
<div class="container">
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of type password:</p>
<div class="form-group">
<label for="epochEdit">Epochs:</label>
<input type="number" class="form-control" id="epochEdit">
<label for="batchEdit">Batch Size:</label>
<input type="number" class="form-control" id="batchEdit">
</div>
<div class="form-group">
<label for="optChoose">Optimizer:</label>
<select class="form-control" id="optChoose" onchange="select();">
<option value="">Open this menu</option>
<option value="sgd">sgd</option>
<option value="adadelta">adadelta</option>
<option value="rmsprop">rmsprop</option>
<option value="adam">adam</option>
<option value="adamax">adamax</option>
<option value="adagrad">adagrad</option>
<option value="nadam">nadam</option>
</select>
</div>
<div class="form-group">
<fieldset disabled>
<div class="form-group">
<label for="disabledNote">Note:</label>
<input type="text" id="disabledNote" class="form-control"
placeholder="Optimizers will use keras default values!">
</div>
</fieldset>
<div id="elcontainer"></div>
<label for="nesterov">Nesterov:</label>
<input type="checkbox" class="form-check-input" id="nesterov">
</div>
<button id="subSettings" class="bg-color-3 btn btn-info"> Submit</button>
</div>
</body>

Twitter bootstrap modal and date element

I have registration form with date element of HTML 5 (use for user b-date).
Yes, it works find but, I see some problem.
If I choose month (e.g I choose month APRIL) the modal will close and the date element left.
Thank you so much.
I have this form:
<form role="form" action="" method="post">
<input type="hidden" name="class" value="client" />
<input type="hidden" name="func" value="add" />
<div class="form-group">
<label for="recordnumber">Record Number</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="record_number" name="record_number" placeholder="Enter Record Number" required>
</div>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="fname" placeholder="Enter First Name" name="fname" required>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="lname" placeholder="Enter Last Name" name="lname" required>
</div>
<div class="form-group">
<label for="birthdate">Birth Date</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="date_birth" name="date_birth" placeholder="Enter Birth Date" required>
</div>
<div class="form-group">
<label for="deathdate">Date of Death</label>
<input type="text" autocapitalize="off" autocorrect="off" style="z-index: 10520" class="form-control" id="date_death" name="date_death" placeholder="Enter Date of Death" required>
</div>
<div class="form-group">
<label for="clinictype">Client Type</label>
<select class="form-control" name="client_type" id="client_type" required>
<option value="">Select Client Type</option>
<?php
$_data = $type->get_all('client');
if($_data!=false): foreach($_data['value'] as $data ): ?>
<option value="<?php echo $data ?>"><?php echo $data ?></option>
<?php endforeach; endif; ?>
</select>
</div>
<input style="margin-top: 20px;" type="submit" class="btn btn-success btn-default">
</form>