How to add default values to input fields in Thymeleaf - html

I am programming in Spring and using Thymeleaf as my view, and am trying to create a form where users can update their profile. I have a profile page which lists the user's information (first name, last name, address, etc), and there is a link which says "edit profile". When that link is clicked it takes them to a form where they can edit their profile. The form consists of text fields that they can input, just like your standard registration form.
Everything works fine, but my question is, when that link is clicked, how do I add the user's information to the input fields so that it is already present, and that they only modify what they want to change instead of having to re-enter all the fields.
This should behave just like a standard "edit profile" page.
Here is a segment of my edit_profile.html page:
First Name:
Here is the view controller method that returns edit_profile.html page:
#RequestMapping(value = "/edit", method = RequestMethod.GET)
public String getEditProfilePage(Model model) {
model.addAttribute("currentUser", currentUser);
System.out.println("current user firstname: " + currentUser.getFirstname());
model.addAttribute("user", new User());
return "edit_profile";
}
currentUser.getFirstname() prints out the expected value, but I'm getting blank input values in the form.
Thanks.

Solved the problem by removing th:field altogether and instead using th:value to store the default value, and html name and id for the model's field. So name and id is acting like th:field.

I'm slightly confused, you're adding currentUser and a new'd user object to the model map.
But, if currentUser is the target object, you'd just do:
<input type="text" name="firstname" value="James" th:value="${currentUser.firstname}" />
From the documentation:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

I did not have a form with input elements but only a button that should call a specific Spring Controller method and submit an ID of an animal in a list (so I had a list of anmials already showing on my page). I struggled some time to figure out how to submit this id in the form. Here is my solution:
So I started having a form with just one input field (that I would change to a hidden field in the end). In this case of course the id would be empty after submitting the form.
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:field="*{id}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
The following did not throw an error but neither did it submit the animalIAlreadyShownOnPage's ID.
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:value="${animalIAlreadyShownOnPage.id}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
In another post user's recommended the "th:attr" attribute, but it didn't work either.
This finally worked - I simply added the name element ("id" is a String attribute in the Animal POJO).
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:value="${animalIAlreadyShownOnPage.id}" name="id" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>

Related

How To Make User Input Match Using JavaScript for Form Validation

I have seen similar questions but they were not asked the same way I want to ask my question.
How can I use javascript to make sure that the email a user provides matches with the email that I want them to provide before the form gets submitted after the user hits the submit button.
Elaboration:
The correct email address is badmansmo#gmail.com.
My form input placeholder shows b.........o#.....com as a hint.
If the user inputs any email that does not match with badmansmo#gmail.com
I want them to get an error message and the form should not be submitted.
How can I do this with javascript?
See my code below.
<form action='' method='POST' enctype="multipart/form-data">
<div class='item'>
<p><b><span style="color: red;">Email Address</span></b><span class='required'>*</span></p>
<input type="email" name="email" placeholder="ba******o#***.com" required=''/>
</div>
<div class='question'>
<center><p>Privacy Policy<span class='required'>*</span></p></center>
<div class='question-answer checkbox-item'>
<div>
<center><label class='check' for='check_1'><span>By submitting this form you agree to the terms of service privacy policy.</span></label></center>
</div>
</div>
</div>
<div class='btn-block'>
<center> <button href='/' type='submit' id="submitForm">Submit</button></center>
</div></form>
If I'm correct, you need to add and change a few things so it would work.
First, add an 'id' attribute to the email input field like this (so we can link the form to the javascript code later on):
input type="email" name="email" placeholder="ba******o#***.com" required='' id="email"/>
Then, add the following script at the beginning of the page (between the and the tags). This script compares the entered email and shows a message if they are not matching.
<script type="text/javascript">
function check_email()
{
var email = document.getElementById("email").value;
if(email.localeCompare("badmansmo#gmail.com")) {
alert("ERROR. Email does not match.");
return false;
}
return true;
}
Finally, add the 'onsubmit' attribute to the tag like this (if the function that checks the email returns false, then the form won't be sent):
<form action='' method='POST' enctype="multipart/form-data" onsubmit="return check_email();">
I hope this works for you :)

How do I remove a parameter with blank response from URL generated by the <form> tag?

I am writing a search box in HTML that takes the user input and append it to the URL as a parameter. The code of the form looks like this.
<form name="form" action="" method="get">
<input type="text" name="id" id="idresponse">
<input type="submit" value="Submit">
</form>
This will bring the user from example.com/test.html to example.com/test.html?id=12345678 assuming they entered 12345678 at the text box.
However, if the user inputted nothing and clicked Submit, they will be brought to example.com/test.html?id=, which I don't want. How can I modify the code so that the form knows that a certain field is left blank and do not send the parameter with the URL? In this case, the desired URL would be example.com/test.html.
edit 20210405 2057 changed the id of the input from idresposne to idresponse to avoid confusion
The so-called URL parameters is the querystring of the URL.
The following code does not use jQuery, but achieves a similar effect. (written by RobG)
<form name="form" onsubmit="disableEmptyInputs(this)" action="" method="get">
<input type="text" name="id" id="idresponse">
<input type="submit" value="Submit">
</form>
<script>
function disableEmptyInputs(form) {
var controls = form.elements;
for (var i=0, iLen=controls.length; i<iLen; i++) {
if (controls[i].value == '') controls[i].disabled = true;
}
}
<script>
This will remove all the parameters but the ? will still trail the URL. i.e. the URL will be example.com/test.html? instead. However, this does not matter because they both point to the same address.
Refer to these links (kindly provided by Progman) for other ways of doing this, including using jQuery.
Delete empty values from form's params before submitting it
Delete empty values from form's params before submitting it
How can I remove empty fields from my form in the querystring?
Thanks.

How to prevent the submit button from reloading the page, while keeping default form warnings?

I have a simple form to get a table's row/column numbers, with a button type = "submit" that reloads the page onClick .
I want to keep the warnings when the user enters an invalid value, since the inputs have a maximum/minimum number required, which is not possible with the return false; in the end of the onClick method, or event.preventDefault();
Any ideas how to do that?
This code is in JSX:
<form id="table_form">
<label>how many rows ?</label>
<input
type="number"
name="rows"
min={min_tablerows}
max={max_tablerows}
required
value={tablerows}
onChange={onChangeHandeler} />
<label>how many columns ?</label>
<input
type="number"
name="columns"
min={min_tablecolumns}
required
value={tablecolumns}
onChange={onChangeHandeler} />
<button
type="submit"
form="table_form"
onClick={onClickHandeler}>
<FontAwesomeIcon icon={faCheck} />
</button>
</form>
You want to keep the default html warnings if I understand your question well. I would like to suggest the following:
Firstly, you don't need to attach onClick event handler for the button because a button in an HTML form or with the type submit by default submits to the form it is contained.
You can attach onSubmit event handler to the main form and in its callback function prevent the default behaviour.
With this, html5 will handle any errors and prevent the form from even submitting in the first place. When it doesn't find any error, it will run the callback function attached to the form's event handler.
So your code might be as follows:
handleSubmit(e) {
e.preventDefault();
// Do what you like here
e.target.submit(); // if you want to submit the forms
}
<form id="table_form" onSubmit={this.handleSumbit.bind(this)}>
<label>how many rows ?</label>
<input
type="number"
name="rows"
min={min_tablerows}
max={max_tablerows}
required
value={tablerows}
onChange={onChangeHandeler} />
<label>how many columns ?</label>
<input
type="number"
name="columns"
min={min_tablecolumns}
required
value={tablecolumns}
onChange={onChangeHandeler} />
<button
type="submit">
<FontAwesomeIcon icon={faCheck} />
</button>
</form>

get input form not as variable but as url

I am building a webservice so people can search into the database. Lets say I have users and companies. Each user and company can be found thought their id. So if you search myurl/users/<id> you get information of that user, on the other hand if you search company/ you get information of that company.
For this I have created two simple input texts (one for users and another for companies) where people can type the <id>. My problem is that when I get the value from the input text I get this myrul/users?<id> and not myurl/users/id. I tried to hardcode the slash but then I get myrul/users/?<id>.
So my question is how can I get input text as a url and not as a variable.
I am using flask so my html has jinja2 code like this:
<!-- USER id -->
<form method='GET' action={{url_for('get_info_by_id', type_collection='user')}}>
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
<!-- COMPANY id-->
<form method='GET' action={{url_for('get_info_by_id', type_collection='company')}}>
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
In my python script (flask)
#app.route('myurl/<type_collection>/<my_id>')
get_info_by_id(type_collection,my_id):
# search into the database and return info about that id
As #dirn suggested in the commentary, I made it through JavaScript, here is the code if someone else is also interested:
HTML:
<!-- USER id -->
<form method='GET' class="search" id="user" action="">
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
<!-- COMPANY id-->
<form method='GET' class="search" id="company" action="">
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
JS:
$(".search").submit(function( event ){
event.preventDefault();
var my_id = $(this).find(":input").val();
url = 'myurl/'+ $(this).attr("id") + '/' + my_id;
window.location.href = url;
});
python (flask)
#app.route('myurl/<type_collection>/<my_id>')
get_info_by_id(type_collection,my_id):
# search into the database and return info about that id
Is there a reason you cannot use the variable, or are you just trying to get it into a URL so that you can do your search? I went out on a limb and assumed you just want the form and database search to work, so try the following out.
Adjust your route like so:
#app.route('myurl/<type_collection>/')
def findAllTheThings():
if not request.form['my_id']: # Just check if a specific entity is chosen
return render_template('YourTemplateHere') # If no entity, then render form
entity_id = request.form['my_id']
get_info_by_id(type_collection, entity_id):
# search into the database and return info about that id
Now adjust the template as follows:
<!-- USER id -->
<form method='GET' action={{url_for('findAllTheThings', type_collection='user')}}>
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
<!-- COMPANY id-->
<form method='GET' action={{url_for('findAllTheThings', type_collection='company')}}>
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
Now, if no entity has been selected you'll just render the form. You can throw in a flash to let them know they need to select a specific ID, or just let them figure it out. If an entity has been selected, you will call the fucntion correctly.

Conditional Formatting in Html?

I am writing a website and I am currently working on the sign up page. I have a drop down box and I want to have that drop down box open different sign up information for each one. For example: If they picked prime user it would change the sign up information they needed from just username and password to username, password, credit card number, and telephone number . OR if they picked partial user from the drop down list it would ask for username password and telephone. Any clue how to do this in HTML or any other computer language?
Assuming html like this:
Type:<br>
one <input type="radio" name="type" id="type-1" value="1" /><br>
two <input type="radio" name="type" id="type-2" value="2" />
<hr>
<form action="." METHOD="POST">
<input class="second" type="text" name="name" id="name" value="name" />
<input class="second" type="text" name="email" id="email" value="email" />
<input class="second" type="text" name="credit-card" id="credit-card" value="credit card" />
</form>
And css like this: (to hide all the form fields except for type choice)
.second{
display:none
}
You can use jQuery javascript library to show/hide the required form fields dynamically like this:
// when type radio button is pressed
$('#type-1,#type-2').change(function(){
// hide all form fields
$('.second').hide()
// if type is 1
if($('#type-1:checked').length){
// show name and email fields
$('#name,#email').show()
// else if type is 2
}else if($('#type-2:checked').length){
// show name, email and credit-card fields
$('#name,#email,#credit-card').show()
}
})
This is demonstrated here: http://jsfiddle.net/rBvLA/
The result must be processed by server side script using any language you choose.
You might want to look into any of the many fine server side tools available, such as asp.net, php, etc... you could also use javascript.
For instance, using JavaScript, you could have an event fire when they change the drop down and in the code for that event handler, you could modify the DOM in such a way as to display the appropriate form elements for each selection.
another jQuery solution:
Live Demo
$('#reg_type input[type=radio]').change(function() {
var type = $(this).attr('class');
$('#reg_fields div').each(function() {
if ($(this).hasClass(type)) {
$(this).show().removeAttr('disabled');
} else {
$(this).hide().attr('disabled','disabled');
}
});
});