I need help populating a date field for an edit page in Thymeleaf. So Im a beginner with this but I've tried so many variations I don't know the best approach now. So Im passing the Employee list to thymeleaf with a model.addTribute("employee", employee) and the data looks like this:
Employee: Employee{id=2, name='John Smith', contractedFrom='2022-01-01', contractedTo='2022-12-31', employeeProjects=[EmployeeProject{id=1, project=Project{id=1, projectNumber=61741501, name='Project 1', startDate='2022-04-01', endDate='2022-09-30', projectLengthInMonths=3.0, currentBookedMonths=0.0, remainingBookedMonths=0.0, numberOfEmployees=0}, employeeBookedMonths=4.0, employeeProjectStartDate=2022-05-01, employeeProjectEndDate=2022-09-15, projectName='null'}, EmployeeProject{id=2, project=Project{id=2, projectNumber=61241514, name='Project 2', startDate='2022-01-01', endDate='2023-03-31', projectLengthInMonths=24.0, currentBookedMonths=0.0, remainingBookedMonths=0.0, numberOfEmployees=0}, employeeBookedMonths=4.5, employeeProjectStartDate=2022-10-01, employeeProjectEndDate=2022-12-31, projectName='null'}], projectIds=[4, 5, 7, 8], startDates=[2022-01-01, 2022-05-01, 2022-10-01, 2022-08-01], endDates=null}
So the input form has the Employee name, contractedFrom and ContractedTo which work fine, then below there is a checkbox with a date field. I can populate the checkbox using the projectsIds field, but how can I populate the dates fields with the startDates array? Or is there a better way? I've also tried creating a projectDto but I couldn't get that to work either. Here is what the dto looks like:
[ProjectDto(id=1, employeeProjectStartDate=2022-01-01, employeeProjectEndDate=2022-04-30), ProjectDto(id=2, employeeProjectStartDate=2022-05-01, employeeProjectEndDate=2022-09-15), ProjectDto(id=3, employeeProjectStartDate=2022-10-01, employeeProjectEndDate=2022-12-31), ProjectDto(id=4, employeeProjectStartDate=null, employeeProjectEndDate=null)]
Any help is greatly appreciated. Here is the form code:
<form action="#" th:action="#{/ines/updateEmployee/{id}(id=${employee.id})}" th:object="${employee}"
method="POST">
<input type="hidden" th:field="*{id}" />
<input type="text" th:field="*{name}"
placeholder="Employee Name" class="form-control mb-4 col-4">
<input type="date" th:field="*{contractedFrom}"
placeholder="Contracted From" class="form-control mb-4 col-4">
<input type="date" th:field="*{contractedTo}"
placeholder="Contracted To" class="form-control mb-4 col-4">
<div th:each="proj : ${projects}">
<div class="form-group blu-margin">
<input type="checkbox" th:field="*{projectIds}" th:name="projectId"
th:text="${proj.name}" th:value="${proj.id}">
<input type="date"
th:field="*{startDates}"
class="form-control mb-4 col-4">
<!-- <input type="date"-->
<!-- th:field="*{endDates}"-->
<!-- class="form-control mb-4 col-4">-->
</div>
</div>
<button type="submit" class="btn btn-info col-2">Save Employee</button>
</form>
Image of the page, as I said the contractedFrom/To populated but not the project startDate.
You can use indices to access individual dates in the startDates array (assuming your startDates is an array of Date (i.e. Date[] startDates).
<div th:each="proj, stats : ${projects}">
<div class="form-group blu-margin">
<input type="checkbox" th:field="*{projectIds}" th:name="projectId"
th:text="${proj.name}" th:value="${proj.id}">
<input type="date"
th:value="${startDates[stats.index]}"
class="form-control mb-4 col-4">
<!-- <input type="date"-->
<!-- th:value="${endDates[stats.index]}"-->
<!-- class="form-control mb-4 col-4">-->
</div>
Or alternatively, since your ProjectDTO already contains employeeProjectStartDate and employeeProjectEndDate fields, you can access those fields in the th:each loop by using ${proj.employeeProjectStartDate} and ${proj.employeeProjectEndDate} respectively.
I have a html source in which several input boxes are defined as follows:
<div class="jupyter-widgets widget-hbox widget-text" style="">
<div class="widget-label" style="display: block;">Project:</div>
<input type="text" class="form-control" placeholder="">
</div>
<div class="jupyter-widgets widget-hbox widget-text" style="">
<div class="widget-label" style="display: block;">Title:</div>
<input type="text" class="form-control" placeholder="">
</div>
...
How do I select the input element associated with the Project element?
This should work:
//div[contains(text(), "Project")]/following-sibling::input
First part //div[contains(text(), "Project")] will find the div element which has "Project" in text attribute, then /following-sibling::input will find the input type sibling of that div element.
Read more about these xpath functions here.
You can use something like: "//input[#type='text'][1]" or "(//input[#type='text'])[1]". Respectively the number represents the element you are looking for. Hope it helps.
I want to check the first checkbox with id=user_accepts_terms. This is the HTML:
<div class="check-group">
<div class="checkbox">
<input type="hidden" value="0" name="user[accepts_terms]">
</input>
<input id="user_accepts_terms" type="checkbox" value="1" name="user[accepts_terms]">
</input>
<label class="" for="user_accepts_terms">
</label>
</div>
<div class="checkbox">
<input type="hidden" value="0" name="user[subscribed]">
</input>
<input id="user_subscribed" type="checkbox" value="1" name="user[subscribed]">
</input>
<label class="m-focus" for="user_subscribed">
</label>
</div>
I want to check the first checkbox with id=user_accepts_terms. Tried this among other things, but no luck:
find('.check-group').all('.checkbox')[0].find("#user_accepts_terms").set(true)
The .find("#user_accepts_terms").set(true) doesn't work, it says unable to find the css.
This piece works as follows:
2.1.0 :097 > find('.check-group').all('.checkbox')[0].text
=> "I accept the terms of use and privacy policy"
The .all('.checkbox')[0] portion is already finding the checkbox you want, and the .find("#user_accepts_terms") portion is trying to find another element below that, which doesn't exist. Either of the following should work, provided the syntax is correct (I'm unfamiliar with it)
find('.check-group').find("#user_accepts_terms").set(true)
find('.check-group').all('.checkbox')[0].set(true)
I have a validation error in my HTML form, where there are radio buttons (appleiphonebuyers.com/sell.html). Error reads:
Line 155, Column 44: The for attribute of the label element must refer to a form control.
… <label for="condition" class="inline"><span class="formstar">*</span> Conditi…
Is there another way I should apply a label to the group of radio buttons besides using "label for"?
UPDATE:
Here is the HTML for those radio buttons:
<LABEL class="inline" for="condition"><SPAN class="formstar">*</SPAN> Condition</LABEL> <INPUT class="conditionselect" type="radio" name="condition" value="Good" />Good <INPUT class="conditionselect" type="radio" name="condition" value="Okay" />Okay <INPUT class="conditionselect" type="radio" name="condition" value="Bad" />Bad <BR />
It just occurred to me that maybe I have to change the INPUT class to "condition" so it's the same as the "label for" attribute? I thought it was the name that had to be the same but maybe it's the class? –
Is there another way I should apply a label to the group of radio buttons besides using "label for"?
A <label> labels a single form control, not a group of them.
Use <fieldset> and <legend> for a group of font controls.
<fieldset>
<legend> Condition </legend>
<input type="radio" name="condition" id="condition_1" value="1">
<label for="condition_1"> 1 </label>
<input type="radio" name="condition" id="condition_2" value="12>
<label for="condition_2"> 2 </label>
<input type="radio" name="condition" id="condition_3" value="13>
<label for="condition_3"> 3 </label>
</fieldset>
Maybe you have a typo on it, the FOR attribute should always be exactly the same as in the ID.
Other than that I don't see nothing wrong. You'd have to feed us some more HTML to be able to help more thoroughly.
The for atribute must map to the input element's ID, and not its name.
I have two sets of radios:
<div class="form-row">
<div class="field-label">
<label for="part"><span class="style37">Participated</span></label><p class="aste">*</p>
<input type="radio" name="particip" id="particip-yes" value="on" checked> Yes
<input type="radio" name="particip" id="particip-no" value="off">No
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="trav"><span class="style37">Traveled?:</span></label>
<input type="radio" name="traveled" id="traveled-yes" value="on" checked>Yes
<input type="radio" name="traveled" id="traveled-no" value="off">No
</div>
</div>
When I click on particip-no, I need to select traveled-no and disable both travel-yes and travel no. I tried:
Event.observe('particip-no', 'click', function() {
$$('travel-no').checked=true
$$('travel-no').disabled=true
$$('travel-si').disabled=true
alert('no travel');});
The alert shows up, but there are no changes in the radios. Any hints ? Thanks.
If you're selecting by id you just want $ not $$
$('travel-no').checked=true;
$('travel-no').disabled=true;
$('travel-si').disabled=true;
...assuming the id's are correct. You're missing the semicolons too btw