Written by

Question Vikram Annadurai · Aug 10, 2019

How do I get the value of text input field using JavaScript

#Caché #Learning Portal #Frontend #ObjectScript #ZEN

Hey Guys,

I got stuck with this for 2 days, please help me

Actually my logic is when I enter the input on the text field in browser, the entered input to be print on the next page but I am getting "Undefined". How to i do it.

Below is my code:

Class Patient.Testing Extends %ZEN.Component.page
{
/// Class name of application this page belongs to.
Parameter APPLICATION;
/// Displayed name of this page.
Parameter PAGENAME = "userLogin";
/// Domain used for localization.
Parameter DOMAIN;
/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
#login{
text-align: center;
font-family: Ariel;
font-size: 3.5em;
padding: 180px;
font-color: brown;
}
#content{
text-align: left;
font-size: 1.5em;
font-color: default;
font-family: default;
}
#content1{
text-align: left;
font-size: 1.5em;
font-color: default;
font-family: default;
}
#button{
text-align: left;
font-size: 1.5em;
font-color: default;
font-family: default;
}
</style>
}
/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<html id="title">Welcome!!!</html>
<vgroup width="100%">
<html id="login">Login</html>
<html id="content">Patient Id:</html>
<text id="patientId" value=""/>
<html id="content1">Password:</html>
<text id="patientPass" value=""/>
<button id="button" caption="Login" onclick="zenPage.MyMethod();"/>
</vgroup>
</page>
}
ClientMethod MyMethod() [ Language = javascript ]
{
var pId=document.getElementById("patientId").value;
var pPass=document.getElementById("patientPass").value;
document.write(pId,pPass);
}
}

Thanks

Vikram

Discussion (4)0

Add reply

Comments

Robert Cemper · Aug 10, 2019

you operate not on document object but on zenPage object

see docs: Client Side Functions, Variables, and Objects at the beginning >>>

zen(id )

Find a Zen component by id value. Returns the object that matches the input id.
The zen(id ) JavaScript function is equivalent to the following client-side JavaScript method call on the page object:
zenPage.getComponentById(id )
You can use the zen(id ) function wherever JavaScript syntax is appropriate;

0 0

Vikram Annadurai Aug 10, 2019 to Robert Cemper

Thanks Robert,

I missed this doc. Now I got some idea.

Thanks you so much....

0 0

Sourabh Sethi · Aug 10, 2019

You can open your page in Chrome and then using developers Tool, you can see that ZEN page randomly assigns the ID to Components.

So best way to use zen(<ComponentID>).getValue() or setValue() for getting and setting the value.

0 0

Vikram Annadurai Aug 10, 2019 to Sourabh Sethi

Thanks Sourabh,

Its a wonderful idea. This make me a different way of thinking.

Thanks a lot....

0 0