Develop Reference

How to show a form conditionally using Thymeleaf?

I am struggling with a problem to show a form conditionally using Thymeleaf. I want to show a form as in the image below: Hide form using Thymeleaf
Initially the pick up id column should show some text like 'edit' or 'n/a' with a link and when the user clicks on the link(or button) then only the edit box should be visible as in the image.
As you can see I have already created the form but I am having trouble with hiding the form and showing it only upon clicking a link or button and when user clicks on save, the id is saved to database(already done) and the entered id should be shown instead of the form.
I searched a lot about it but could not find anything using thymeleaf. I had found some related answers using JavaScript/jQuery but I need Thymeleaf.
The relevant part of the code
<td>
<a><span th:if="${ticket.pickedUp} ? ${ticket.pickUpId} : 'N/A'"></span>
<form th:action="#{/updatePickupId/{id}(id=${ticket.id})}"
th:method="post" th:style="'display: hidden'">
<div class="checkbox-list w-150px">
<input type="text" name="pId" value=""
placeholder="Pick Up Id"
th:classappend="${ticket.pickedUp} ? 'required' : ''">
<input type="submit" value="Save"/>
</div>
</form>
</a>
</td>
As you can see I have used th:style="'display: hidden'" in the form but I don't know why its not working and the form is visible all the time.

iOS: How to programmatically trigger enter from a textfield in a webview

I am trying to add value to a text field in a web view using javascript. First, I add value using this code :
webView.evaluateJavaScript("document.getElementById('birds').value = 'username';", completionHandler:nil)
second I need to press Enter button to run next function. Here is text input's info:
<input type="text" name="submit" id="birds" placeholder="Write username or name and press enter" "="" class="ui-autocomplete-input" autocomplete="off">
How can I programmatically trigger enter button?

Just select the form and call submit
document.getElementById("myForm").submit();
This article could be worth a read though, you may need to select the submit button and call the onClick method instead, it depends how that particular form handles sending it's data.

Binding a jAlert popup content to html content

I'm attempting to use jAlert to show a popup dialog with an input box. When clicking "OK" I want to grab the value from this input box to send to the server. I'm using jQuery to pull the content off a div which includes the input field. Problem is that when I use jQuery to try and get the contents of that input field, it doesn't work - it comes back as empty.
HTML as follows:
<div id="test">
<input type="text" id="def" />
</div>
JS as follows:
$.jAlert({ 'content' : $("#test").html()});
...and to try and access using jQuery...
$("#def").val();
I can get around it by force updating the field using a keyup listener, but it seems really clunky...
<input type="text" id="def" onkeyup="$('#def').val($(this).val())" />
After doing this I can access the content of the 'def' field. Is there a more elegant solution?

How to prevent ng-model bound attribute from populating input field

My project has a form with an input field and a button.
<input id="inputID" form="IDForm" type="text" autocomplete="off" data-ng-model="User.getInfo().ID" placeholder="Enter ID">
<button form="IDForm" type="submit" class="forward-button" ng-if="User.getID()" data-ng-click="sendID()">
Verify ID
</button>
Currently the ng-if makes the button not appear until the user enters an ID. When they enter an ID and click Verify ID, they are taken to the next page. However, if they press back from that page then the input field is automatically filled with the ID they previously entered because of the two way ng-model binding. Is there a way to prevent the input field from automatically filling in that bound attribute when the page loads?

When the button is enabled, set the current form to pristine state, $scope.form.$setPristine(); which will ensure even when you press back, the form values will not populated and would be in the initial state.

input type disabled and readonly behave differently with a href

I have below code where i disable and enable a calendar clickable icon.
<p>
<label>
<input type="text" name="date18" id="date18" value="01/01/2012"
style="width:75px;" disabled/>
</label>
<a href="#" onclick="somecaledarrelatedstuff()" name="calid" id="calid">
<img src="icon-Calendar.jpg" alt="Click to pick a date from a popup
calendar"/>
</a>
</p>
When I add disable as above both the input field and the link to the calendar popup are disabled as well. But because the values of disabled elements are not submitted, I thought of making it read-only. However, the problem is that when it's read-only, only the input field is getting read only (not also the calendar pop up link) too, like using disable.
I know if I want to disable (just to prevent the user from editing) both input field and href I can use disabled and have a hidden input variable, and submit it and refer to that variable. But I was looking for an alternative way because I will have a lot of refactoring to do to my code if I introduce a new hidden variable.
Thanks.

If you want the input field to be disabled but still send its value upon submission of the form, you can use bit of JavaScript for that.
To achieve this, first add this bit to the <form> tag:
<form ... onsubmit="EnableInputs(this);">
Then add this JS function:
function EnableInputs(oForm) {
oForm.elements["calid"].disabled = false;
}
You can enable more elements like this, or all inputs using getElementsByTagName and looping over it.
This will just enable the element when submitting thus send its value.

Disabled does not submit values, but read-only does submit values.