We recently had a situation that required a little bit of head scratching. We had a page with a Select List with Redirect that was used to populate some form fields based on the contents of the Select List. The users could change the values in the form and save them, but if they changed the Select List before using the ‘Save’ button then the changes would be lost. What we wanted to do was add a confirmation message to make sure the user saved the details before changing the Select List.
Unfortunately you can’t put an ‘onchange’ handler in the HTML Form Element Attributes as ApEx is using onchange to do the redirect. Any code we put in is simply ignored.
Instead, we need to mimic what ApEx does, and then put in our code. Firstly define some JavaScript in the page header :
<script type="Text/JavaScript">
var startVal = &P68_PERSON_ID.;
function checkSave(p) {
if (confirm('Have you saved details for this person?')) {
location.href='f?p=&APP_ID.:68:&SESSION.::NO::P68_PERSON_ID:'+
p.options[p.selectedIndex].value;
} else {
for (i=0;i<p.options.length;i++) {
if (p.options[i].value == startVal) {
p.options[i].selected = true;
} else {
p.options[i].selected = false;
}
}
}
}
</script>
This code is from page ‘68′ in our application, and the Select List is called P68_PERSON_ID. You’ll need to change these to something appropriate for your app.
The JavaScript saves the initial value set when the page loads here :
var startVal = &P68_PERSON_ID.;
If the user confirms they have saved the details, then the window’s location is changed and the selected item used as a basis for the new page. If the user cancels we need to reset the selected item back, as by now the browser has changed it for us (thanks!).
Next, change the Select List with Redirect to just a normal Select List, then, add an onchange handler to the the Form Element Attributes to call the JavaScript :
Now, when the user changes the value in the list box they get prompted to check they have saved the details, which prevents them changing the page data inadvertently.
