Set Focus on an Inputfield after displaying alert message

[Former Member]

Hi,

I am doing some validations on an input field through javascript. After displying the error message I want to set focus on that field.I am not using MVC.

Can anyone suggest some solutions to this?

Regards

Tejaswini

[Former Member · Accepted solution]

Do it the same way you do it with normal HTML. The input field as a ID so with JavaScript set the focus on that ID.

[Former Member]

Has anyone got an idea how to realize it with DESIGN2002?

Regards,

Christian

[maximilian_schaufler]

I can't do any testing right now, but here is some help to help yourself:

My way to achieve my solution was to create a small example page, let it display, and then examine the HTML code closely. Somewhere in there you will find your checkbox element, have a close look at its attributes (id!), and then try to adjust your javascript.

JavaScript commands are the same for different designs, as they both just use/access HTML. So you only have to discover the differences in HTML rendering between Design2002 and Design2003.

Max

[Former Member]

Hi,

document.getElementById(field_id).focus()

works pretty well, if you want to set the focus on an inputfield.

Unfortunately it doesn't work, if you want to set the focus on a htmlb:checkbox.

Has anyone got a solution to this problem: Set focus on htmlb:checkbox?

Regards,

Chris

[maximilian_schaufler]

Hi Christian, it does work - it's only the custom rendered checkbox that kind of "hides" the fact that the checkbox is focussed.

Just try hitting the space bar right after you executed the .focus() function on a checkbox, and you will see it will get checked/unchecked.

[Former Member]

Hi Maximilian,

unfortunately this works only with DESIGN2003, but I'm using DESIGN2002. Is there any switch to get it working even with DESIGN2002?

Regards,

Christian

[maximilian_schaufler]

There's the focus() method for form elements, just as there is the value attribute which you sure already use for the validation.

...
element.focus();
...

It's good to get an overview of what you are working with, this site might help you (not only for javascript):

<a href="http://www.w3schools.com/">http://www.w3schools.com/</a>

[Former Member]

Hi Craig/Max,

Thanks for the valuable inputs.

I got the solution.

Regards

Tejaswini

[Former Member]

Hi,

Got a problem with focus() again.

I tried to set the focus by using 2 Input fields which worked just fine. The code was:

<script language = "javascript">

function chk()

{

alert('error');

document.all.myInputField2.focus();

return(false);

}

</script>

<htmlb:content design="design2003" >

<htmlb:page title="detail " >

<htmlb:form>

<%

tmp_string =`<input onBlur="javascript:chk()";`.

%>

<bsp:findAndReplace find = "<input"

replace = "<%= tmp_string %>" >

<htmlb:inputField id = "myInputField2"

value = "12345"

alignment = "left" />

</bsp:findAndReplace>

<htmlb:inputField id="myInputField1" />

</htmlb:form>

</htmlb:page>

</htmlb:content>

But when I used the same in another page it giving the error: "Object Required". The code of the page which is not working is:

<% if v_found = 'X'. %>

<script>

alert("<%= v_error_msg %>");

window.status="<%= v_error_msg %>" ;

function chk()

{

alert("v_error_msg");

window.status="<%= v_error_msg %>" ;

document.all.in_zr8cprgty.focus();

return(false);

}

</script>

<% endif. %>

<%

tmp_string =`<input onBlur="javascript:chk(this)";`.

%>

<bsp:findAndReplace find = "<input"

replace = "<%= tmp_string %>" >

<htmlb:inputField id = "in_ZR8CPRGTY"

submitOnEnter = "TRUE" />

</bsp:findAndReplace>

I am setting the value of "v_found" to 'X' in onInputProcessing() if a record mathcing the value entered in the Inputfield is found.

Please provide some inputs as to what I am doing wrong.I am new to Javascript so I am unable to find the error.

Regards

Tejaswini

[Former Member]

<% if v_found = 'X'. %>
<script>
alert("<%= v_error_msg %>");
window.status="<%= v_error_msg %>" ;

function chk()
{
alert("v_error_msg");
window.status="<%= v_error_msg %>" ;
document.all.in_zr8cprgty.focus();
return(false);
}
</script>

<% endif. %>

In an IF you are outputing the JavaScript function, but you always call this code.

<%
tmp_string =`<input onBlur="javascript:chk(this)";`.
%>
<bsp:findAndReplace find = "<input"
replace = "<%= tmp_string %>" >
<htmlb:inputField id = "in_ZR8CPRGTY"
submitOnEnter = "TRUE" />
</bsp:findAndReplace>

So the onBlur is looking for your chk function but it does not exist unless if v_found = 'X'.

So either have that onBlur part changed based on the value of v_found as well or add an else that adds a empty chk function

<% if v_found = 'X'. %>
<script>
alert("<%= v_error_msg %>");
window.status="<%= v_error_msg %>" ;

function chk()
{
alert("v_error_msg");
window.status="<%= v_error_msg %>" ;
document.all.in_zr8cprgty.focus();
return(false);
}
</script>
<% else. %>
<script>
function chk()
{
return(true);
}
</script>

<% endif. %>

[maximilian_schaufler]

I don't know if the function is supposed to return true all the time if v_found is not set, to me this seems that server-side and client-side are mixed up.

This is how I would do it:

<script>

<% if v_found = 'X'. %>
alert("<%= v_error_msg %>");
window.status="<%= v_error_msg %>" ;
<% endif. %>

function chk()
{
alert("v_error_msg");
window.status="<%= v_error_msg %>" ;
document.all.in_zr8cprgty.focus();
return(false);
}
</script>

This way the function is present all the time (unless I misunderstood your situation this should solve it).

[Former Member]

Interesting point Max, I assumed it would return true basically just come back and finish processing but perhaps it should not.

Good catch!

[Former Member]

Hi Craig/Max,

I tried doing it as you have suggested, the alert message is being displayed but when setting the focus I am still getting the error:

document.all.in_zr8ctprgty is null or not an object.

Regards

Tejaswini

[Former Member]

what about

document.getElementById('in_zr8ctprgty')

[maximilian_schaufler]

Be careful with upper and lower case in JavaScript - it's <b>case-sensitive</b>!

Reading Craig's last post, here is maybe another hint:

I almost always have dynamic parameters for my javascript functions, so I create a string variable with the id and use this one.

var inputfield_id = controller_id + '_' + 'in_ZR8CPRGTY';
//alert(inputfield_id);
document.getElementById(inputfield_id);

In this example you see how I create my id-string using the controller-id as a prefix (because I'm using MVC), and because this id is created dynamically, I often have it in a debug-alert function right before I try to access the element with this id - this helps to check which id is really called. (just in case you want to use parts of it)

In any case, check your HTML output code if it really contains an element with the given ID, quite often it's just some spelling error (or wrong upper/lower case).

[Former Member]

Hi Craig/Max,

Your answers have been very helpful and solved my problem. Now I am able to set the focus using:

document.getElementById('in_zr8ctprgty')

Thanks a lot.

Max thanks for your inputs,now i am able to undersatnd the importace of MVC. I was also overlooking the case-sensitive part. I want to implement MVC in my application, please suggest a good starting point for this.

Regards

Tejaswini

[Former Member]

lots of reading and looking at the BSP* applications and TUTORIAL* applications in SE80

be prepared for soemthing new. But I already see the benefits even though I've had lots of problems.

[maximilian_schaufler]

To start with MVC ...

First of all you should not be scared of dealing with object orientation. While some theoretical knowledge is always recommended, it may take more than that to really understand and benefit from the advantages - but trust me, it's well worth the effort learning it. Especially if you get to know all the OO-based features of MVC.

Apart from that I really recommend reading and searching and learning ... and trying! Go through the online documentation, although it's quite limited in its extent, it always is the best start. Then turn to the examples you find in your system (the ones Craig mentioned) - have a look, copy them, and start changing and playing around with your copied application. And soon you'll find yourself creating your first test MVC application from scratch, trying to get your own tasks accomplished.

Cheers,

Max