Two pages involved.
First page contains a main product grid. Customer views product catalog, clicks on link to go to second page for further information and to begin ordering process:
Second page displays product photos, specs, etc. on top. In middle there is "bonus product/option" grid, with one column containing a static "SELECT" button on each row. This grid is to allow customer to select one (and ONLY one) addon/option (ie: custom sizing, inscription, free delivery, etc) for the selected product.
On the bottom of the second page is a dialog with textarea (notes, ie: inscription instructions, sizing, etc) and buttons (ie: "ORDER", "SAVE", etc) on the bottom.
STUMPED #1: When a customer clicks the "SELECT" button, the behavior I want to implement is that 1) the button on the row just selected takes on a specified background color (indicating it is currently selected); and 2) any previously-selected button/row must be "de-selected" and returned to default background color. Relevant background variables must be updated appropriately for subsequent use in table updates, etc.
STUMPED #2: The "ORDER" button on the bottom dialog should be disabled or hidden until/unless a selection has been made in the bonus/options grid so as to prevent an attempt to place order without completing product configuration process. This button would initiate table updates using data previously obtained.
What options do I have to attain this functional goal?
I've tried to apply the technique in 26-July-2009 - Version 2351-3306 release notes, but haven't gotten far. That technique seems targeted for a more static display, for example, only on initial render (mostly).
I also found Peter Wayne's article at http://www.learn alpha.com/UseJavasc...ptwithWAS.html and that seems a bit more to the point and might provide a bit of basic foundation. But adapting it to trigger off the onclick event and identify which button was clicked will be new ground as I see nothing in the select button "field/value" which which might be useful in the getElementById step - nothing like a button.selected = true sort of thing.
// the while loop goes through the entire table
while (document.getElementById("V.R"+i+".GALS")) {
obj=document.getElementById("V.R"+i+".GALS");
// check to see if a number is in the field, as opposed to a blank field
if (parseFloat(obj.value)){
rows+=1;
gals+=parseFloat(obj.value);
driver=document.getElementById("V.R"+i+".DRIVER").value;
if (drivers.indexOf(driver+",")==-1)
drivers+=driver+",";
}
i+=1;
} //end while
As my Javascript skillbase is zero, I'd hate to launch into this approach if there's a better way. It would be great if an xbasic solution was available.
Any ideas? Or is there a better approach altogether to achieve the ultimate goal? A radiobutton sort of approach would be fine, too, with each option row having a radiobutton instead of select button. But it's not obvious how that would be any easier to implement.
First page contains a main product grid. Customer views product catalog, clicks on link to go to second page for further information and to begin ordering process:
Second page displays product photos, specs, etc. on top. In middle there is "bonus product/option" grid, with one column containing a static "SELECT" button on each row. This grid is to allow customer to select one (and ONLY one) addon/option (ie: custom sizing, inscription, free delivery, etc) for the selected product.
On the bottom of the second page is a dialog with textarea (notes, ie: inscription instructions, sizing, etc) and buttons (ie: "ORDER", "SAVE", etc) on the bottom.
STUMPED #1: When a customer clicks the "SELECT" button, the behavior I want to implement is that 1) the button on the row just selected takes on a specified background color (indicating it is currently selected); and 2) any previously-selected button/row must be "de-selected" and returned to default background color. Relevant background variables must be updated appropriately for subsequent use in table updates, etc.
STUMPED #2: The "ORDER" button on the bottom dialog should be disabled or hidden until/unless a selection has been made in the bonus/options grid so as to prevent an attempt to place order without completing product configuration process. This button would initiate table updates using data previously obtained.
What options do I have to attain this functional goal?
I've tried to apply the technique in 26-July-2009 - Version 2351-3306 release notes, but haven't gotten far. That technique seems targeted for a more static display, for example, only on initial render (mostly).
I also found Peter Wayne's article at http://www.learn alpha.com/UseJavasc...ptwithWAS.html and that seems a bit more to the point and might provide a bit of basic foundation. But adapting it to trigger off the onclick event and identify which button was clicked will be new ground as I see nothing in the select button "field/value" which which might be useful in the getElementById step - nothing like a button.selected = true sort of thing.
// the while loop goes through the entire table
while (document.getElementById("V.R"+i+".GALS")) {
obj=document.getElementById("V.R"+i+".GALS");
// check to see if a number is in the field, as opposed to a blank field
if (parseFloat(obj.value)){
rows+=1;
gals+=parseFloat(obj.value);
driver=document.getElementById("V.R"+i+".DRIVER").value;
if (drivers.indexOf(driver+",")==-1)
drivers+=driver+",";
}
i+=1;
} //end while
As my Javascript skillbase is zero, I'd hate to launch into this approach if there's a better way. It would be great if an xbasic solution was available.
Any ideas? Or is there a better approach altogether to achieve the ultimate goal? A radiobutton sort of approach would be fine, too, with each option row having a radiobutton instead of select button. But it's not obvious how that would be any easier to implement.