Thymeleaf dynamic href using input value(s)
0
I understand that Thymeleaf templates are rendered server-side, but is there a simple way to reference input values client side to create an href dynamically?
Here is what I currently have:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Dynamic href</h1>
<p>name: <input type="text" name="name" /></p>
<p>age: <input type="text" name="age"/></p>
<p>color: <input type="text" name="color"/></p>
<a th:href="@{/userInfo(name='Americord',age='32',color='green')}">Submit</a>
</body>
</html>
Inside of my application controller I have:
@GetMapping(value = "/userInfo")
public String userInfo(@RequestParam(value = "name") String name,
@RequestParam(value = "age") String age,
@RequestParam(value = "color") String color) {
// get user related user information
return "success";
}
As you can see, right now the values for name, age & color are simply hard-coded. But I would like to reference the values from the input fields.
Maybe something like(?) :
<a th:href="@{/userInfo(name={name.value},age={age.value},color={color.value})}">
Submit
</a>
spring-mvc input dynamic thymeleaf href
asked Dec 28 '18 at 16:23
AmericordAmericord
32
add a comment |
0
I understand that Thymeleaf templates are rendered server-side, but is there a simple way to reference input values client side to create an href dynamically?
Here is what I currently have:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Dynamic href</h1>
<p>name: <input type="text" name="name" /></p>
<p>age: <input type="text" name="age"/></p>
<p>color: <input type="text" name="color"/></p>
<a th:href="@{/userInfo(name='Americord',age='32',color='green')}">Submit</a>
</body>
</html>
Inside of my application controller I have:
@GetMapping(value = "/userInfo")
public String userInfo(@RequestParam(value = "name") String name,
@RequestParam(value = "age") String age,
@RequestParam(value = "color") String color) {
// get user related user information
return "success";
}
As you can see, right now the values for name, age & color are simply hard-coded. But I would like to reference the values from the input fields.
Maybe something like(?) :
<a th:href="@{/userInfo(name={name.value},age={age.value},color={color.value})}">
Submit
</a>
spring-mvc input dynamic thymeleaf href
asked Dec 28 '18 at 16:23
AmericordAmericord
32
add a comment |
0
0
0
I understand that Thymeleaf templates are rendered server-side, but is there a simple way to reference input values client side to create an href dynamically?
Here is what I currently have:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Dynamic href</h1>
<p>name: <input type="text" name="name" /></p>
<p>age: <input type="text" name="age"/></p>
<p>color: <input type="text" name="color"/></p>
<a th:href="@{/userInfo(name='Americord',age='32',color='green')}">Submit</a>
</body>
</html>
Inside of my application controller I have:
@GetMapping(value = "/userInfo")
public String userInfo(@RequestParam(value = "name") String name,
@RequestParam(value = "age") String age,
@RequestParam(value = "color") String color) {
// get user related user information
return "success";
}
As you can see, right now the values for name, age & color are simply hard-coded. But I would like to reference the values from the input fields.
Maybe something like(?) :
<a th:href="@{/userInfo(name={name.value},age={age.value},color={color.value})}">
Submit
</a>
spring-mvc input dynamic thymeleaf href
asked Dec 28 '18 at 16:23
AmericordAmericord
32
I understand that Thymeleaf templates are rendered server-side, but is there a simple way to reference input values client side to create an href dynamically?
Here is what I currently have:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Dynamic href</h1>
<p>name: <input type="text" name="name" /></p>
<p>age: <input type="text" name="age"/></p>
<p>color: <input type="text" name="color"/></p>
<a th:href="@{/userInfo(name='Americord',age='32',color='green')}">Submit</a>
</body>
</html>
Inside of my application controller I have:
@GetMapping(value = "/userInfo")
public String userInfo(@RequestParam(value = "name") String name,
@RequestParam(value = "age") String age,
@RequestParam(value = "color") String color) {
// get user related user information
return "success";
}
As you can see, right now the values for name, age & color are simply hard-coded. But I would like to reference the values from the input fields.
Maybe something like(?) :
<a th:href="@{/userInfo(name={name.value},age={age.value},color={color.value})}">
Submit
</a>
spring-mvc input dynamic thymeleaf href
spring-mvc input dynamic thymeleaf href
asked Dec 28 '18 at 16:23
AmericordAmericord
32
asked Dec 28 '18 at 16:23
AmericordAmericord
32
asked Dec 28 '18 at 16:23
AmericordAmericord
32
asked Dec 28 '18 at 16:23
AmericordAmericord
32
asked Dec 28 '18 at 16:23
AmericordAmericord
32
32
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
No, the only way to do this, is by using JS or jQuery. Thymeleaf once rendered, it simply can't modify anything else. Anyways, using jQuery is quite simple and you should make it work in no time. Something like the code below would do the trick.
var ageInput = $('#age');
var nameInput = $('#name');
var url = $('#dynamic-url');
ageInput.on('change', function() {
if($(this).val() !== "" && nameInput.val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ', name=' + name.val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ')');
} else if (nameInput.val() !== "") {
url.attr('href', '/userinfo(name=' + nameInput.val() + ')');
}
});
nameInput.on('change', function() {
if($(this).val() !== "" && ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ', name=' + $(this).val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(name=' + $(this).val() + ')');
} else if (ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ')');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="age" type="text" placeholder="age"/>
<input id="name" type="text" placeholder="name"/>
<a id="dynamic-url" href="/userinfo">
Submit
</a>Hope it helps!
answered Dec 30 '18 at 16:59
Alain CruzAlain Cruz
1,7683818
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
});
}
});
draft saved
draft discarded
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%2f53961412%2fthymeleaf-dynamic-href-using-input-values%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
0
No, the only way to do this, is by using JS or jQuery. Thymeleaf once rendered, it simply can't modify anything else. Anyways, using jQuery is quite simple and you should make it work in no time. Something like the code below would do the trick.
var ageInput = $('#age');
var nameInput = $('#name');
var url = $('#dynamic-url');
ageInput.on('change', function() {
if($(this).val() !== "" && nameInput.val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ', name=' + name.val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ')');
} else if (nameInput.val() !== "") {
url.attr('href', '/userinfo(name=' + nameInput.val() + ')');
}
});
nameInput.on('change', function() {
if($(this).val() !== "" && ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ', name=' + $(this).val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(name=' + $(this).val() + ')');
} else if (ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ')');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="age" type="text" placeholder="age"/>
<input id="name" type="text" placeholder="name"/>
<a id="dynamic-url" href="/userinfo">
Submit
</a>Hope it helps!
answered Dec 30 '18 at 16:59
Alain CruzAlain Cruz
1,7683818
add a comment |
0
No, the only way to do this, is by using JS or jQuery. Thymeleaf once rendered, it simply can't modify anything else. Anyways, using jQuery is quite simple and you should make it work in no time. Something like the code below would do the trick.
var ageInput = $('#age');
var nameInput = $('#name');
var url = $('#dynamic-url');
ageInput.on('change', function() {
if($(this).val() !== "" && nameInput.val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ', name=' + name.val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ')');
} else if (nameInput.val() !== "") {
url.attr('href', '/userinfo(name=' + nameInput.val() + ')');
}
});
nameInput.on('change', function() {
if($(this).val() !== "" && ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ', name=' + $(this).val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(name=' + $(this).val() + ')');
} else if (ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ')');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="age" type="text" placeholder="age"/>
<input id="name" type="text" placeholder="name"/>
<a id="dynamic-url" href="/userinfo">
Submit
</a>Hope it helps!
answered Dec 30 '18 at 16:59
Alain CruzAlain Cruz
1,7683818
add a comment |
0
0
0
No, the only way to do this, is by using JS or jQuery. Thymeleaf once rendered, it simply can't modify anything else. Anyways, using jQuery is quite simple and you should make it work in no time. Something like the code below would do the trick.
var ageInput = $('#age');
var nameInput = $('#name');
var url = $('#dynamic-url');
ageInput.on('change', function() {
if($(this).val() !== "" && nameInput.val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ', name=' + name.val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ')');
} else if (nameInput.val() !== "") {
url.attr('href', '/userinfo(name=' + nameInput.val() + ')');
}
});
nameInput.on('change', function() {
if($(this).val() !== "" && ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ', name=' + $(this).val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(name=' + $(this).val() + ')');
} else if (ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ')');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="age" type="text" placeholder="age"/>
<input id="name" type="text" placeholder="name"/>
<a id="dynamic-url" href="/userinfo">
Submit
</a>Hope it helps!
answered Dec 30 '18 at 16:59
Alain CruzAlain Cruz
1,7683818
No, the only way to do this, is by using JS or jQuery. Thymeleaf once rendered, it simply can't modify anything else. Anyways, using jQuery is quite simple and you should make it work in no time. Something like the code below would do the trick.
var ageInput = $('#age');
var nameInput = $('#name');
var url = $('#dynamic-url');
ageInput.on('change', function() {
if($(this).val() !== "" && nameInput.val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ', name=' + name.val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ')');
} else if (nameInput.val() !== "") {
url.attr('href', '/userinfo(name=' + nameInput.val() + ')');
}
});
nameInput.on('change', function() {
if($(this).val() !== "" && ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ', name=' + $(this).val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(name=' + $(this).val() + ')');
} else if (ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ')');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="age" type="text" placeholder="age"/>
<input id="name" type="text" placeholder="name"/>
<a id="dynamic-url" href="/userinfo">
Submit
</a>Hope it helps!
var ageInput = $('#age');
var nameInput = $('#name');
var url = $('#dynamic-url');
ageInput.on('change', function() {
if($(this).val() !== "" && nameInput.val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ', name=' + name.val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ')');
} else if (nameInput.val() !== "") {
url.attr('href', '/userinfo(name=' + nameInput.val() + ')');
}
});
nameInput.on('change', function() {
if($(this).val() !== "" && ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ', name=' + $(this).val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(name=' + $(this).val() + ')');
} else if (ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ')');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="age" type="text" placeholder="age"/>
<input id="name" type="text" placeholder="name"/>
<a id="dynamic-url" href="/userinfo">
Submit
</a>var ageInput = $('#age');
var nameInput = $('#name');
var url = $('#dynamic-url');
ageInput.on('change', function() {
if($(this).val() !== "" && nameInput.val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ', name=' + name.val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(age=' + $(this).val() + ')');
} else if (nameInput.val() !== "") {
url.attr('href', '/userinfo(name=' + nameInput.val() + ')');
}
});
nameInput.on('change', function() {
if($(this).val() !== "" && ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ', name=' + $(this).val() + ')');
} else if ($(this).val() !== "") {
url.attr('href', '/userinfo(name=' + $(this).val() + ')');
} else if (ageInput.val() !== "") {
url.attr('href', '/userinfo(age=' + ageInput.val() + ')');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="age" type="text" placeholder="age"/>
<input id="name" type="text" placeholder="name"/>
<a id="dynamic-url" href="/userinfo">
Submit
</a>answered Dec 30 '18 at 16:59
Alain CruzAlain Cruz
1,7683818
answered Dec 30 '18 at 16:59
Alain CruzAlain Cruz
1,7683818
answered Dec 30 '18 at 16:59
Alain CruzAlain Cruz
1,7683818
answered Dec 30 '18 at 16:59
Alain CruzAlain Cruz
1,7683818
1,7683818
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53961412%2fthymeleaf-dynamic-href-using-input-values%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
