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;
}

Problems updating bootstrap 4 model

I'm developing an app in Spring Boot with JSP in frontend. I have the following problem:
I have a table with different rows. I can click a button to update every row if I want. When I click in one row and change some data all works fine. The problem is when I click in one row, close or save this modal and following I open another row and edit again. The modal is good but when I save, I receive 2 POST to update the row behind and the actually row.
I don't use nothing strange... Probably I need to "clean" the modal when I close or save?
One of my modals (this happends in all table with modal to update the row)
Html/JSP:
<!-- UPDATE DISP MODAL -->
<div id="updateDispModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="updateDispForm" class="needs-validation">
<div class="modal-header">
<div class="modal-title">
<h5 id="modalTitle">
<spring:message code="shares.displacement.update.btn" />
</h5>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="activityCenter" class="col-form-label"><spring:message code="shares.displacement.table.activity.center" /></label>
<select id="activityCenter" name="activityCenter" class="form-control" required>
<option disabled selected="selected">
<spring:message code="shares.displacement.table.activity.center" />
</option>
<c:forEach items="${teamLeaders}" var="teamLeader">
<option value="${teamLeader.userId}">
<spring:message code="${teamLeader.name} ${teamLeader.surnames}" />
</option>
</c:forEach>
</select>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="displacementDate" class="col-form-label"><spring:message code="shares.displacement.table.total.time" /></label>
<input id="displacementDate" name="displacementDate" type="datetime-local" class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="manualHours" class="col-form-label"><spring:message code="shares.displacement.total.time" /></label>
<input type="time" class="form-control" id="manualHours" name="manualHours">
</div>
<div class="col-sm-12 col-md-6">
<label for="roundTrip" class="col-form-label"><spring:message code="shares.displacement.round.trip" /></label>
<input type="checkbox" class="form-control" id="roundTrip" name="roundTrip" style="width: 20px">
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="observations" class="col-form-label"><spring:message code="shares.displacement.observations" /></label>
<textarea id="observations" name="observations" class="form-control" rows="6"></textarea>
</div>
</div>
</div>
<input type="hidden" class="form-control" id="projectId" name="projectId">
</div>
<div class="modal-footer clearfix">
<div class="w-100">
<div class="float-left">
<button type="button" class="btn btn-sm" data-dismiss="modal"><spring:message code="cerrar" /></button>
</div>
<div class="float-right">
<button id="updateDispBtn" type="button" class="btn btn-sm btn-success"><spring:message code="save" /></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /CREATE MODAL -->
JavaScript:
$('#updateDispBtn').click(function () {
$.ajax({
type: "PUT",
url: "/shares/displacement/" + id,
data: $('#updateDispForm').serialize(),
success: function(msg) {
$('#dTableSignings').DataTable().ajax.reload();
showNotify(msg, 'success');
},
error: function(e) {
showNotify(e.responseText, 'danger');
}
});
$('#updateDispModal').modal('hide');
});

Finally, the user Swati help me to solve this problem. I need to unbind the button before clicking event: button onclick function firing twice
Thanks!

How do I redirect to same page on submitting a form in a bootstrap modal?

I have a bootstrap modal with form which is getting called from a link in my parent home page :
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Contact</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="student.php" target="_parent">
<div class="form-group row">
<div class="col">
<input type="text" class="form-control" placeholder="Name" name = "name">
</div>
<div class="col">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Profession</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect" name="profession">
<option selected>Choose...</option>
<option value="1">Student</option>
<option value="2">Parent</option>
<option value="3">Other</option>
</select>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="e-mail" name = "email">
</div>
<div class="form-group">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Type</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect" name="type">
<option selected value="1">Feedback</option>
<option value="2">Grievance</option>
<option value="3">Admission</option>
<option value="4">Other</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Write..</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send Message</button>
</div>
</div>
</div>
</div>
PHP code in my parent page to handle data of my modal form.
<?php
if(isset($_POST["submit"]))
{
$email = $_POST["email"];
$name = $_POST['name'];
$message = $_POST["message"];
$type = $_POST["type"];
$profession = $_POST["profession"];
$message = wordwrap($message,70);
$headers = "From:".$email;
$subject = "Message by".$name." ".$profession."of type".$type;
mail("yashboura303#gmail.com", $subject, $message, $headers);
echo "Your mail has been sent successfuly ! Thank you for your feedback";
}
?>
Now I want to go back to home.php after submitting my modal form so that I can used mail() function to send mail. How can I achieve this?
I obviously used "action=home.php" in form which is not working and tired "data-dismiss='modal' " in submit button tag but it's not actually submitting the form it's just closing the modal.

ng-submit is not working

I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.

Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>

In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}

refresh page after submit on bootstrap modal

I am using bootstrap admin theme in one of my project. I have a popup modal in one of the php page and i have a registration form in that popup, now when i enter the details and click on submit, the data is actually being inserted into the database and modal closes by default, but the page doesn't refreshes, as i have a table of registered members in the page, i only can see that entry when i refresh the page, and again when i refresh the page, it asks me to reload the page or close the alert box, when i click on reload, the entry goes into the database for two times, i am attaching my code, please help, i am new to stack overflow and bootstrap as well.
Modal code
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Add New Member </button>
<!-- Modal -->
<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">Add New Member</h4>
</div>
<div class="modal-body">
<form method="post">
<fieldset>
<div class="form-group">
<label>First Name</label>
<input name="fname" class="form-control" placeholder="First Name" type="text" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input name="lname" class="form-control" placeholder="Last Name" type="text" required>
</div>
<div class="form-group">
<label>Email Address</label>
<input name="email" class="form-control" placeholder="Email Address" type="email" required>
</div>
<div class="form-group">
<label for="h-input">Cell Number</label>
<input name="cell" type="text" class="form-control" placeholder="XXX XXX XXXX (Enter number without space)">
</div>
<div class="form-group">
<label>Member Type</label>
<select class="form-control" name="membertype">
<option value="Member">Member</option>
<option value="Guest">Guest</option>
</select>
</div>
<div class="form-group">
<label>Member Status</label>
<select class="form-control" name="memberstatus">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</fieldset>
<div>
<input name="addmember" class="btn btn-primary" value="Add New Member" type="submit"/>
</div>
</form>
<?php
if(isset($_POST['addmember'])) {
require('config.php');
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$cell = $_POST['cell'];
$mtype = $_POST['membertype'];
$mstatus = $_POST['memberstatus'];
$addmember = "INSERT INTO members (fname, lname, email,cellnumber,type,status,regdate) VALUES (:fname,:lname,:email,:cell,:mtype,:mstatus,CURDATE())";
$q = $conn->prepare($addmember);
$q->execute(array(
':fname'=>$fname,
':lname'=>$lname,
':email'=>$email,
':cell'=>$cell,
':mtype'=>$mtype,
':mstatus'=>$mstatus,
));
if(!$q) {
echo "Error: Member not added.";
}
else {
header("Location: addMembers.php");
}
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i have created this modal file as a separate file and included in my main php file where table of registered members is printed.

Location requires an absolute path. Check the second to last note in the Notes section.
http://php.net/manual/en/function.header.php
When you manually refresh the page you are just resending the form data that was submitted which is why you get two entries in the DB.