SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to store default field values and warn users when they are changed?

    I have to add some technique which will solve the following problem.

    Scenario:
    A form is presented to the user in our web application. Say it has
    4 text fields,
    2 radio buttons (Yes / No)
    1 checkbox
    1 select list.

    Now 2 textfields are pre-populated, one radio button (Yes) is pre-selected, checkbox is not checked, one option from select list is preselected.

    Problem:
    In 90% of the cases, all that the user needs to do is enter values in the 2 empty textfields and click Submit.

    However, the user might change the values in the preselected controls, like check the checkbox, change radio selection from Yes to No, select a different option from the select list, change the default values from the prepopulated text fields.

    Now in such a case where 'default' values are changed, I need to show a alert or a popup layer to the user when the submit button is clicked.

    Showing a popup layer or an alert:
    The popup layer/alert will be a confirmation popup which will say something like -

    "You have changed the default values for:[all the fields which were changed by user]. This requires you to do [some task] once you submit the form.

    If you do not wish to change these defaults, click Cancel.
    To proceed with the changes, click OK and then Submit."

    Clicking OK:
    If user clicks OK, then all is well. User will click Submit to submit the form and do some task which is required when defaults are changed.

    Clicking Cancel:
    If user clicks Cancel then the defaults should be restored. User is now free to click Submit.

    Help needed:
    Though I am not very new to Javascript, my knowledge is limited to old form validation techniques. I need help in designing a solution to this problem. Basically I want to come up with a flexible solution so that it can be applied with very little effort to other screens which require similar treatment.

    One technique I thought of was to have a Javascript function be called on page load, which would record values of the fields and store them in global variables. When the user clicked submit, another function would compare each of the field values with existing recorded values. Based on this, a popup layer/alert would be shown.

    I know that this is the general logic for a solution but it means having to hard code global variables and if (oldvalue == newvalue) conditions in every page I need this in.

    Can you gurus, please help me with a better design in Javascript?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One technique I thought of was to have a Javascript function be called on page load, which would record values of the fields and store them in global variables. When the user clicked submit, another function would compare each of the field values with existing recorded values. Based on this, a popup layer/alert would be shown.
    I think you have a good idea there.

    Something like...
    Code:
    var i, j, k = 0, a = new Array();
    
    for (i = 0; i < document.forms.length; ++i)
    {
      for (j = 0; j < document.forms[i].elements.length; ++j)
      {
        a[k++] = document.forms[i].elements[j].value;
      }
    }
    But this is a simplified example. You'll have to check for the 'type' of form control to know what property to save: value, checked, etc.

  3. #3
    SitePoint Enthusiast Tygatur's Avatar
    Join Date
    Apr 2006
    Location
    Germany
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if think it would be much easier if you inform the user the moment he or she clicks on the checkbox

    <input type="checkbox" onclick="this.checked=confirm('Please note that enabeling this option will mean that ...')" />
    <input type="radio" onclick="this.checked=confirm('Please note that enabeling this option will mean that ...')" />
    to code or not to code ?
    that's too much of a question for a signature.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •