I have a problem with get a value of field from modal window.
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
<form th:action="#{/groups/add}" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addModal">Add group</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Group Name</label> <input type="text"
class="form-control" id="addName" name="name">
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Faculty</label> <select
class="form-control">
<option th:value=0>Faculty not assign</option>
<option th:each="faculty : ${faculties}" th:value="${faculty.id}"
th:utext="${faculty.name}">Faculty</option>
</select>
</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</button>
</div>
</div>
</div>
</form>
</div>
In browser when I use "add" method, I can choose any Faculty from table, it works OK, but when I press button "save", only name returned to Controller and no info about faculty that was chosen. What I missed?
Finally I solved this problem- I forget to give a name for field where facultyId is stored.
Here was error:
<label for="recipient-name" class="col-form-label">Faculty</label>
<select class="form-control">
Correct:
<label for="faculyId" class="col-form-label">Faculty</label>
<select class="form-control" id="addFaculty" name="facultyId">
Related
I do a simple vocabulary application as a practice. It can insert new vocabularies and then open that vocabulary so you can add some words in it.
My goal is to insert those words with a modal and with the button Save redirect to that current vocabulary's url.
So create a new Vocabulary and with an "Open" button you go to localhost:8080/vocabulary/1 where you can add new words with a modal, and then with the Save button you redirect back to that URL. (vocabulary/{id})
My question is: Could anyone recommend a solution? I have tried to find something, but it doesn't work.
I tried with this:
Controller:
#PostMapping("/vocabulary/{id}")
public ModelAndView addWord(#RequestBody Words word, #PathVariable(name="id") Integer id) {
ModelAndView mav = new ModelAndView("redirect:/vocabulary");
wordService.addWord(word);
List<Words> wordList = wordService.getWordsByVocabulary(id);
mav.addObject("listOfWords", wordList);
return mav;
}
HTML-Modal
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="createModalLabel">New Word</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form th:object="${word}" method="post" th:action="#{'/vocabulary/' + ${vocId}}">
<div class="form-group">
<label for="english" class="col-form-label">English:</label>
<input type="text" class="form-control" id="english" th:field="*{english}">
</div>
<div class="form-group">
<label for="hungarian" class="col-form-label">Hungarian:</label>
<input type="text" class="form-control" id="hungarian" th:field="*{hungarian}">
</div>
<input type="hidden" th:field="*{vocabularyId}" id="vocabularyId">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
The Save button starts the Controller's addWord() method.
I required input it's work but why invalid-feedback not show in modal
HTML use thymeleaf
<!-- AddStore Modal -->
<div class="modal fade" id="AddUserModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="AddUserModalLabel">Add Store Form</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form autocomplete="off" action="#" th:action="#{/stores/add_store}"
th:object="${store}" method="post"
role="form" id="addModalForm">
<div class="form-row">
<div class="form-group col-md-6">
<label for="addstoreName">Store Name</label>
<input type="text" class="form-control" id="addstoreName" th:field="*{storeName}"
required="required"/>
<div class="invalid-feedback">
Please provide a store name.
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="addStatus">Status</label>
<select id="addStatus" class="form-control" th:field="*{status}">
<option th:value="Ready_to_service">Ready to service</option>
<option th:value="Temporarily_closed">Temporarily closed</option>
<option th:value="Closed">Closed</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<button class="btn btn-success" type="submit" th:text="Save"></button>
</div>
</form>
</div>
</div>
</div>
</div>
Not sure if you found the solution or not as it looks like an old question.
You are missing to let Thymeleaf know about the field specific error. You havn't bind the invalid-feedback class to the "field" error. Try below piece of code.
<input type="text" class="form-control" id="addstoreName" th:field="*{storeName}" required="required"/>
<div class="invalid-feedback" th:if="${#fields.hasErrors('storeName')}" th:errors="*{storeName}"></div>
Take a look at the working example here. Here it will look like this:
here is my code, I have used this code in jsp now when i am using form tag it is showing--invalid location of tag (form)
<div class="col-sm-12">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body classPadding">
<form role="form" id="js-upload-form" > //INVALID LOCATION OF TAG(FORM)
<div class="col-sm-8 md-pl-0">
<div class="form">
<div class="form-group">
<input type="file" onchange="loadFile(event)" name="econoDataFile" accept="image/*" id="js-upload-files">
</div>
<h5 id="id-text-setting">Upload an Image of size 192*192</h5>
<img id="output" src="" class="save-img" />
</div>
</div>
<div class="col-sm-4">
<button class="btn btn-sm btn-primary" type="submit" id="js-upload-submit">Save</button>
</div>
</form>
<div class="form-group col-md-6 md-pl-0">
<span>Send to a Segment</span> <select id="segment-name" class="form-control">
<option value="-1" >All Subscribers</option> </select>
</div>
</div>
</div>
</div>
I had the same error, in my case the problem was that I had the form nested inside another form
I am passing a value from a jsp page to bootstrap modal using jQuery and it is working. I want to pass the same value from bootstrap modal to the servlet. I tried with ajax, post, nothing seems to be working. Here is my html:
<div class="container" style="padding-top: 60px;" >
<select class="createAlarm" id="createAlarm" name="metrics">
<option value="cpuUsage">CPU Usage</option>
<option value="memoryUsage">Memory Usage</option>
<option value="diskRead">Disk Read</option>
<option value="diskWrite">Disk Write</option>
<option value="diskUsage">Disk Usage</option>
<option value="netUsage">Net Usage</option>
</select>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-whatever="Create Alarm">Create Alarm</button>
</div>
<!-- Modal- Create Alarm -->
<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">Create Alarm</h4>
</div>
<form action="/ProjectName/createAlarm" method="post" id="addcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 170px;">
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="alarmName">
</div>
</div>
<div class="form-group" style="height: 30px; margin-bottom:30px;">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<textarea class="form-control" name="desc"></textarea>
</div>
</div>
<div class="form-group">
<label for="priority" id="priority" name="priority" class="col-md-3 control-label">
<input type="text" class="form-control" name="name">
</label>
<div class="col-md-9">
<div class="col-md-3">
<select name="sign" class="form-control">
<option value="lessthan"><</option>
<option value="greaterthan">></option>
<option value="lessthanequalto"><=</option>
<option value="greaterthanequalto">>=</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="threshold">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary" id="formSubmit" type="submit">Create Alarm</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Here is my jQuery part:
<script>
$('#myModal').on('show.bs.modal', function(e) {
var metrics_key = $('.createAlarm').val();
var metrics_label = $(".createAlarm option:selected").text();
// Now you have the key and label in variables.
// Write the key into the textfield.
$('#myModal input[name="name"]').val(metrics_key);
// Change the HTML of an element to the label.
$('#myModal label[for="priority"]').text(metrics_label);
$.post("/CMPE283_Project2/createAlarm", { val : $("#priority").text()});
alert($('#priority').text());
});
My Servlet:
String Metric = request.getParameter("val");
But, I am getting null for the String Metric. But alert pop up after clicking 'Create Alarm' button shows the correct value I want to pass the servlet. Please help. Thanks.
Your post looks ok, I believe it's just a matter of jquery syntax for accessing controls.
In particular, I'd expect a text input with id="priority" (not just a label as it appears in your code), and then you access it with '.val()' and not 'text()'
<input type="text" id="priority" ... />
$.post('your url', {priority: $("#priority").val()} ...
At least this works for me (jquery version 2.1.3). If you want to make sure, you can just start by posting hard coded data such as {priority: '7'}
I have the following problem. See code below.
<form:form action="${pageContext.request.contextPath}/editUser" commandName="user">
<div id="editUserDialog" class="modal fade">
<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">Edit user</h4>
</div>
<div class="modal-body">
<form:select id="slc_picker" path="id" class="selectpicker" data-width="100%" onchange="javascript:onSelectEditUser()">
<c:forEach items="${users}" var="us">
<option>${us.id}</option>
</c:forEach>
</form:select>
<form:input id="surname" path="surname" type="text" class="form-control" placeholder="Surname"/>
<form:input id="name" path="name" type="text" class="form-control" placeholder="Name" />
<form:input id="fatherName" path="fatherName" type="text" class="form-control" placeholder="Father Name"/>
<form:input id="mobilePhone" path="mobilePhone" type="text" class="form-control" placeholder="Mobile Phone"/>
<form:input id="email" path="email" type="text" class="form-control" placeholder="Email"/>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save user"/>
<input type="button" class="btn btn-danger" data-dismiss="modal" onclick="resetSelectpicker()"/>
</div>
</div>
</div>
</div>
</form:form>
This is spring form in jsp page. After I clicked submit button, I was sending request to controller, and all my form input(name, surname,... and other) were reset, but after I clicked close button, they contain value, and I want reset all form:input, when I clicked close button. I suppose, thet I must reset object /commandName="user"/.
Try changing button type to reset
<button type="reset" class="close" data-dismiss="modal" aria-hidden="true">×</button>