Order Form - Populating controls with data from controls on different pages

[atjensen11]

I am building an order form to allow people to register and pay for an event.  I have two questions, both of which are probably more related to Javascript coding within the order form rather than nBill functionality.

1.  The form will allow people to register up to eight ( people at one time.  On the very first page of the order form editor, I have a drop down combobox which asks the user how many people they would like to register.  There are eight fields on the next page in the order form editor.  If the user selects "6" from the combobox on the first page and then clicks the next button, I would like the second page to simply hide the last two fields on the form.  I successfully implemented control hiding for another page using check boxes based on this topic http://www.nbill.co.uk/forum/index.php/topic,2219.0.html.  I currently have the following code on within the Onload Javascript field of page 2.  Control ID "ctl_134" is the drop down combo box on page 1.  Control ID "ctl_178" is one of the controls to be hidden if the selected value were 1. 

Code: [Select]

if (document.getElementById(ctl_134).selectedIndex == 1)
    {
      document.getElementById(ctl_178).style.display = 'none';
    }

Do I need to interface with the $POST array instead and if so, are there any examples on how to do this?

2.  Page 2 is where the user enters the name(s) of the people to be registered for the event.  The following pages essentially sell add on items for each registrant such as paying membership dues, entering the golf tournament, etc.  I currently have label type controls which read "Registrant 1", "Registrant 2", etc.  Similar to the first question, how can I extract the value entered by the user in the "name" field from page 2 and populate the label values in later pages?

Thanks,
Tom

[netshine]

You should use quote marks around the field IDs when using getElementById (eg. document.getElementById('ctl_134').selectedIndex)

To get the value from another field, use document.getElementById('field_id').value.

[atjensen11]

Thanks for the response Netshine.

I did keep hacking away of my Javascript after posting and did stumble upon the need for the quotes as you mentioned.  Therefore, I did successfully resolve the first question in my post and it is working well.

I will try your suggestion for the second issue using a value from a previous control.  I have seen other responses you have provided in the forums regarding sanitizing user input before using.  You even mentioned a built in function of nBill to address the issue.  However, these examples appeared to be PHP code examples rather than Javascript.  Any suggestions for sanitizing user input before I use the text field value in a later label field?

[atjensen11]

Below is the current HTML code as rendered for the label control in my order form:

Code: [Select]

<span id="lbl_ctl_205">Registrant 1</span>

I want to change the "Registrant 1" text from this label to the result of:

Code: [Select]

document.getElementById('ctl_116').value;

I tried this code, but it didn't work.  I am not a Javascript expert, but I am think is the fact that the HTML to be changed is not truly a form input element and therefore does not have a value attribute.

Code: [Select]

document.getElementById('lbl_ctl_205').value = document.getElementById('ctl_116').value;


[atjensen11]

This worked for me:

Code: [Select]

document.getElementById('lbl_ctl_205').innerHTML = document.getElementById('ctl_116').value;


[netshine]

Yes, innerHTML is the easiest way of doing that (you can manipulate the DOM, which would be more semantically correct, but it is a lot more difficult, and innerHTML works in all browsers nowadays anyway).

Sanitising user input is not so crucial with javascript, as it all happens on the user's browser - javascript code is not executed on the server, so it cannot do any damage there. The main thing to worry about is whether the user input includes any single quote characters, as they would need to be 'escaped' by putting a backslash before them so that they are not treated as part of the javascript code.