I have the following form action:
<form id="form_1" action="{{route("admin.pos.store")}}" method="POST" enctype="multipart/form-data" onsubmit="return CJForm_s(1)">
<!-- Transaction form -->
<!-- end Transaction -->
<!-- Dialog Payment -->
<button class="btn btn-info btn-block btn-lg" type="button" data-toggle = "modal" data-target="#payments" >Complete</button>
<div class="modal fade" id="payments" tabindex="-1" role="dialog" aria-labelledby="payments">
<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="method">Method Payment</h4>
</div>
<div class="modal-body">
<button class="btn btn-primary" type="button" id="debit">Debit</button>
<button class="btn btn-primary" type="button" id="kredit">Kredit</button>
<button class="btn btn-primary" type="button" id="transfer">Transfer</button>
<button class="btn btn-primary" type="button" id="cash">Cash</button>
<hr/>
<div id="content-payment"></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" type="submit">Send</button>
</div>
</div>
</div>
</div>
<!-- End Dialog Payment -->
</form>
If I click on submit button in dialog it will store all transactions and input in dialog. That happens if submit in dialog nothing happen.
Can you give me a solution for this problem?
You've the type attribute for 2 times. Remove the type="button" in the send button.
<button class="btn btn-primary" type="submit" id="send_payment">Send</button>
You don't further post your JavaScript. I suppose that you use a dialog module, such as Bootstrap dialog. If it's a dialog in an iframe, or dynamic (injected) html, make sure that the events are binded to the elements.
Related
I send an id from the database to the button. I can't send the id to modal inpıt. I tried so hard, but I couldn't.
Modal:
<div class="modal fade" id="delete">
<div class="modal-dialog">
<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"><b>Deleting.</b></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" action="advert_delete.php">
<input type=""class="id" name="id">
<div class="text-center">
<p>DELETE </p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="submit" class="btn btn-danger btn-flat" name="delete_button"><i class="fa fa-trash"></i> Delete</button>
</div>
</form>
</div>
</div>
Buton and Script:
<button type='button' class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['id']."' ><i class='fa fa-trash'></i> Delete</button>
$(document).on('click', '.delete', function(e){
e.preventDefault();
var id = $(this).attr('data-id');
$("id").val(id);
$('#delete').modal('show');
});
The following input field:
<input class="id" name="id" id="id">
Can be called in the following ways:
$(".id") // Calling *any* element with class="id"
$("input[name=id]") //Calling *any* _input_ element that has name="id"
$("#id") // Calling the element with id="id"
In your particular example, your field doesn't include the id attribute, so you cannot use #id as a reference (Unless you add the id attribute of course). But the other two methods should work.
I try to pass the 'data-id' from the code below:
<a data-toggle="modal" data-id="10" class="passingID">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editkaryawan">
<i class="fas fa-pencil-alt"></i> Edit</button>
</a>
To an input form values here:
<div class="modal-body">
<form method="post" action="tambahkaryawan.php">
<input type="hidden" class="form-control" name="idkl" id="idkl" value="">
</form>
</div>
This is the jquery i use:
<script>
$(document).on("click", ".passingID", function () {
var ids = $(this).data('id');
$(".modal-body #idkl").val( ids );
});
</script>
I usually use .attr for data-* attributes and it works.
$(this).attr('data-id');
it is quite simple to pass a value or ID check this out
with this button, I will trigger the Modal and also pass the DATA ID which is being generated dynamically from PHP you can also make this a title or any other info needed.
<button data-id="<? echo $note['id'] ?>" onclick="$('#dataid').val($(this).data('id')); $('#showmodal').modal('show');" >click me</button>
My modall is called showmodal as you can see
in the modal's body add the following code
<input type="text" name="dataid" id="dataid" value=""/>
this will show the value from the button.
I hope this helps someone
You can also try like this, by using Jquery to show modal poup
$(".passingID").click(function () {
var ids = $(this).attr('data-id');
$("#idkl").val( ids );
$('#myModal').modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg passingID" data-id="10">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<form method="post" action="tambahkaryawan.php">
<input type="text" class="form-control" name="idkl" id="idkl" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is my code, I was supposed to get the inputted value in db and php tag isnt working.. It is not also redirecting to "myorders.php"; My form inside is not working.. Thank you.. Really need some help :(((
<div class="container">
<form method="post">
<h2>Enter your Pin Number</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter your Pin Number</h4>
</div>
<div class="modal-body text-center">
<input type="password" id="first-name" required="required" class="form-control" name="pin">
</div>
<div class="modal-footer">
<button type="submit" name="submit3" class="btn btn-default" data-dismiss="modal"><i class="fa fa-key"></i> Confirm Pin</button>
</div>
</div>
</div>
</div>
<!-- START OF PHP -->
<?php include ('connectdb.php');
if(isset($_POST['submit3']))
{
$pin = $_POST["pin"];
$pww = "123";
if ($pin!=$pww) {
echo "WRONG PIN.. TRY AGAIN..";
}
else{
header('Location: myorders.php');
}
} // SUBMIT
?>
</form>
</div>
As per my comment, remove data-dismiss="modal" from your submit button. data-dismiss="modal" is used to close the modal dialog. You already have it here
<button type="button" class="close" data-dismiss="modal">×</button>
I have a button that calls a modal form where the user can enter a name. I want the submit button in my modal to take that inputted string and append it as a parameter in a specific route. I can't find an example that shows how to get the modal input value into the route call.
Button code in view:
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
onClick="$('#myModal').modal()"
style="margin-top: 2px;">
New Name
</button>
Modal form code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper" style="width:50%">
<div class="modal-dialog vertical-align-center">
<div class="horizontal-alignment-helper">
<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">Create New Plan</h4>
</div>
<div class="modal-body">Enter a name for your new plan and we'll do the rest...
<p></p>
<div class="form-group form-group-lg">
<label for="firstname" class="control-label"> Plan Name:</label>
<div>
<input class="form-control" type="text" id="lg">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Create Plan</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Route I want the submit button to invoke:
Route::get('create-plan/{plan_name}', ['uses' => 'GeneratePlanController#createplan'])->middleware('auth');
How can I get the user input from the form control <input class="form-control" type="text" id="lg"> into the route call as the {plan_name} parameter?
I'm working in Laravel 5.5 and PHP 7 on XAMPP. My modal form works fine, as does the route/controller when manually called. Just need to wire the two together.
Thanks in advance.
You could possibly use javascript onclick event for this:
<button type="button" class="btn btn-primary" onclick="window.location.href = '/create-plan/'+document.getElementById('lg').value;">Create Plan</button>
Tomorrow I am presenting my code in sprint. Everything was working fine until a few hours ago. I have a modal which pops up when a user clicks on Edit. It was giving the values according to id.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div>
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
I am very upset and confused and don't know what to do.
Any help would highly be appreciated
Edit:
After reading the comments; i have understood that only one id would be updated every time. How could i change the id dynamically and update data of that specific id and each time it should get only clicked id.
Controller Function to update:
public function updateCommunity($id, CommunityRequest $request) {
$updateCommunity = Community::findOrFail($id);
$updateCommunity->update($request->all());
return back();
}
View Buttons:
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal">Edit</button>
| Delete</td>
</tr>
#endforeach
Update
I understand you have all the communities listed in a list somewhere outside this modal, each entry has an edit and delete button. Upon clicking edit button user should be presented a modal with a single form to edit community he clicked that button for. All this using a single modal element.
The fact that you don't want to use more than one modal means you want to generate less DOM in order to provide faster loading times, if that's the case then edit your view buttons.
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal" data-community="{{ json_encode($communities) }}">Edit</button>
| Delete</td>
</tr>
#endforeach
Notice new data-community attribute in edit button.
Now change your modal to provide a template for community edit form instead of providing a form for each community.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit: <span></span></h4>
</div>
<div class="modal-body">
<form class="form-group" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
Now what you need to do it listen to edit community button click event (the one from view buttons), get data-community object from it, open a modal and fill with to fit edited community.
search for $('modal-title span') and .html() community name into it
search for $('#editCommunityForm') and change it's action to \update\{community_id}
search for $('button[form="editCommunityForm"]) and on click send form using ajax
There are many other ways to do this, better ways, it's just a simple example on how you can make it work.
Original answer
How come your submit button is outside of foreach but in an image it is displayed after each form? Also you are closing <div> tag in a loop that you opened before that loop.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div> // You are closing a tag opened before foreach loop
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
After you fix this you can simply edit form id by adding $editCommunity->id to it, like so:
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
Then you can edit button's form parameter to match your form:
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button>
You should end up with this:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button><br /><br />
#endforeach
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>