We Keep Coding

how to send jquery dynamic data to controller

guys I'm new to jquery as well as javascript.
I want to make an application in laravel where I have to add product and their detail dynamically.
So I tried Jquery first time. I got Jquery code but now I can't get how these values pass through the controller
So please help me out with this.
Thank You
This is my jquery code
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn",
function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1; $(".form_field_outer").append(`
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<div class="form-row">
<div class="col-md-6 mb-10">
<label for="validationCustom03">Item code</label>
<select class="form-control custom-select" name="itemcode" required>
<option value="">Select Item Code</option>
</select>
<div class="invalid-feedback">Please select Item code.</div>
</div>
</div>
<div class="form-group">
<label for="validationCustom03">Reason</label>
<input type="textarea" class="form-control" id="validationCustom03" rows="3" placeholder="Reason For Returning Product" name="categorycode" required>
<div class="invalid-feedback">Please provide a Reason for returning product.</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-10">
<label for="validationCustom03">Quantity</label>
<input type="number" class="form-control" id="validationCustom03" placeholder="Quantity" name="quantity" required>
<div class="invalid-feedback">Please provide a valid Quantity.</div>
</div>
</div>
</div>
</div>
`); $(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false); $(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true); }); });
how to get this value in the controller?

I suggest you to use bootstrap modal foe this,
When you click on the button add_new_frm_field_btn, bootstrap modal will appears and in this modal you change according your requirements.
see example below and try to do this,
<div class="content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Return/Exchange</button>
<div class="modal fade" id="exampleModal" 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">Return Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('someurl') }}">
#csrf
<div class="form-group">
<label for="Item-code" class="col-form-label">Item Code:</label>
<select class="form-control-select" name="itemcode[]" multiple="multiple" required>
<option value="">-- Select Item Code --</option>
<option value="123">123</option>
<option value="145">145</option>
<option value="895">895</option>
<option value="756">756</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Reason:</label>
<textarea class="form-control" id="reason" required></textarea>
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="number" class="form-control" placeholder="quantity" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" id="returnRequest" class="btn btn-primary" data-dismiss="modal">Return Request</button>
</div>
</div>
</div>
</div>
</div>
Write script for select2 functionality,
<script type="text/javascript">
$(document).ready(function(){
$('.form-control-select').select2();
});
</script>
for using bootstrap you have to mentioned below scripts in your file,
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
You can create form in this modal and mentioned method post, route too and when you try to click on submit button it will go to the controller file and there you can try to get all parameters.
for more bootstrap modal options go through this link Bootstrap4
in your route.php file
Route::post('someurl', 'YourController#someMethod');
in your controller file
public function someMethod(Request $request)
{
dd($request->all()); //fetch all your inputted fields
//get single input fields value
$someName = $request->someName;
}

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>

Dynamically setting the 'selected' attribute of Select list in Bootstrap Modal

I have a Bootstrap modal that is triggered by a link that passes in a number of parameters which displays a select list for users to choose a rating between 1 and 5. This part is working well, but I now need to have the select menu display the value for the current rating instead of defaulting to 1 which is the first value in the list.
Here's my code:
$(document).ready(function() {
$('#editRatingModal').on('show.bs.modal', function(e) {
recID = $(e.relatedTarget).data('rec-id');
clickedlink = e.relatedTarget;
currentRating = clickedlink.getAttribute('currentRating');
contactName = clickedlink.getAttribute('contactName');
modalTitle = 'Edit Rating for ' + contactName;
$('#editRatingModalTitle').html(modalTitle);
$("#projectContactRecID").val(recID);
//hide error/success alerts if previously showing
$("#ajaxError1").hide();
$("#ajaxSuccess1").hide();
$("#callContact1").prop("disabled", false);
console.log(recID);
console.log(currentRating);
console.log(contactName)
});
}); //]]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-hover table-bordered">
<tbody>
<tr>
<td>Click Starts to Edit Rating</td>
<td>
<a href="#" contactName="Fred Simpson" currentRating="4" data-toggle="modal" data-rec-id="175091" data-target="#editRatingModal">
<div><span class="stars-container stars-80">★★★★★</span></div>
</a>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editRatingModal" tabindex="-1" role="dialog" aria-labelledby="editRatingModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editRatingModalTitle">Edit Rating</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="editRatingFrom" action="projectDetails.php" method="post" role="form">
<input type="hidden" name="recid" value="16103">
<input type="hidden" name="projectContactRecID" value="" id="projectContactRecID">
<input type="hidden" name="action" value="editRating">
<div class="form-group">
<label for="newRating">Select Rating</label>
<div class="input-group col-xs-8">
<select class="form-control" name="newRating" id="newRating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Rating</button>
</div>
</form>
</div>
</div>
</div>
The currentRating variable contains the value that I want to add the selected attribute to in the select list, but not sure how to achieve this?

You can simply set the value to #newRating.
$(document).ready(function() {
$('#editRatingModal').on('show.bs.modal', function(e) {
recID = $(e.relatedTarget).data('rec-id');
clickedlink = e.relatedTarget;
currentRating = clickedlink.getAttribute('currentRating');
contactName = clickedlink.getAttribute('contactName');
modalTitle = 'Edit Rating for ' + contactName;
$('#editRatingModalTitle').html(modalTitle);
$("#projectContactRecID").val(recID);
//hide error/success alerts if previously showing
$("#ajaxError1").hide();
$("#ajaxSuccess1").hide();
$("#callContact1").prop("disabled", false);
$('#newRating').val(currentRating) // set the current rating
console.log(recID);
console.log(currentRating);
console.log(contactName)
});
}); //]]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-hover table-bordered">
<tbody>
<tr>
<td>Click Starts to Edit Rating</td>
<td>
<a href="#" contactName="Fred Simpson" currentRating="4" data-toggle="modal" data-rec-id="175091" data-target="#editRatingModal">
<div><span class="stars-container stars-80">★★★★★</span></div>
</a>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editRatingModal" tabindex="-1" role="dialog" aria-labelledby="editRatingModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editRatingModalTitle">Edit Rating</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="editRatingFrom" action="projectDetails.php" method="post" role="form">
<input type="hidden" name="recid" value="16103">
<input type="hidden" name="projectContactRecID" value="" id="projectContactRecID">
<input type="hidden" name="action" value="editRating">
<div class="form-group">
<label for="newRating">Select Rating</label>
<div class="input-group col-xs-8">
<select class="form-control" name="newRating" id="newRating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Rating</button>
</div>
</form>
</div>
</div>
</div>

get the href value from selected option and change the href of the button

I want to get the href value of the selected option so that i can now go to the link that i selected using the button.
Here's my code
<div class="modal fade" id="soa">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Choose the name of student</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="form-group">
<label class="control-label"><span
class="text-danger"></span> Name of Student</label>
<select name="childNames" class="form-control input-lg" id="childNames" data-size="5">
<option value="" selected disabled></option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice">John Dela Cruz</option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice1">Josh Dela Cruz </option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice2">Jane Dela Cruz</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
View</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Add a id to =>
<a id="link" href=''><button type="button" class="btn btn-info">View</button></a>
This should work :
$(document).ready(function() {
$("#childNames").on('change', function () {
var ref = document.getElementById("childNames").value;
alert(ref);
$('#link').attr('href', ref);
});
});
jsfiddle example

Here's also the alternative answer. Just add it to your script
<script type="text/javascript" >
jQuery(document).ready(function($) {
$("#childNames").change(function () {
var ref =$(this).find('option:selected').attr('value');
$('#link').attr('href', ref);
});
});
</script>

Days of month not showing when first load modal bootstrap

On my bootstrap modal. I am able to select days on each month when select a month.
Problem: When I first load up the bootstrap modal the days do not show straight away for that month. I have to select another month the re-select month I am after to get days.
Question: How am I able to get the days of month to display for the selected month that comes up when modal is open rather than me having to go and select another month first then go back.
Example Code Preview: Click Here Link now updated with working script.
Code HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="page-header">
<h3 class="page-title">Bootstrap Pop Up Modal Date Select</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-group">
<select name="year" class="form-control">
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
</div>
<div class="form-group">
<select name="month" class="form-control">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
<div class="form-group">
<select name="day" class="form-control">
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Code JavaScript
$('select[name="month"]').on("change", function() {
var year = $('select[name="year"]').val();
if (year > 0) {
$('select[name="day"]').find("option").remove();
var daysInMonth = new Date(year, $(this).val(), 0).getDate();
for (var i = 1; i <= daysInMonth; i++) {
console.log(i);
$('select[name="day"]').append($("<option></option>").attr("value", i).text(i));
}
}
});

Force the event change after the event init:
$('select[name="month"]').on("change", function() {
var year = $('select[name="year"]').val();
if (year > 0) {
$('select[name="day"]').find("option").remove();
var daysInMonth = new Date(year, $(this).val(), 0).getDate();
for (var i = 1; i <= daysInMonth; i++) {
console.log(i);
$('select[name="day"]').append($("<option></option>").attr("value", i).text(i));
}
}
});
$('select[name="month"]').trigger('change');
The example:
https://jsfiddle.net/xhqj9trd/