thymeleaf -Pass id of a selected option
I have a select element that uses th:each to list all objects in a repository, I need to select one of them and also send to the controller the ID of the selected item.
This is a snippet of the HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${{bmonitor.domainName}}"
th:text="${bmonitor.domainName}">
</option>
</select>
</div>
</div>
</form>
I tried adding a field within the option but it doesn't work.
spring html5 spring-boot thymeleaf
asked Nov 13 '18 at 4:10
David Salas BoscanDavid Salas Boscan
165
add a comment |
I have a select element that uses th:each to list all objects in a repository, I need to select one of them and also send to the controller the ID of the selected item.
This is a snippet of the HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${{bmonitor.domainName}}"
th:text="${bmonitor.domainName}">
</option>
</select>
</div>
</div>
</form>
I tried adding a field within the option but it doesn't work.
spring html5 spring-boot thymeleaf
asked Nov 13 '18 at 4:10
David Salas BoscanDavid Salas Boscan
165
Do you need the domainName? I would argue that having it's id is more important, since you can easily fetch the rest of the information. Anyways, there are ways to do this, but seeing your entities would help a lot.
– Alain Cruz
Nov 13 '18 at 4:57
add a comment |
I have a select element that uses th:each to list all objects in a repository, I need to select one of them and also send to the controller the ID of the selected item.
This is a snippet of the HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${{bmonitor.domainName}}"
th:text="${bmonitor.domainName}">
</option>
</select>
</div>
</div>
</form>
I tried adding a field within the option but it doesn't work.
spring html5 spring-boot thymeleaf
asked Nov 13 '18 at 4:10
David Salas BoscanDavid Salas Boscan
165
I have a select element that uses th:each to list all objects in a repository, I need to select one of them and also send to the controller the ID of the selected item.
This is a snippet of the HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${{bmonitor.domainName}}"
th:text="${bmonitor.domainName}">
</option>
</select>
</div>
</div>
</form>
I tried adding a field within the option but it doesn't work.
spring html5 spring-boot thymeleaf
spring html5 spring-boot thymeleaf
asked Nov 13 '18 at 4:10
David Salas BoscanDavid Salas Boscan
165
asked Nov 13 '18 at 4:10
David Salas BoscanDavid Salas Boscan
165
asked Nov 13 '18 at 4:10
David Salas BoscanDavid Salas Boscan
165
asked Nov 13 '18 at 4:10
David Salas BoscanDavid Salas Boscan
165
asked Nov 13 '18 at 4:10
David Salas BoscanDavid Salas Boscan
165
165
Do you need the domainName? I would argue that having it's id is more important, since you can easily fetch the rest of the information. Anyways, there are ways to do this, but seeing your entities would help a lot.
– Alain Cruz
Nov 13 '18 at 4:57
add a comment |
Do you need the domainName? I would argue that having it's id is more important, since you can easily fetch the rest of the information. Anyways, there are ways to do this, but seeing your entities would help a lot.
– Alain Cruz
Nov 13 '18 at 4:57
Do you need the domainName? I would argue that having it's id is more important, since you can easily fetch the rest of the information. Anyways, there are ways to do this, but seeing your entities would help a lot.
– Alain Cruz
Nov 13 '18 at 4:57
Do you need the domainName? I would argue that having it's id is more important, since you can easily fetch the rest of the information. Anyways, there are ways to do this, but seeing your entities would help a lot.
– Alain Cruz
Nov 13 '18 at 4:57
add a comment |
1 Answer
1
active
oldest
votes
You can solve this, using jQuery and Thymeleaf th:data tag. The th:data allows you to add any dynamic data tag to your elements. This tag will hold the id for each bmonitor and whenever the value of the select change, we will set the value of a hidden input, which will also be posted to your controller.
HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${bmonitor.domainName}"
th:text="${bmonitor.domainName}">
th:data="${bmonitor.id}"
</option>
</select>
<input name="bmonitor-id" id="bmonitor-id" hidden="hidden" value=""/>
</div>
</div>
</form>
jQuery
$('.custom-select').on('change', function() {
var id = $(this).attr('data');
$('#bmonitor-id').val(id);
})
// We must set the initial value, otherwise it will be null for the first option.
$('#bmonitor-id').val($('.custom-select option:selected').attr('data'));
Of course, you will need to add a @RequestParam to your controller to catch the new input.
answered Nov 13 '18 at 12:46
Alain CruzAlain Cruz
1,8283818
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273677%2fthymeleaf-pass-id-of-a-selected-option%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can solve this, using jQuery and Thymeleaf th:data tag. The th:data allows you to add any dynamic data tag to your elements. This tag will hold the id for each bmonitor and whenever the value of the select change, we will set the value of a hidden input, which will also be posted to your controller.
HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${bmonitor.domainName}"
th:text="${bmonitor.domainName}">
th:data="${bmonitor.id}"
</option>
</select>
<input name="bmonitor-id" id="bmonitor-id" hidden="hidden" value=""/>
</div>
</div>
</form>
jQuery
$('.custom-select').on('change', function() {
var id = $(this).attr('data');
$('#bmonitor-id').val(id);
})
// We must set the initial value, otherwise it will be null for the first option.
$('#bmonitor-id').val($('.custom-select option:selected').attr('data'));
Of course, you will need to add a @RequestParam to your controller to catch the new input.
answered Nov 13 '18 at 12:46
Alain CruzAlain Cruz
1,8283818
add a comment |
You can solve this, using jQuery and Thymeleaf th:data tag. The th:data allows you to add any dynamic data tag to your elements. This tag will hold the id for each bmonitor and whenever the value of the select change, we will set the value of a hidden input, which will also be posted to your controller.
HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${bmonitor.domainName}"
th:text="${bmonitor.domainName}">
th:data="${bmonitor.id}"
</option>
</select>
<input name="bmonitor-id" id="bmonitor-id" hidden="hidden" value=""/>
</div>
</div>
</form>
jQuery
$('.custom-select').on('change', function() {
var id = $(this).attr('data');
$('#bmonitor-id').val(id);
})
// We must set the initial value, otherwise it will be null for the first option.
$('#bmonitor-id').val($('.custom-select option:selected').attr('data'));
Of course, you will need to add a @RequestParam to your controller to catch the new input.
answered Nov 13 '18 at 12:46
Alain CruzAlain Cruz
1,8283818
add a comment |
You can solve this, using jQuery and Thymeleaf th:data tag. The th:data allows you to add any dynamic data tag to your elements. This tag will hold the id for each bmonitor and whenever the value of the select change, we will set the value of a hidden input, which will also be posted to your controller.
HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${bmonitor.domainName}"
th:text="${bmonitor.domainName}">
th:data="${bmonitor.id}"
</option>
</select>
<input name="bmonitor-id" id="bmonitor-id" hidden="hidden" value=""/>
</div>
</div>
</form>
jQuery
$('.custom-select').on('change', function() {
var id = $(this).attr('data');
$('#bmonitor-id').val(id);
})
// We must set the initial value, otherwise it will be null for the first option.
$('#bmonitor-id').val($('.custom-select option:selected').attr('data'));
Of course, you will need to add a @RequestParam to your controller to catch the new input.
answered Nov 13 '18 at 12:46
Alain CruzAlain Cruz
1,8283818
You can solve this, using jQuery and Thymeleaf th:data tag. The th:data allows you to add any dynamic data tag to your elements. This tag will hold the id for each bmonitor and whenever the value of the select change, we will set the value of a hidden input, which will also be posted to your controller.
HTML
<form th:action="@{/checkApiMethods}" th:object="${bmonitor}" method="post">
<input type="hidden" th:field="*{objectId}" />
<div class="row">
<div class="col">
<select th:field="*{domainName}" class="custom-select mr-sm-2">
<option th:each="bmonitor : ${bmonitors}" th:value="${bmonitor.domainName}"
th:text="${bmonitor.domainName}">
th:data="${bmonitor.id}"
</option>
</select>
<input name="bmonitor-id" id="bmonitor-id" hidden="hidden" value=""/>
</div>
</div>
</form>
jQuery
$('.custom-select').on('change', function() {
var id = $(this).attr('data');
$('#bmonitor-id').val(id);
})
// We must set the initial value, otherwise it will be null for the first option.
$('#bmonitor-id').val($('.custom-select option:selected').attr('data'));
Of course, you will need to add a @RequestParam to your controller to catch the new input.
answered Nov 13 '18 at 12:46
Alain CruzAlain Cruz
1,8283818
answered Nov 13 '18 at 12:46
Alain CruzAlain Cruz
1,8283818
answered Nov 13 '18 at 12:46
Alain CruzAlain Cruz
1,8283818
answered Nov 13 '18 at 12:46
Alain CruzAlain Cruz
1,8283818
1,8283818
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273677%2fthymeleaf-pass-id-of-a-selected-option%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do you need the domainName? I would argue that having it's id is more important, since you can easily fetch the rest of the information. Anyways, there are ways to do this, but seeing your entities would help a lot.
– Alain Cruz
Nov 13 '18 at 4:57