I am using thymeleaf in front end and I know variable concept in thymeleaf
<span th:with="var=${someValue}" th:text="${var}"></span>
if I use th:text the value in the variable will be printed and I can use that variable in the same element, Is there any way to use the var in other element like
<span th:with="var=${someValue}"></span>
<span th:text="${var}"></span>
I need to provide global scope to that variable is it possible in thymeleaf ?
Define var in the opening body tag
<body th:with="var=${var_value}">
Only nested item can see variable. Div tag is only an example. You can use tags you wants
<div th:with="var=${var_value}">
inside div tag var is visible.
</div>
Golobal variable is not supported in thymeleaf but it can be achieved through inline javascript.
Thymeleaf var_value stored in javascript variable 'value' and set the value in input field using JQuery.
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function (){
var Value = /*[[${var_value}]]*/ '';
$("#ID").val(Value);
});
/*]]>*/
</script>
<input type="text" class="order-entry" id="ID" placeholder="" th:value="${''}" />
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
Trying to check if object is not null in form:
<form th:action="#{register}" th:object="${loginInfo != null ? loginInfo.account : account}" method="post">
<input th:field="*{phoneNumber}"/>
If loginInfo defined and not null I want to use loginInfo.account in form.
Otherwise I want to use account object.
How to do that?
In example above I get IllegalStateException: Neither BindingResult nor plain target object for bean name 'loginInfo!= null ? loginInfo' available as request attribute
Here is what I would do. Since we can't add a conditionals inside a th:object, then the only other way to achieve this, is using a th:block with a th:if. Of course, this will mean that you need your form's inputs in a template, otherwise you will have to duplicate code. I am assuming of course that loginInfo.account have the same fields as account.
First, let's create our template inside our layouts folder. For this example, this html file will be called form-inputs.
<th:block th:fragment="form-inputs">
<input th:field="*{phoneNumber}"/>
</th:block>
Now, the page will have the following code to decide which object to use. If loginInfo is not null, then we will use it's account information, otherwise, we will use account.
<th:block th:if="${loginInfo!=null}">
<form th:action="#{register}" th:object="${loginInfo.account}" method="post">
<section th:replace="layouts/form-inputs :: form-inputs" th:remove="tag">
</section>
</form>
</th:block>
<th:block th:if="${loginInfo == null}">
<form th:action="#{register}" th:object="${account}" method="post">
<section th:replace="layouts/form-inputs :: form-inputs" th:remove="tag">
</section>
</form>
</th:block>
Hope this helps you!
<c:forEach items="${customer.iscutomer}">
<div>
<i>${customer.customerNumber}. </i>
<li>
${customer.customerName}
</li>
</div>
</c:forEach>
i don't know how to get customer name in Struts2 when user selects any hyerlink(customer name come from customer object).
You can use Struts anchor tag and add parameter to the URL.
<s:a href="url"><s:param name="customerName">${customer.customerName}</s:param>CustomerName</s:a>
Note, that you can use EL in the body of the tag.
May be this can help you to start:
<c:forEach items="${customer.iscutomer}">
<div>
<i>${customer.customerNumber}. </i>
<li>
<s:a name="foo" namespace="bar">
<s:param name="customerName">${customer.customerName}</s:param>
<s:param name="customerNubmber">${customer.customerNumber}</s:param>
</s:a>
</li>
</div>
Please consider I find that the s:a url does not add parameters to link. Now your generated link will be /foo/bar/action?customerName=joe&customerNumber=1
No in your JS you can have:
$('a').bind('click',function(){
var url = ($(this).attr('href'));
var customerName= getURLParameter(url, 'customerName');
var customerNumber= getURLParameter(url, 'customerNumber');
//calling the ajax function
pop(cat, typ)
});
If you want to have ajax calls please have a look at struts 2 jquery plugin.
I'm using SimpleForm to collect a new object and I'd like to use values that the user has entered into the form to populate values in a nested form. Is there a way to do this?
So far I've been perusing the SimpleForm docs and poking around with pry when the form is active – without much luck… My next guess would be to try to get at the values with jQuery, but that is entirely new ground for me. Any suggestions would be most welcome.
<form id="get_value">
<input type="text" name="FirstName" ><br>
<input type="text" name="Email"><br>
</form>
<button>Get Value</button>
<div id="value"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#value").text($("#get_value").serialize());
});
});
</script>
Try this. In your view:
<p id="output"></p>
<%= text_field_tag :foo, params[:foo], id: 'bar' %>
This will set your custom ID.
And then in your .js file:
$("#bar").keyup(function() {
var value = $(this).val();
$("#output").text(value);
}).keyup();
This will return a value of the input.
Source: http://api.jquery.com/val/
I have been having this issue in select2. I cannot show the initial tags, as shown in select2's home page:
<input width="100px" type="text" id="e12">
<script>
$(document).ready(function(){
$("#e12").select2({multiple:'true',tags:["red", "green", "blue"]});
});
</script>
But the "colors" are shown if and only if I begin typing. Otherwise, the input is blank.
As simple as the hot water: I forgot to put the value in the input tag!
<input width="100px" type="text" id="e12" value="pippo,italy">