I'm having difficulties with the modal using Bootstrap 5, my Delete button should show a message confirming the action by the user, but the Modal confirmation button doesn't work.
The action I want of which is to delete a record doesn't work.
Delete button
<!-- Form -->
<form action="{{ url("delete/$hxh->id") }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i> Delete</button>
</form>
Modal and Script
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Delete Hunter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want delete <b>{{$hxh->name_hunter}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i> Cancel</button>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<!-- Script Modal -->
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myButton').trigger('focus')
})
</script>
It is because there is no action performing on delete button so you should make it form the delete button
<!-- Form -->
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i> Delete</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Delete Hunter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want delete <b>{{$hxh->name_hunter}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i> Cancel</button>
<form action="{{ url("delete/$hxh->id") }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button type="submit" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-trash"></i> Delete</button>
</form>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
Related
I have form inside modal and want to create a user. when I click on submit nothing happens.
How can I submit the modal form and save the content of the modal in other page in rails application with Ajax?
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</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">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="text" class="col-form-label">firstname:</label>
<input class="form-control" id="text2"></input>
</div>
<label for="text" class="col-form-label">lastname:</label>
<input class="form-control" id="text2"></input>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">submit</button>
</div>
</div>
By clicking submit button the text field value will be passed to the controller via Ajax method
$(document).ready(function(){
$("#submit").click(function(){
alert($("#name").val());
});
$.ajax({
type: 'POST',
url: 'path/to/controller',
data: {'value' : $("#name").val() }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">
<p>Some text in the modal.</p>
<input type="text" name="name" id="name"></input>
<input type="submit" id="submit"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm trying to change the href of the link in the modal using the id of the clicked link. Though using prop works fine in the console it doesn't seem to work in my snippet. I don't know what i'm doing wrong...
My link:
<a data-toggle="modal" data-target="#myModal" id="1" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
My script :
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this),
myId ='home.php?menu=15&status=delete&id=' + e.relatedTarget.id;
$modal.prop('href',myId);
})
My Modal:
<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">........</h4>
</div>
<div class="modal-body edit-content">
<p><strong>..........</strong></p>
</div>
<div class="modal-footer">
<a href="home.php?menu=15&status=delete&id=5" id="modalLink" class="btn btn-default" >yes</a>
<button type="button" class="btn btn-primary "data-dismiss="modal">no</button>
</div>
</div>
</div>
</div>
I have a Bootstrap Modal which contains a Submit Button.Apart from this Modal I have another one also which contains Form and other elements like Lables, Text boxes and a Submit button.Now I have a requirement where in a click Submit button of first Modal , it should submit the Form of the Second Modal..Below I am posting my First and Second Modal HTML Prototype ..
<div class="modal alert" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="DeleteModalLabel">Confirm Delete</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-sm-6 control-label">Are You Sure To Delete !!!</label>
</div>
</div>
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Delete</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
</div>
</div>
</div>
</div>
and Here is the Second One..
<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
</div>
</div>
</form>
</div>
</div>
Please suggest me How can this is possible.Thanks..
Adding a class to delete button
<button type="submit" class="btn btn-success delete"><i class="glyphicon glyphicon-trash"></i> Delete</button>
Write a click event.
$('.delete').on('click',function(){
$('#DeleteModal').modal('hide');
$("#frmStudent").submit();
});
Note : This is just a basic example. Now if you want to use ajax to submit the form then there are way different steps to achieve it.
this is my bootstrap modal code
<form class="form-horizontal" method="post" name="addform" id="formid">
<div id="myModal" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Add Question</h3>
</div>
<div class="modal-footer">
<input type="button" onClick="aj_add_question(<?=$id?>);" class="btn btn-primary" id="add_button" name="Add" value="Add Question">
<button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Page" onclick="aj_add_page();" class="btn btn-primary" />
<button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
</div>
</form>
now onclick
Add Question
i have to close current popup
then i have written code
<script>
$(document).ready(function(){
alert("Question Added..");
$('#formid').hide();
});
</script>
it will hide but get screen black
I think you are not using modal popup syntax properly, can you try the following:
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodaltitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
**--- put your form here**
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Then, as others have suggested use $("#mymodal").modal('hide')
I am trying to open a modal box on clicking a button using twitter bootstrap 3.0 . However on clicking the button there is no modal box shows up.
<tr>
<td height=150>
<button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" href="#myModal" >Anonymous Question</button>
</td>
</tr>
// the modal code
<!-- 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
<!-- Modal End -->