OnChange Event for inputField

[Former Member]

Hi,

I have an unique requirement. I have 3 inputFields Length, Width and Depth. I have one more inputField called Amount which is calculated by LWD at runtime.

I want to calculate each time when any of the values in

Length, Width and Depth inputFields changes something like onChange Event.

I know i can calculate it when i click an button.But i don't want to do that.

Is there any way to handle this onChange Event handler?

Thanks in advance

arun

[Former Member · Accepted solution]

Hi experts,

I don't understand how to handle this with your code. Le me post the code,

<%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<%@extension name="bsp" prefix="bsp" %>

<htmlb:content design="design2003" >

<htmlb:page title="Equipment List " >

<htmlb:form>

<%

data tmp_string type string.

tmp_string = `<input onChange="javascript:youJsfunction();"`.

%>

<htmlb:inputField id = "Field1"

value = "2"

alignment = "left" />

<htmlb:inputField id = "Field2"

value = "2"

alignment = "left" />

<bsp:findAndReplace find = "<input"

replace = "<%= tmp_string %>" >

<htmlb:inputField id = "Field3"

value = "4"

alignment = "left" />

</bsp:findAndReplace>

</htmlb:form>

</htmlb:page>

</htmlb:content>

I have Field1 and Field2, when the value in any of the inputfield changes the Field3 shoulb be calculated with Field1-value+Field2-value.

How to handle this situation?

Thanks in advance

arun

[athavanraja · Accepted solution]

<%
data tmp_string type string.
tmp_string = `<input onChange="javascript:<b>yourJsfunction()</b>;"`.
%>
<bsp:findAndReplace find = "<input"
replace = "<%= tmp_string %>" >

<htmlb:inputField id = "Field1"
value = "2"
alignment = "left" />
</bsp:findAndReplace>
<bsp:findAndReplace find = "<input"
replace = "<%= tmp_string %>" >

<htmlb:inputField id = "Field2"
value = "2"
alignment = "left" />
</bsp:findAndReplace>
<htmlb:inputField id = "Field3"
value = "4"
alignment = "left" />

<u><b>yourJsfunction</b></u> is a javascript function which you have to write to read field value 1 and fidld value 2 and populate third field.

Here is a js sample. (note the code is not tested)

<script>

function yourJsfunction(){

document.<your form name>.<input field name3>.value =

document.<your form name>.<input field name1>.value +

document.<your form name>.<input field name2>.value ;

}

</script>

Regards

Raja

[Former Member]

Try to create a new BSP Extension of inputfield and add the html tag property of onChange ..,, Write JS code to calculate the same.

[maximilian_schaufler]

That's the direction my 'blog in progress' is heading towards

[Former Member]

Has somebody gotten any of this to work with

<phtmlb:formLayoutInputField

I'm in doing this in a view (subcontroller) so I have to append the name of the controller to the id??

Message was edited by: Craig Cmehil

Ok the only thing that worked for me was the example from Thilo.

<i>

In MS Internet Explorer you can use the "named script" like this:

</i>

<htmlb:inputField id   = "Inp123"                 
                 value = "//model/edit_wa.pvo_ad_1"/>
<script for="Inp123" event=onchange type="text/javascript">  
YourJavaScriptFunc( this );
</script>

<i>

Don't know if this works in other browsers too.

Thilo

</i>

[Former Member]

hi all

I just finished my second article on this subject. The first covers the issue using on JSP and EP 6.0:

http://variant.ch/phpwiki/WikiBlog/2005-01-31

the second article shows how to deal with the problem using BSP on SAP R/3 WAS:

http://variant.ch/phpwiki/WikiBlog/2005-02-01

I hope this helps anyone.

regards

nicola

ps: sorry for the cross posting. I'll get a SDN blog and you'll escape my babble...

[former_member181879]

Nicola,

For good information, any site is perfect. You always just link yourself into our thread "new weblogs".

At least one benefit of blogging for SDN is that there are T-shirts from time to time. I might have to beg for one to convince you :).

bye, brian

[maximilian_schaufler]

The SDN-Blog-Shirt was a cool addition to my presentation performance when all students of our class met to present their achievements during their internships the last few months ...

No one else got anything close to it 😛

[Former Member]

It's also a nice feeling inside the company especially when someone goes looking for something for SAP and finds one of my blogs here on SDN, they come down to my office and start asking me all sorts of questions - it's great - the T-Shirt is behind my desk

[Former Member]

Hi Durairaj,

I thought that once i change the value in inputfield it will fire the javascript function. But the onChange event in the function is fired only when i change the value and click in any other inputfield or page.

Can we implement onChange or custom event like (onArun) for any component in htmlb.

This is what the code i created to test it,

<%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<%@extension name="bsp" prefix="bsp" %>

<script>

function MULTIPLY(){

document.wdr.MULT.value =

document.wdr.Field1.value *

document.wdr.Field2.value *

document.wdr.Field3.value ;

}

</script>

<%

data tmp_string type string.

tmp_string = `<input onChange="javascript:MULTIPLY();"`.

%>

<htmlb:content design="design2003" >

<htmlb:page title="On Change Event Checker " >

<htmlb:form id="wdr" >

<bsp:findAndReplace find = "<input"

replace = "<%= tmp_string %>" >

<htmlb:inputField id = "Field1"

value = "0"

alignment = "left" />

<br>

<htmlb:inputField id = "Field2"

value = "2"

alignment = "left"

disabled = "true"/>

<br>

<htmlb:inputField id = "Field3"

value = "2"

alignment = "left"

disabled = "true"/>

<br>

<htmlb:inputField id = "MULT"

value = "0"

alignment = "left"

disabled = "true"/>

</bsp:findAndReplace>

</htmlb:form>

</htmlb:page>

</htmlb:content>

Thanks a lot

arun

[Former Member]

onChange does exactly that, try one of the other JavaScript methods associated with input fields.

[athavanraja]

OnChange will not work with all the htmlb tags.

form elements like, input field (text box, radio button, check box) will have onchange events.

Have a look at www.htmlgoodies.com

There is a section on javascript. I learnt my javascript & html from there. Its pretty simple and neatly layed out.

Hope this helps.

Regards

Raja

[Former Member]

Hi Craig,

Can you post some code for "onClientClick you can activate Javascript".

<htmlb:Inputfield doesn't have onClientClick event. How can we handle Onchange event?

Thanks in advance

arun

[athavanraja]

> Hi Craig,

> Can you post some code for "onClientClick you can

> n activate Javascript".

> <htmlb:Inputfield doesn't have onClientClick event.

> . How can we handle Onchange event?

<i><b>Refer my answer to your post</b></i>

> Thanks in advance

> arun

Hi,

[Former Member]

arun - Raja posted you a code sample

[Former Member]

check out onClientClick you can activate Javascript there.

[athavanraja]

Onchange for Input field

    <htmlb:form>
      <%
  tmp_string = `<input <b>onChange</b>="<b>javascript:youJsfunction()</b>;"`.
      %>
      <bsp:findAndReplace find    = "<input"
                          replace = "<%= tmp_string %>" >
        <htmlb:inputField id        = "myInputField2"
                          value     = "ABC"
                          alignment = "left" />
      </bsp:findAndReplace>
    </htmlb:form>

Regards

Raja

Message was edited by: Durairaj Athavan Raja

[Former Member]

Hi

Although there is no JSP taglib attribute you can use to react to client events (such as the onChange HTML attribute), you certainly can (as this is the only solution to do it properly) write Java code in the JSP page to call the setClientEvent() method:

<hbj:inputField 
	id="myInputField"
	type="String"
	value='123'>
<% 	
myInputField.setClientEvent(
	com.sapportals.htmlb.enum.EventTrigger.ON_CHANGE,
	"alert('changed!')"
);
%>
</hbj:inputField>

The setClientEvent() is defined in the interface IEventValidationComponent and thus applies to these implementing classes: Button, DropdownListBox, InputField, Label, ListBox, StatefulButtonBase, TextEdit, Timer, ToolbarButton, ToolbarDropDownListBox, ToolbarInputField, Link, TableView, Tray.

HTH

nicola

[Former Member]

Nice JSP solution, I've not tried something like this in a BSP but sounds to be rather interesting.

wow look at that - doesn't work inside of normal BSP's.

"The tag "inputField" cannot have any content. Use <htmlb:inputField"

bummer but I will add this to my snippet library for my Java stuff.

Thanks!

[former_member181879]

Craig,

What you should do, is to look at the HTML documentation to attach events. It is not needed to always render them out in the HTML. What you can do is to dynamically attach an event later onto a control. Nice thing about this, is that you can have a queue of events!

For example: window.attachEvent('onload',scrollTo), where scrollTo is a JavaScript function.

With this same idea, you can render out at the end of the page JavaScript code to attach to either all input fields, or to one with a specific ID. For all inputfields, you can use getDocumentByType (or something like this) call.

brian

[Former Member]

Interesting idea! I will have to play around with that!

[Former Member]

hi

the idea with capturing global events is indeed a very good one. I googled a bit and found this:

http://www.quirksmode.org/js/events_advanced.html

according to this page, attachEvent() should be avoided as it is not cross-browser compatible and has some drawbacks compared to the use of W3C's API:

element.addEventListener('click',doSomething,false);

one thing where the BSP solutions differs from the JSP solution is the method how to get the correct element. instead of using a quite non-elegant search over a global array where all fields are registered, one can search by the attribute 'name':

var elements = document.getElementsByName('MyFieldName');
elements[0].addEventListener('change',doSomething,false);

btw, this will be the next blog entry of mine, the one about the JSP solution is already done:

http://variant.ch/phpwiki/WikiBlog/2005-01-31

hth anybody

nicola

[Former Member]

You should post your weblogs here for everyone to benefit from.

Remember though that different browsers handle things differently and should be accordingly noted.

As for differences in the JSP and BSP version well we saw that how the inputfield element in JSP is able to inlcude content where as in BSP not, in which case you really need to play around with the DOM and find the elements that way.

So if you create a weblog be sure to include these two threads covering the topics and if you post here you'll be helping out quite a few people who might be needing this info in the future!

[former_member181879]

Hallo Nicola,

Excellent. We will just have to talk to SDN to have them to "motivate" you to publish with us next time :). We also take weblogs on J* stuff (I just don't often read them).

I like also your research and then comments about attachEvent and showing the better way to do it. It is this attention to small detail which readers of weblog will honour by coming back and reading more! In this forum there is a thread about all weblogs. We welcome you to add your writings on it (even if they should point off site).

regards, brian

[Former Member]

hello craig, brian!

I am sorry if my wording sounded a bit harsh in my first post (which is not very polite, I know). It was never my intention to "bash" anything or anybody here on SDN.

However, I was quite frustrated to see that there was only an ugly hack for BSP and not even that (i.e. no solution) for JSP regarding the issue.

As for publishing on SDN weblogs: I am not sure if I want to do that. My own website has quite a number of technical articles written by myself and I like how it helps other people (judging by the frequent email traffic flowing back to me). To help people here on SDN (as far as I can) I could publish on SDN reviews of articles on my website; some kind of abstract with a link to my website. However, I don't know if this would be accepted here respectively regarded as good style.

regards

nicola

ps: you can get in touch with me by private mail, if you want.

[Former Member]

I can understand your desire to continue to post in your current medium, I've done both actually I posted it there and then did a copy and past to here or vice versa but typically I keep my SAP related stuff on here.

Your choice as Brian said we are happy for all help and the small details are something that we all like to know about.

From a personal point of view I come here for all SAP related and I stay here but a link now and again to a different site for reading is OK but replying I'd rather have it here so I can easily find it again

[Former Member]

hi brian

> Excellent.

I'm glad you like it.

> In this forum there is a thread about all weblogs. We

> welcome you to add your writings on it (even if they

> should point off site).

I only understood this remark after reading your post again.

So I'll publish both articles in the said thread as soon as they are finished.

regards

nicola