How can I set a Textbox value using a javascript call

answered 2011-03-30 19:55:58 +0800

jimmyshiau
4921 ● 5
http://www.zkoss.org/

Hi dartcwb,
You can try to invoke zk.Widget.$('$textboxId').setValue('xxx'); in onclick function.

answered 2011-09-03 03:22:45 +0800

Hasham
15

hi

I m able to set a Text field value using javascript eg

zk.Widget.$(jq('$lbLatitude')).setValue(locmarker.getPosition().lat());
zk.Widget.$(jq('$lbLogitude')).setValue(locmarker.getPosition().lng());

These set values are showing on GUI.

But when i want to access these textfield value in my composer i m getting empty.

public class AddressLocatorComposer extends GenericForwardComposer {

Textbox lbLatitude;
Textbox lbLogitude;

public void onClick$save() {

System.out.println(lbLatitude.getValue()); //Empty

}

}

Kindly help me in this regard

answered 2011-09-04 20:17:32 +0800

jimmyshiau
4921 ● 5
http://www.zkoss.org/

Hi Hasham,
please refer to the following sample

<zk xmlns:w="client">
	<textbox id="tb" width="250px">
		<custom-attributes org.zkoss.zk.ui.updateByClient="true"/>
	</textbox>
	<button label="set">
		<attribute w:name="onClick"><![CDATA[
			var tb = zk.Widget.$(jq('$tb')),
				val = 'new ' + new Date();
			tb.setValue(val);
			tb.smartUpdate('value', val);
		]]></attribute>
	</button>
	<button label="get" onClick="alert(tb.value)"/>
</zk>

answered 2013-10-14 17:29:52 +0800

Senthilchettyin
2623 ● 3 ● 8
http://emrpms.blogspot.in...

Hi jimmyshiau

The above is not working if the java script method in the external file. Can you please show me an example

answered 2013-10-14 17:30:44 +0800

Senthilchettyin
2623 ● 3 ● 8
http://emrpms.blogspot.in...

Here is the code

<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.product.webapp.Example.JavaScriptExampleVM')">

<script src="/js/javascriptexample.js"></script>

 <textbox id="hai" value="HAI"></textbox>

  <textbox id="txt" value=""></textbox>

<button id="btn" label="test" onTest="@command('onTest')" />

<button label="Click Here"
    xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="doTest();">
</button>

</window>

function doTest() {

var tb = zk.Widget.$(jq('$hai')),
val = 'new ' + new Date();

tb.setValue(val); tb.smartUpdate('value', val);

zAu.send(new zk.Event(zk.Widget.$('$btn'), 'onTest', zk.Widget.$('$hai').getValue()), 10);

}

package com.product.webapp.Example;

import org.zkoss.bind.annotation.AfterCompose; import org.zkoss.bind.annotation.Command; import org.zkoss.bind.annotation.ContextParam; import org.zkoss.bind.annotation.ContextType; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.select.Selectors; import org.zkoss.zul.Messagebox;

public class JavaScriptExampleVM {

@AfterCompose
public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
    Selectors.wireComponents(view, this, false);
}

@Command
public void onTest(@ContextParam(ContextType.TRIGGER_EVENT) Event event) {
    Messagebox.show("Hi " + event.getData().toString());
}

}

answered 2013-10-25 11:14:39 +0800

jimmyshiau
4921 ● 5
http://www.zkoss.org/

Hi Senthilchettyin

you have to turn on updateByClient attribute

<textbox id="tb" width="250px">
    <custom-attributes org.zkoss.zk.ui.updateByClient="true"/>
</textbox>

answered 2018-11-15 04:58:59 +0800

Narayanan
1

updated 2018-11-15 08:28:45 +0800

cor3000
6280 ● 2 ● 7

Hi Jimmyshiau,

Am facing issue while trying to set the value to the textbox id.

 <textbox id="txtBxId" name="txtBxName"  value="" visible="false" >
    <custom-attributes org.zkoss.zk.ui.updateByClient="true"/> 
 </textbox>

From the javascript am trying to set the value to the textbox as like below, but i couldn't see any values to the respective textbox id or name. Could you please advise or provide some sample how to achieve it in Zul.

document.getElementById('txtBxId').value = "test";
document.getElementsByName('txtBxName')[0].value = "test";

answered 2018-11-15 08:59:30 +0800

cor3000
6280 ● 2 ● 7

Hi Narayanan,

The component id you define in your zul file doesn't match your DOM-element's ID - that would be the UUID. So you can't just use document.getElementById(...) with the server id.

ZK's client side widget API provides convenient functions to access widgets by component ID without having to know the dynamically generated UUID.

Here the simple code:

var txtBx = zk.$('$txtBxId');
txtBx.setValue("test");
txtBx.fireOnChange(); /*optional notify the server*/

Or a running example on zkfiddle.

Here the related Client side JS docs:

• InputWidget#setValue

• InputWidget#fireOnChange

• about zk.$(...)

answered 2018-11-15 17:25:17 +0800

Narayanan
1

Hi Jimmyshiau, Thanks for your reply. Could you please provide me the steps how do i get the txtBx value in java.