We Keep Coding

Changing HTML form layout based on select option selected using Thymeleaf

Is it possible to set a variable in thymeleaf and then change it depending on an option in a select element and then display a specific div based on the selection? Here's what I mean.
I have three options in select:
1) DESKTOP_PC
2) LAPTOP_PC
3) TABLET_PC
When the user selects DESKTOP_PC, I would like to show the div with the related inputs for it. Likewise if it's LAPTOP_PC or TABLET_PC.
Only problem is, I'm not sure how I would go about doing this.
The other thing, is that I have the following:
In my entry class I have an enum class:
public static enum Type {
DESKTOP_PC,
LAPTOP_PC,
TABLET_PC
}
In my Thymeleaf form, I have the following to access and display this enum:
<div class="section-question">
<p>Type</p>
<select name="type" th:field="$*{type}">
<option th:each="type : ${T(com.project.entities.Entry.Type).values()}" th:value="${type}" th:text="${type}" ></option>
</select>
</div>
Any help would be much appreciated!
Thanks

it is very possible, but has very little to do with Java or Thymeleaf, even though you could do it with them too (not recommended)
All you need to do is create basic JavaScript function that onClick to different options makes different divs visible (through adding/removing classes with css defined in them like display: none;).
Of course you could implement it on backend, through each click being a separate request sent to a controller that then saves the option into a for example boolean variable and based on this variable returns a different thymeleaf view but that is an awkward looking solution for such simple case that doesn't really require backend processing.
Any simple book on JS will show you how to do this, I can recommend A smarter way to learn JS for this scenario

To achieve what you want we need to to take help of Javascript or jQuery.
Write an onchange function on select tag.
Get the value of option selected inside the function.
Show/hide div depending on value
Vote if it helps you

Click on different html class with the same name

I have an html radiobox with Yes or Not choice.
But the Yes and Not class have the same class name.
CODE FOR YES
<div class="quantumWizTogglePaperradioRadioContainer"><div class="quantumWizTogglePaperradioOffRadio exportOuterCircle"><div class="quantumWizTogglePaperradioOnRadio exportInnerCircle"></div></div></div>
CODE FOR NOT
<div class="quantumWizTogglePaperradioRadioContainer"><div class="quantumWizTogglePaperradioOffRadio exportOuterCircle"><div class="quantumWizTogglePaperradioOnRadio exportInnerCircle"></div></div></div>
When I use this code, the program click on the first one in the radiobox form.
radioButton = String.format("//div[#class='quantumWizTogglePaperradioOffRadio exportOuterCircle']");
driver.findElement(By.xpath(radioButton)).click();
how can I recognize them?

If there are only 2 radiobox, use this in the order
First radiobox :
radioButton = String.format("(//div[#class='quantumWizTogglePaperradioOffRadio exportOuterCircle'])[1]");
Second radiobox :
radioButton = String.format("(//div[#class='quantumWizTogglePaperradioOffRadio exportOuterCircle'])[2]");

I will suggest using absolute XPath rather than relative XPath it might resolve it. please see below how absolute XPath is different from relative using the google search bar.
Relative XPath - `//*[#id="tsf"]/div[2]/div/div[1]/div/div[1]/input`
absolute XPath - `/html/body/div/div[3]/form/div[2]/div/div[1]/div/div[1]/input`
or you can use the reference of other elements, For example, suppose if you have a div before with yes and no option with id="Radiobutton". you can still recognize yes and no as below as
yes - //*[#id="Radiobutton"]/div[1]
No - //*[#id="Radiobutton"]/div[2]
Let me know if you need any clarification
You can see above the radio button I can give you an example with that. so we are trying to get possible Paths for radio buttons in div highlighted in black. similar to your problem it has the same class name. so below are the some of possible ways to do it
relative XPath Using Form id which is up in the hierarchy
Yes - `//*[#id="create-form"]/div[3]/div/div/div/ul/li/div[2]/div/div/div[1]`
No - `//*[#id="create-form"]/div[3]/div/div/div/ul/li/div[2]/div/div/div[2]`
Using Absolute path - the absolute path is tracking hierarchy from top to the element. In this case it will be
Yes - `/html/body/div/section/div/div/div/div/form/div[3]/div/div/div/ul/li/div[2]/div/div/div[1]`
No - `/html/body/div/section/div/div/div/div/form/div[3]/div/div/div/ul/li/div[2]/div/div/div[2]`
If you see the difference here between 1 and 2. In absolute path instead of starting from form id as a reference, it starts right from HTML tag and tracks the element in DOM tree.

Unable to click on item from 'onclick' partial value even xpath

Is it possible to click an element through selenium by a partial value of an onclick element? I had try using xpath but it seems not working even on partial value.
There are multiple input items on a page, and I only need to onclick on specific string = 锁定. Kindly advise , Thanks you
HTML:
<button class="button_d" onclick="lock('/deposit/ajaxLock.html?oid=12016062862662862','锁定')">锁定</button>
<button style="display:" class="button_d" onclick="depositOk(this , '12016062862662862',53309)">确定</button>
MY CODE :
driver.findElement(By.xpath(".//input[contains(#onclick, '锁定')]")).click();

I'm not an XPath expert but this CSS selector should do what you ask. It's looking for a BUTTON that has an onclick attribute that contains the string, 锁定.
driver.findElement(By.cssSelector("button[onclick*='锁定']")).click();
You could also just look for a BUTTON that contains the desired string. The onclick string and button text seem to be the same, at least in the example HTML you provided.
Some CSS selector references if you want to learn more...
CSS Selector reference
CSS Selector Tips

Selenium / ChromeDriver - Clicking in the center of an element

So I ran into a new issue today that I have not experienced for, and it relates to the nature of the Chrome Driver (I believe Chrome is the only one that does this..). I am aware that when you click an element using .click() it clicks in the center. However this is troubling because I am trying to click a checkbox that just so happens to have a link nested in the center.
I have tried using the JavaScript Executor as well and no luck.. Does anyone know a way around this? Yes I have tried just accessing the box but it doesnt have an identifier I can use..

You can click using coordinates
Coordinates co = element.getCoordinates();

This issue could be resolved by two methods
Method 1: Find correct xpath of checkboxx use default click
driver.findElement(By.xpath("CheckBoxXPath").click();
Method 2: If you really want to click on centre of WebElement then you Actions class method click(WebElement target) this method click on mid of WebElement.
Refer How to use Actions class clcik method

Since you didn't add here the check box html I will assume it is something like:
<input type="checkbox" id="checkbox_id">
<label for="checkbox_id">Something</label>
So you just have to click the input and not the label. It will look like this:
driver.findElemnt(By.id("checkbox_id")).click();
Or using xPath:
driver.findElemnt(By.xpath("//input[#type='checkbox']")).click();

Clicking on a button based on some text in div

How can I click on a button based on the text "See More" or "Sign Up"
<div data-reactid=".0.0.$LandingPage.0.1.0.0.1.0.3">
<button class="arda-button btn -primary" data-reactid=".0.0.$LandingPage.0.1.0.0.1.0.3.$main-menu-see-more">See More</button>
<button class="arda-button btn -primary" data-reactid=".0.0.$LandingPage.0.1.0.0.1.0.3.$main-menu-sign-up">Sign Up</button>
</div>
</div>
Or based on the html above can you see a unique way of identifying and clicking on the two buttons?
Thanks

Identify using contains text() as 'see more' and 'sign up', should work.
By.xpath("//button[contains(text(),'See More')]")
By.xpath("//button[contains(text(),'Sign Up')]")

You can use XPATH ( Consider the Xpath is not big and Ugly) where each button will be separate.
If XPATH is ugly and long use regular Expression where data-reactid CONTAINS "main-menu-see-more" for "See More" button. And data-reactid CONTAINS main-menu-sign-up for Sign up button
"//*[contains(#data-reactid,'main-menu-see-more')]"
" //*[contains(#data-reactid,'main-menu-sign-up')]"
What about linked Text "See More" and "Sign Up".
Please share your feedback its working not......

I avoid XPath like the plague unless absolutely necessary because it's complicated, slower than other methods, and more prone to breaking (in general). I would do this using a CSS Selector.
The data-reactid is unique for each of these elements so I would use those to find the desired elements instead of the text.
driver.findElement(By.cssSelector("button[data-reactid='.0.0.$LandingPage.0.1.0.0.1.0.3.$main-menu-see-more']")).click();
This code finds a button that has the specified data-reactid and clicks it.
CSS Selectors are very powerful and it lets you avoid XPath... which is a good thing. :)
CSS Selector reference