visible fields using onchange

[edalakiran]

hi,
i have a small question regarding Javascript,

i have a first textbox when user enter some values i have to show or wont show second textbox based on the value. when the user enters positive value in first textbox, the second text box should show , when the user enters negative value in firsttextbox, second text box should not show, can anyone help me with this. here is the code i am using in onchange event.

var qtyorder = getObj('test');
console.log(qtyorder);
if ((getObj('test').innerHTML) > 0)
{
getObj('xxxxxx').visibility = "visible";
getObj('xxxxxx1').visibility = "visible";
}
else
{
getObj('xxxxxx').visibility = "hidden";
getObj('xxxxxx1').visibility = "hidden";
}

[Scott Klement]

Since you are manipulating the DOM directly, you'll need to use standard DOM objects. There is no obj.visibility property in the standard DOM... I think you meant obj.style.visibility? Also, why are you using getObj multiple times for the same object? I mean, that'll work, but if you already have it in a variable, why call getObj again?

Try something like this, instead:

Code: Select all

var qtyorder = getObj('test');

if ((qtyorder.innerHTML) > 0)
{
  getObj('xxxxxx').style.visibility = "visible";
  getObj('xxxxxx1').style.visibility = "visible";
}
else
{
  getObj('xxxxxx').style.visibility = "hidden";
  getObj('xxxxxx1').style.visibility = "hidden";
}

This is untested.

[Megan]

Are you maybe looking to use the onInput event?

I used the following code in the onInput event of TextBox1:

Code: Select all

// If the integer value of the input is greater than 0...
if(parseInt(this.value) > 0) {
  // ...hide TextBox2...
  getObj("TextBox2").style.visibility = "visible";
}
// ...otherwise...
else {
  // ...show TextBox2.
  getObj("TextBox2").style.visibility = "hidden";
}

Please notice the syntax for accessing an object's visibility:
getObj("TextBox2").style.visibility = "visible";

This code also works in the onChange event, though it does require that the value actually be changed in order to trigger. The onInput event triggers anytime the input changes.

[edalakiran]

Hey Megan,

Thank you for the update, I don't see onInput event fo textBox.
i have one more question, when i write this on onchange event, it is not allowing the user to enter the full input as soon as the user enter it is triggering it is not waiting to complete the full input, maybe i need to write in some other event. any sugeestions.

Thanks
Kiran.

[Scott Klement]

The "oninput" event was added in Profound UI 5.11.0, which was about 5 months ago. You could also do it "onkeyup" or "onkeydown" if you don't want to wait for the onchange event to fire.

Not sure what you mean by "it is triggering it is not waiting to complete the full input". By default, the enter key submits the screen back to the server -- is that what you mean? There's a screen-level property "disable enter key" that can be used to disable this. Or, you can disable it with code in the "onkeydown" event if you prefer to do it only for one field.

It is very unclear what is meant by "full input". Are you saying that they want to press enter in the middle of their input and continue entering more afterwards? Normally, enter is only pressed when someone is done entering text... but again, you can change that.

[Megan]

Hello Kiran,

When possible, please provide which version of Profound UI you are using so that we may test solutions and check for possible issues in that version while we assist you.

I took the same code from my previous post and put it in the onChange event of TextBox1. I set TextBox2 to hidden until it is determined if it should be visible. I added the following code to the button's onClick event:

Code: Select all

getObj("TextBox1").value = get("TextBox1");

The following are screenshots of this example in ProfoundUI version 5.10.1:

Program Start:

txtbxStr.png (1.26 KiB) Viewed 634 times

Enter positive value and click "Click Here":

txtbxVis.png (1.34 KiB) Viewed 634 times

Enter negative value and click "Click Here":

txtbxHid.png (1.34 KiB) Viewed 634 times

If you are having issues with the Enter key being pressed and submitting the screen, you can disable the Enter key by setting the disable enter key property to true.

disableEnterKey.png (3.23 KiB) Viewed 634 times

If you would like more in-depth assistance, please send us a screen dump. This can be done by pressing Ctrl + F9 while viewing the screen in question. When you are prompted to save or open the file, please save the file and email it to our support email address, support@profoundlogic.com, as an attachment. Having the screen dump can help us provide a more complete and specific solution for your issue.