Need help on UI Page to pass value from Client script to HTML

shaik_irfan · ‎12-04-2020

Hi,

I am created a simple UI Page with below code to make addition of two numbers. now i want to set the value in the 3rd box

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


	<body>
		<div>
			<div>
				<h1>Add two number using text box as input using javascript</h1>
			</div>
			Enter First Number : 
			<input type="number" id="Text1" name="TextBox1"> </input>

			Enter Second Number : 
			<input type="number" id="Text2" name="TextBox2"> </input>

			Result : 
			<input type="text" id="txtresult" name="TextBox3"></input>

			<input type="button" name="clickbtn" value="Display Result" onclick="add_number()"></input>

		</div>
	</body>

</j:jelly>

Client:

function add_number(){

	var value2= parseFloat(document.getElementById("Text2").value);
	var value1= parseFloat(document.getElementById("Text1").value);

	var result = value2 + value1;
	alert("res" + result);
	
}

I am able to see the alert, which i want to set in my Result box.

Also can anyone please help me set the alignment like

Enter First Number:

Enter Second Number:

Result

Jaspal Singh · ‎12-04-2020

Hi Irfan,

Try below.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


	<body>
		<div>
			<div>
				<h1>Add two number using text box as input using javascript</h1>
			</div>
			Enter First Number : 
			<input type="number" id="Text1" name="TextBox1"> </input><br/>

			Enter Second Number : 
			<input type="number" id="Text2" name="TextBox2"> </input><br/>

			Result : 
			<input type="text" id="txtresult" name="TextBox3"></input>

			<input type="button" name="clickbtn" value="Display Result" onclick="add_number()"></input>

		</div>
	</body>

</j:jelly>

Client

function add_number(){

	var value2= parseFloat(document.getElementById("Text2").value);
	var value1= parseFloat(document.getElementById("Text1").value);

	var result = value2 + value1;
	alert("res" + result);
	document.getElementById('txtresult').value=result;
	
}

View solution in original post

rahulpandey · ‎12-04-2020

Hi Irfan,

How you are opening this UI page?

Jaspal Singh · ‎12-04-2020

Hi Irfan,

Try below.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


	<body>
		<div>
			<div>
				<h1>Add two number using text box as input using javascript</h1>
			</div>
			Enter First Number : 
			<input type="number" id="Text1" name="TextBox1"> </input><br/>

			Enter Second Number : 
			<input type="number" id="Text2" name="TextBox2"> </input><br/>

			Result : 
			<input type="text" id="txtresult" name="TextBox3"></input>

			<input type="button" name="clickbtn" value="Display Result" onclick="add_number()"></input>

		</div>
	</body>

</j:jelly>

Client

function add_number(){

	var value2= parseFloat(document.getElementById("Text2").value);
	var value1= parseFloat(document.getElementById("Text1").value);

	var result = value2 + value1;
	alert("res" + result);
	document.getElementById('txtresult').value=result;
	
}

rahulpandey · ‎12-04-2020

Never mind,

change your client as below

function add_number(){

	var value2= parseFloat(document.getElementById("Text2").value);
	var value1= parseFloat(document.getElementById("Text1").value);

	var result = value2 + value1;
document.getElementById("txtresult").value = result ;

	alert("res" + result);
	
}