I have modal to submit comment entered by the user. But when the user enters submit button, the form-backing-object reaches the post end point but the field entered using the modal is empty.
<!-- Modal -->
<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">Comment for approval</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post">
<textarea rows="5"
placeholder="Comment..."
th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"
class="form-control"
name="processApproveComment">
</textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
<input th:type="hidden" th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"/>
</div>
</div>
</div>
</div>
The place where modal is called is
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
The flow is: after the form is complete, the user clicks "Approve" button, which triggers the modal, the user then enters the comment and presses "Approve" (from the modal) and the form is submitted.
Could someone PLEASE suggest what is wrong here as I am not receiving just the processApproveComment (which is set using the modal) when other properties from the parent form are available.
The post endpoint is :
#PostMapping("/release/process")
public String releaseProcess(Principal principal,
Model model,
#ModelAttribute("answeredQuestionnaire") AnsweredQuestionnaire answeredQuestionnaire){
// answeredQuestionnaire does not have processApproveComment, but all others are available.
}
Update:
<div class="modal-body">
<form action="" method="post">
<textarea rows="5"
placeholder="Comment..."
th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"
class="form-control"
name="processApproveComment">
</textarea>
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
</form>
</div>
Because button tag not in form tag
Move button tag to form tag
Related
I am trying to implement a modal popup which gives a user two buttons, each pointing to action methods in separate controllers.
Here is the partial view:
<div class="modal fade" id="importOption">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color:darkorange">Select Import Option</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="flex-container">
<div class="first">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="BundleNodes" asp-action="Import" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="auto" data-dismiss="modal">Select Node(s)</button>
</div>
</div>
<div class="second">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="Nodes" asp-action="SelectBind" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="select" data-dismiss="modal">Auto Import</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
This partial view is basically a modal popup with a form in the body element which contains two buttons. The buttons were taking up too much space in the parent view so I want to move them into a popup, reducing the number of buttons in the parent view. The problem is, once the buttons are in the partial view they don't trigger their respective controller actions.
I am rendering the partial view in the parent view using this line:
#await Html.PartialAsync("_ImportOptionPartialView")
After beating my head against this problem for 3 days, I think I finally narrowed it down to an issue with the bootstrap modal button. I have modal button popup that displays a partial view, and a select list within that. When I create it to a separate page, it displays with no issues:
dropdownlistworking
However, when I put the exact same code into my modal button view, the dropdown stops displaying my items except for the default:
dropdownlistnotworking
Here is the code on the modal button:
Main view:
<div>
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#addDoc">Add Doc</button>
<div id="addDoc" class="modal fade"">
<div class="modal-dialog" role="document">
<div class="modal-content">
#Html.Partial("_AddDoc", new Slingshot.Models.OrgDocsModel { OrgId = #Model.First().OrgId})
</div>
<div>
</div>
</div>
Partial:
<div class="modal-header">
<h4 class="modal-title" id="addDocLabel">Add Document</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" asp-action="_AddDoc">
<input type="hidden" asp-for="OrgId" />
<div class="form-group">
<label asp-for="DocName" class="control-label"></label>
<input asp-for="DocName" class="form-control" />
</div>
<div class="form-group">
<label asp-for="DocTypeName" class="control-label"></label>
<select asp-for="DocTypeName" asp-items="#Model.DocTypesList" class="form-control" >
</select>
</div>
<div class="form-group">
<input asp-for="UploadFile" class="custom-file-input" id = "OrgDoc">Choose File</input>
<label class="custom-file-label" for="OrgDoc" class="form-control"</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<button type="Submit" value="Submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
Is it possible to show data with button modal datatable from database inside textarea? My case is, the button modal inside datatable area, and when I click the button it appears modal and data inside textarea. This is my code :
->addColumn('detail', function ($data) {
$html = '
<div class="d-flex justify-content-center">
<button class="btn btn-light-success mx-2 btn-sm detail" '. $data->id .' ">
<i class="fa fa-search"></i>
Detail
</button>
</div>
';
return $html;
})
And this is a view :
<form action="{{route('accelerate-setting.submit_comment')}}" method="POST" class="load-form" enctype="multipart/form-data">
#csrf
<input type="hidden" name="id" value="">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Detail Comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form form-control" name="detail_comment" rows="6" disabled></textarea>
</div>
<button type="submit" name="action" class="btn btn-primary font-weight-bold btn-block" value="submit">Submit</button>
</div>
Thanks, hope u understand what my case is. I'm really confusing!
I am trying to open multiple modals on a single page but their ids are conflicting with each other. I got this code from bootstrap-4 documentation,
Modal 1 is works fine but modal 2 fails to work, I wants that both of them to work separately
code:
modal1
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
Add New
</button>
<!-- Modal Add Owner -->
<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">Add Owner</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('owner.store') }}">
#csrf
<div class="form-group">
<label for="">Add Owner Name</label>
<input type="text" name="owner_name" class="form-control" id="" placeholder="Owner Name">
</div>
<input type="submit" name="submit" class="btn btn-primary" value="submit">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
modal2:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Show
</button>
<!-- Modal Show Owner-->
<div class="modal fade" id="exampleModalshow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">View Owner</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('owner.update', $owner->id) }}">
#csrf
#method('PATCH')
<div class="form-group">
<label for="">Owner Name</label>
<input type="text" name="owner_name" class="form-control" value="{{ $owner->owner_name }}">
</div>
<input type="submit" name="submit" class="btn btn-primary" value="submit">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Change data-target on the second modal button to match the modal id
<button data-target="#exampleModalshow">
... rest of the code
</button>
I'm working on a spring boot project,
I want to pass a simple id to my modal, the modal is just for ask to the user if He confirm the item deletion, if he confirm i want to send to my controller class /profil/{id}
but i don't understand how to pass my object id to the modal, it's my first spring boot project, I have no bases in JS...
my html code :
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Rendre disponible
</button>
<!-- Modal -->
<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">Rendre disponible</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Voulez vous rendre ce topo à son propriétaire ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Confirmer</button>
</div>
</div>
</div>
</div>
</div>
Thanks for your help !
you can use th:data to pass parameters to modal.
<button type="button" class="btn btn-primary"
th:data-yourid="id_you_want_to_pass" data-toggle="modal"
data-target="#exampleModal">Rendre disponible</button>
And you can get this value using javascript. The following will be triggered as soon as modal is about to show.
$('#exampleModal).on('show.bs.modal', function(e) {
var id= $(e.relatedTarget).data('yourid);
//do whatever you want to do with this id
});