We Keep Coding

Appended field Issue

I am having this problem, that whenever i am trying to get value from dynamic section it is not showing anything
the html part:
<div class="modal fade" id="mcqModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Multiple Choice Question</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="mcq" action="{{ route('poll.mcq') }}" method="post">
<input type="hidden" name="poll_id" value="{{ $poll->id }}">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Question:</label>
<input type="text" class="form-control" id="mcqque" name="question[question]">
</div>
<fieldset>
<legend>Options</legend>
<ul class="addli list-group" id="allLi">
<style>
.addinp{
float:right;
width: 30%;
position: relative;
}
</style>
<button type="button" class="addinp btn btn-success float-right" onclick="newLi(this)"> Add new Field </button>
<li class="list-group-item">
<input type="checkbox" class="correct col-md-2" id="mcqcorrect" >
<input type="hidden" name = "inp correct[]" value="0">
<input type="text" class="col-md-8" name = "answers[]">
</li>
</ul>
<input type="submit" class="form btn btn-primary" value="Save">
</form>
</fieldset>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div
script:
function newLi(event){
var ul = document.getElementById('allLi');
var li = document.createElement('li');
li.className = 'list-group-item';
li.innerHTML = ' <input type="checkbox" class="correct col-md-2" id="mcqcorrect" ><input type="hidden" name = "inp correct[]" value="0"><input type="text" class="col-md-8" name = "answers[]">';
ul.appendChild(li);
}
This newLi is appending the child successfully but
second script:
$('.correct').on('click',function(){
if($(this).is(':checked')){
$('.inp').val(1);
}
else{
$('.inp').val(0);
}
});
on click on the checkbox, I want its input value to be which is working very well for the static HTML part but not for the dynamic part
please help me solve this issue
any help will be highly appreciated
Thanks in advance

When you have dynamic added fields on your page you need to change your code a little bit, because when the page is loaded at first the jquery sees only what's initially there... and if there are new elements added jquery doesn't take them in concern... so with this code you check the whole document if there is any element with that class:
$(document).on('click', '.correct', function () {
if($(this).is(':checked')){
$('.inp').val(1);
} else {
$('.inp').val(0);
}
});

dropdown-select is not showing the right value using bootstrap-select

I have some kind of trouble, actually my code should be working just fine, but there is some bug here...
eventhough I already set the value of my dropdown select, it's appearance still not changed, in my case here, the value of second dropdown-select showing the first option eventhough I set it to be the second option.. why is this happening? My first dropdown select show the value just fine though...
I use bootstrap-select 1.13.15 in my codeigniter and my browser is google chrome
here is my view
<!-- modal edit -->
<div class="modal fade" id="MoEditCP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h3 class="modal-title" id="exampleModalLabel">Edit Catatan</h3></center>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<?php echo site_url('server/updatePI');?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-form-label">Nama Pelanggar :</label><br>
<select id="anggota1" class="selectpicker" data-show-subtext="true" data-live-search="true">
<?php foreach ($daftaranggota as $dafang) { ?>
<option value="<?php echo $dafang['nim'] ?>"><?php echo $dafang['namaLengkap'] ?> - <?php echo $dafang['nim'] ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label class="col-form-label">Tanggal Pelanggaran :</label><br>
<input type="date" name="tgl1" class="form-control" id="tgl1">
</div>
<div class="form-group">
<label class="col-form-label">Sanksi Kedisiplinan :</label><br>
<select id="sd1" class="selectpicker">
<option value="Ringan">Ringan</option>
<option value="Sedang">Sedang</option>
<option value="Berat">Berat</option>
</select>
</div>
<div class="form-group">
<label class="col-form-label">Catatan Pelanggaran :</label>
<input type="text" name="cp1" class="form-control" id="cp1">
</div>
<div class="modal-footer">
<input type="hidden" name="nimPenulis1" value="<?php echo $this->session->userdata('nim') ?>" class="form-control" id="nimPenulis1">
<button type="submit" class="btn btn-success" id="btn_update">Buat</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.modal edit -->
here is my script:
<script>
...
$('#tabelCP tbody').on('click', 'button.edit_cp', function() {
let tr = $(this).closest('tr');
let row = tabel_cp.row(tr);
let data = row.data();
$('#MoEditCP').modal('show');
$('#anggota1').val(data.nimPelanggar);
$('#tgl1').val(data.tgltrue);
$('#sd1').val(data.tingkat);
$('#nimPenulis1').val("<?php echo $this->session->userdata('nim') ?>");
});
...
</script>

span onClick JQuery change text

I'm trying to get a value from the database: SenderDriver->total_trips.
And all great, but I want to get a specific id so I have to put it into onClick(), then it set the value from the database variable: SenderDriver->total_trips.
This is the code
<span onclick="readd( amounts{{$referral_detail->SenderDriver->total_trips}});"
data-target="#addMoneyModel" data-toggle="modal" id="{{$referral_detail->GetterDriver->id }}">
<a data-original-title="Add Money" data-toggle="tooltip" id="{{ $referral_detail->GetterDriver->id }}" data-placement="top" class="btn text-white btn-sm btn-success menu-icon btn_detail action_btn">
<i class="fa fa-money-bill"></i>
</a>
</span>
Now I want the val to change a specific text when it's clicked using the above code. Btw all this is in .blade.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
function readd(){
$("input:text").val(amounts);
}
</script>
I tried a lot nothing working any help?
The input
<div class="modal fade text-left" id="addMoneyModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title text-text-bold-600" id="myModalLabel33">#lang('admin.message200')</label>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('merchant.AddMoney') }}" method="post">
#csrf
<div class="modal-body">
<label>#lang('admin.message203'): </label>
<div class="form-group">
<select class="form-control" name="payment_method" id="payment_method" required>
<option value="1">#lang('admin.message201')</option>
<option value="2">#lang('admin.message202')</option>
</select>
</div>
<label>#lang('admin.message204'): </label>
<div class="form-group">
<input type="text" name="receipt_number" value="0"
class="form-control" required>
</div>
<label>#lang('admin.message205'): </label>
<div class="form-group">
<input type="text" id="amount" name="amount"
class="form-control" required>
<input type="hidden" name="add_money_driver_id" id="add_money_driver_id">
</div>
<label>#lang('admin.message206'): </label>
<div class="form-group">
<input class="form-control" id="title1" rows="3" name="description"
value="Refer Gift">
</div>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Add">
</div>
</form>
</div>
</div>
</div>

Not 100% sure what you're trying to accomplish, but here are my thoughts anyway.
In your onclick implementation you provide an argument to the function readd, which you're not using/defining in your javascript code at the bottom.
It appears that you try to push the value into the input text field of your bootstrap modal with the id="amount"
Here is the improved JavaScript section:
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
}
</script>
I'm not sure if the bootstrap toggle possibly overrides the onclick event of the span element. If that's the case you need to approach that issue a bit different
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
// Do something with the id
const some_important_id = $(this).attr('data-id');
console.log(some_important_id);
$('#addMoneyModel').modal('show');
}
</script>
and remove the modal stuff from your Span element.
<span onclick="readd( {{$referral_detail->SenderDriver->total_trips}});" data-id="{{$referral_detail->GetterDriver->id }}">

Form inside bootstrap modal not updating values in mysql

I have a table in my page which displays data about a certain request.
When I click the 'Add Cedula Number', which is a button, it shows a bootstrap modal. And inside it, has a form.
The value in the ID which is 14 is the ID of that row and it came from this code:
<td class=" ">
<button class="btn btn-primary btn-xs" id="<?php echo $data['idPerson'];?>" data-toggle="modal" data-target="#myModal"> Add Cedula Number </button>
</td>
Now, in order to pass the value in the modal, I used this code:
<script>
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').html(' <div class="form-group"><label class="col-sm-3 control-label">ID</label><div class="col-sm-9"><input type="text" value = ' + e.relatedTarget.id +' class="form-control" id="person_id" name="person_id" readonly="readonly"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Date</label><div class="col-sm-9"><input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Cedula Number</label><div class="col-sm-9"><input type="number" class="form-control" id="cedula_number" name="cedula_number"/></div></div>' );
})
</script>
This is my modal code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form id="addCedula" action="paid_cedula.php" class="form-horizontal calender" name = "addCedula" enctype="multipart/form-data" method="post" role="form">
<div class="modal-body"></div>
<div class="modal-footer" style="margin:0;">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button id="send" type="submit" class="btn btn-success" name="addCedula">Save Record</button>
</div>
</form>
</div>
</div>
</div>
And my php code is this:
<?php
include 'config.php';
if(isset($_POST['addCedula'])){
$id = $_POST['person_id'];
$date = $_POST['cedula_date'];
$number = $_POST['cedula_number'];
$sql = mysqli_query($conn, "UPDATE person SET dateOfCedulaPayment='$date' AND cedulaNumber='$number' WHERE idPerson='$id';");
mysqli_close($conn);
}
?>
I've been trying to look for the error for hours now. I really can't seem to find where. The value doesn't update in the database. Where did I go wrong? Your help will be much appreciated. Thank you.

#Fred's answer solved the problem (error in Update Query), Here is my 2 cent
This script is overkill to pass the data to modal.
<script>
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').html(' <div class="form-group"><label class="col-sm-3 control-label">ID</label><div class="col-sm-9"><input type="text" value = ' + e.relatedTarget.id +' class="form-control" id="person_id" name="person_id" readonly="readonly"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Date</label><div class="col-sm-9"><input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Cedula Number</label><div class="col-sm-9"><input type="number" class="form-control" id="cedula_number" name="cedula_number"/></div></div>' );
})
All you need is change id="<?php echo $data['idPerson'];?>" to data-id="<?php echo $data['idPerson'];?>" and following 3 to 4 lines of script do the same job.
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$("#person_id").val(id);
});
});
Modal HTML
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form id="addCedula" action="paid_cedula.php" class="form-horizontal calender" name = "addCedula" enctype="multipart/form-data" method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-sm-3 control-label">ID</label>
<div class="col-sm-9">
<input type="text" value = "" class="form-control" id="person_id" name="person_id" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Date</label>
<div class="col-sm-9">
<input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Cedula Number</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="cedula_number" name="cedula_number"/>
</div>
</div>
</div>
<div class="modal-footer" style="margin:0;">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="send" type="submit" class="btn btn-success" name="addCedula">Save Record</button>
</div>
</form>
</div>
</div>
</div>

Your query is incorrect. That isn't how UPDATE works. You need to use a comma and not the AND logical operator http://dev.mysql.com/doc/en/logical-operators.html
UPDATE person SET dateOfCedulaPayment='$date', cedulaNumber='$number' WHERE idPerson='$id';
Reference:
http://dev.mysql.com/doc/en/update.html
Checking for errors on your query would have triggered a syntax error:
http://php.net/manual/en/mysqli.error.php
Sidenote: To see if your query (UPDATE) was truly successful, use mysqli_affected_rows().
http://php.net/manual/en/mysqli.affected-rows.php
In not doing so, you may get a false positive.
Nota:
Your present code is open to SQL injection. Use prepared statements, or PDO with prepared statements.

Why is my modal not popping up in the page?

I have a modal which is supposed to pop up when I click the button. However, when I click the button; nothing happens:
Heres what I did:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class = "row text-center">
<input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">
<input class="btn btn-danger" id="reset-button" type="reset" value="Reset">
<div class="well well-large">
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add transaction</h3>
</div>
<div class="modal-body">
<form class="transaction" name="transaction">
<input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>
<label class="label" for="trans_payment_mode">Payment mode</label><br>
<select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
<option value="">Select</option>
<option value="cash">Cash</option>
</select><br>
<label class="label" for="trans_amt">Transaction amount</label><br>
<input type="text" name="trans_amt" class="input-xlarge"><br>
<label class="label" for="trans_details">Transaction details</label><br>
<textarea name="trans_details" class="input-xlarge"></textarea>
<input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
<input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send" id="submit_trans">
Cancel
</div>
</div>
</div>
<div id="thanks">
<p><a data-toggle="modal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
</div>
</div>
</body>
I have the above modal containing add-transaction which will populate a modal. Please help.

CSS needs a bit work but you are missing a data_target class in your button. Add a div with an id and another div with the class modal-dialog.
Also change the line
<div id="form-content" class="modal hide fade in" style="display: none;">
to
<div id="modal-content">
Other code changes
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
...
<p><a data-toggle="modal" data-target="#myModal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
You can see it in the fiddle below
https://jsfiddle.net/4peLpye5/1/
EDIT - There is no php in the JSFiddle

It's a combination of a few issues.
No need for the hide class on the modal
No need for the display:none style on the modal
Missing id of add-transaction on the modal