Something is keeping me from setting a path variable with Thymeleaf and HTML in an HTML Form.
I want to simply enter 33 into a form and get localhost:8080/blog/33 for a url, but I can only get a query string or malformed brackets and etc.
some example attempts and results:
th:action="#{/blog/{id}(id = ${id})}"
localhost:8080/blog/?id=33
th:action="#{/blog/+ ${id}}"
localhost:8080/blog/+%20$%7Bid%7D?id=33
what I want is:
localhost:8080/blog/33
the whole code for this form is below:
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Form Submission</title>
<style>
button{
margin-top:20px;
width: 250px;
}
</style>
</head>
<body>
<h2>Delete Entry</h2>
<form action="#" th:action="#{/blog/{id}(id = ${id})}" th:object="${blog}" method="get" >
<fieldset>
<p>Delete ID: <input type="text" th:field="*{id}" required /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</fieldset>
</form>
<button onclick="window.location.href = '/'">Menu</button>
</body>
</html>
This syntax is correct: #{/blog/{id}(id = ${id})}.
The reason you are getting localhost:8080/blog/?id=33 is probably because ${id} is empty when the form is created, and when you click the submit button, it is adding ?id=33 to the url (because the method is get and you have an input with the same name="id": <input type="text" th:field="*{id}" required />.
There is no html/thymeleaf way (without javascript) to get a form field into the path part of a URL (if that is what you're expecting). You'll have to use a javascript library if you want that to happen.
Related
Making a little search engine. The idea is to take input from the user and then based on that, make a redirection to the search page.
The following code:
<form action ="/search.html">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!"><hr>
<input type="submit" name="query" value="Search!">
</form>
Always redirects to the following page regardless of what the input user has given:
/search.html?query=++Search%21++
While (for the input "Suppose This Was Entered") it should go to:
/search.html?query=Suppose++This++Was++Entered
Any help will be appreciated.
The var name used in the query string of the url is the name attribute of the form fields so you need add a name atribute to your text field instead to the submit input.
<form action ="/search.html">
<label for="query"></label>
<input type="text" id="query" name="query" placeholder="TYPE HERE!"><hr>
<input type="submit" value="Search!">
</form>
The id and the name in the text field not necessary has to be the same
You can create a function that gets called when the form submits via the form's onsubmit attribute. From within the funciton you can manipulate your URL generation like below:
Note: return false; is to prevent submitting the form since the return value of the function is passed to the form's onsubmit.
function submitFunction() {
let searchText = document.getElementById("form-search").value.trim();
let form = document.getElementById('myForm');
if(searchText.length > 0) {
document.getElementById("s").value = searchText;
form.action = "/search.html";
form.submit();
} else {
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Title of Your page</title>
</head>
<body>
<form id="myForm" method="get" onsubmit="return submitFunction();">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!" value="" >
<input type="hidden" id="s" name="query" value="" />
<hr>
<input type="submit" value="Search!">
</form>
</body>
</html>
I am trying to make a link, and place a variable in the URL like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Main Page
<input type="color" id="colorPicker" value="#808080">
</body>
<html>
I am trying to send the user to index.html?color=VALUE GOES HERE. Instead of VALUE GOES HERE, I would like the current color input value.
You may use forms ,
The method attribute specifies how to send form-data (the form-data is
sent to the page specified in the action attribute).
The form-data can be sent as URL variables (with method="get")
<form action="index.html" method="get">
<input type="color" name="color" value="#808080">
<input type="submit" value="Submit">
</form>
The only way that I can think to do this is with JavaScript, so sorry if this is not what you are looking for:
function urlUpdate(hex) {
document.getElementById("link").href = "index.html?color=" + hex;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a id='link' href="index.html?color=">Main Page</a>
<input type="color" id="colorPicker" value="#808080" onchange="urlUpdate(value)">
</body>
<html>
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<form action="/check" id="demo" method="post" name="demo">
<input type="text" name="username" />username
<button type="button"
onclick="form.change_color.style.backgroundColor='#00FF00';">change
fieldset background</button>
<button type="button"
onclick="activateFieldset()">activate fieldset</button>
<input type="submit" value="submit" />
</form>
<fieldset form="demo" name="change_color">
<input type="password" name="password" />password
</fieldset>
<fieldset form="demo" disabled="disabled" name="license" id="license">
<input type="text" name="license_id" />license_id
</fieldset>
<script>
function activateFieldset(){
var e = document.getElementById("license");
e.disabled = "";
}
</script>
</body>
</html>
I fill in a, b and c into the username, change_color and license_id text box, but the browser only upload the data in username.
I tried Chrome/Opera/Firefox, they all worked like that.
Can anyone tell me why the browser doesn't upload the data in the element?
Thanks a lot!
Unlike some commenters state, it is very possible to have reassociateable elements out of a form, trough the use of an explicit FORM attribute, according to HTML5 RFC (though I agree that it is nicer to have them all grouped within the form).
And in your case, though you have specified well the form attribute in the fieldset, it happens that the elements which must have the form attribute are the INPUT ones.
i'm trying to avoid the validation in a input of type image but with IE10 seems that doesn't work if the input is a image type.
Someone know a solution to avoid the validation or similar? Thanks in advance.
Here the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo.asp" method="post">
E-mail: <input type="email" name="userid" required>
<input type="submit">
<input type="submit" formnovalidate value="submit as admin">
<input type="image" formnovalidate value="no validation">
</form>
</body>
</html>
I know it is an older question but you could add the following function:
handleSubmit(element) {
var form = document.forms[0] ;
form.noValidate = !!element.formnovalidate ;
return true;
}
then attach the function to the submit buttons with handleSubmit(this)
I have a HTML form and on that I have to enter a text value on validating the text value the next page will be loaded
here is the code below describing my problem
<form action="http://abcd.com/sample/new/1" method="POST">
<p>
<input type="text" name="**answer**" onkeyup="valid(this)" onblur="valid(this)"/>
</p>
<p><input type="submit" name="submit" value="check" /></p>
</form>
I need the text value for "answer" so that it proceeds to next page say example "http://abcd.com/sample/new/2"
You can use JQuery to do this:
$("#YOURTEXTBOX").val();
Remember you have to put an id for your textbox for it to work.
Then you can use if statement to do the validation on client side.
You can also use server side code to do so.
I am not sure what you are expecting,
Looks like a small html validation.
You can use javascript for validation.
Here is small example :
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Let me know if you need anything more thatn this...
try this : W3Schools