[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript : how to detect form elements that have changed.

Posted on 2007-10-16
9
Medium Priority
?
815 Views
Last Modified: 2008-01-09
Hi, I am totally new to javascript and need some help in debugging some code. What I need to do is only loop through fields that have been changed by the user. So I am guessing is there a property I can utilise for form.landingpages where there has been a change by the user. Any help would be appreciated:


for (var x=0; x < form.landingpages.length; x++){                        
//do not process the hidden field
if (form.elements['landingpages'][x].type != 'hidden') {                  
// keep a track of vanities to be created
currentVanity = eval("form.vanity_" + form.elements['landingpages'][x].value + ".value.toUpperCase()");
if (currentVanity.length > 0) {
aVanitiesToAdd.push(currentVanity);
                        }                                                      
0
Comment
Question by:anwarmir
8 Comments
 
LVL 3

Expert Comment

by:frindo
ID: 20088603
Well if all of the form fields are text fields then you can loop through and check to see if the value of the field is not equal to the default (if the field is empty it would be like this):

if(formfield.value != "") {
//do stuff
}

This can also work with almost every other type of form field by just knowing the default option and checking accordingly. (In the case of a checkbox you could see if it was checked it it defaults to unchecked)
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 1000 total points
ID: 20089110
All text input fields on the form have a default property named: defaultValue
That value is not dependant on empty or blank fields. It is the field value as loaded by page open.
So you can compare that value to actual field value to decide whether it is changed or not. And you have not to care about hidden fields because they are not changed but that extra compare does not hurt.

I mean this:

    if(document.yourFormName.yourFieldname.defaultValue!=document.yourFormName.yourFieldname.value){
        // field changed...
    }


0
 
LVL 3

Expert Comment

by:KhoiNqq
ID: 20091140
Just using onChange attribute of the input field, every input field has onChange event, just add an event listener to each input field, the following will upper case the input (if I not misunderstand your provided code):
  <script type="text/javascript">
   function upperMe(el){
   alert(el);
     if ((el.tagName.toLowerCase() == "input") && (el.type.toLowerCase() == 'text')){
         // Make sure we get the desired element <input type="text">
         el.value = el.value.toUpperCase();
     }
   }
</script>
<form>
<input type="text" onchange="upperMe(this)">
...
</form>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20091570
So you want to only save the changed fields.
reading your code, I assume you have a bunch of fields all called landingpages, some hidden
I also assume you have for values entered some fields called vanity_something where the user can enter something

I think I would code it like this (assuming the above is correct - next time post more code, please):

for (var i=0; i < form.landingpages.length; i++){                        
  //do not process the hidden field
  if (form.elements['landingpages'][x].type == 'hidden') continue;                  
  var page = form.elements['landingpages'][i].value;
// keep a track of vanities to be created
  var vanity = form.elements["vanity_" +page].value;
  if (vanity.length > 0 && vanity !=form.elements["vanity_" +page].defaultValue)  {
    aVanitiesToAdd.push(vanity.toUpperCase());
  }                                        
}

Michel
0
 

Author Comment

by:anwarmir
ID: 20092286
Thanks Michel.
Here is the full code I think :)
      var aVanityNames = new Array(#UCase(QuotedValueList(rsVanities.vcVanityName))#);
            var aReservedVanityNames = new Array(#UCase(QuotedValueList(Session.stCampaign.stSettings.rsReservedVanities.Name))#);

            for (var x=0; x < form.landingpages.length; x++){                                                                  
                  //do not process the hidden field
                  if (form.elements['landingpages'][x].type != 'hidden') {                  
                        // keep a track of vanities to be created
                        currentVanity = eval("form.vanity_" + form.elements['landingpages'][x].value + ".value.toUpperCase()");                                    
                        if (currentVanity.length > 0) {
                              aVanitiesToAdd.push(currentVanity);
                        }                                                      
      
                        // Check for illegal characters in the vanity name
                        if (currentVanity.match(/[^A-Za-z0-9]/) != null) {
                              dVanityNameError = 1;                        
                              vanityErrorMessage += '* The ' + currentVanity + ' Vanity Name contains illegal characters' + '\n';                                                            
                        }
                        
                        // check vanity does not already exist in db
                        for (var i=0; i<aVanityNames.length; i++) {
                              if ( currentVanity == aVanityNames[i]) {
                                    dVanityNameError = 1;
                                    vanityErrorMessage += '* The ' + currentVanity + ' Vanity Name is already in use' + '\n';
                                    break;
                              }
                        }                                                                  
                  //do not process the hidden field
                  if (form.elements['landingpages'][x].type != 'hidden') {                  
                        // keep a track of vanities to be created
                        currentVanity = eval("form.vanity_" + form.elements['landingpages'][x].value + ".value.toUpperCase()");                                    
                        if (currentVanity.length > 0) {
                              aVanitiesToAdd.push(currentVanity);
                        }                                                      
      
                        // Check for illegal characters in the vanity name
                        if (currentVanity.match(/[^A-Za-z0-9]/) != null) {
                              dVanityNameError = 1;                        
                              vanityErrorMessage += '* The ' + currentVanity + ' Vanity Name contains illegal characters' + '\n';                                                            
                        }
                        
                        // check vanity does not already exist in db
                        for (var i=0; i<aVanityNames.length; i++) {
                              if ( currentVanity == aVanityNames[i]) {
                                    dVanityNameError = 1;
                                    vanityErrorMessage += '* The ' + currentVanity + ' Vanity Name is already in use' + '\n';
                                    break;
                              }
                        }
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20092353
Actually I was looking for the html of the form
Is the # thingy Cold fusion or something?

And I see the script twice...
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 1000 total points
ID: 20092378
With my code it would be

function validate(form) {
  var vanityErrorMessage="";
  for (var i=0; i < form.landingpages.length; i++){                                      
    //do not process the hidden field
    if (form.elements['landingpages'][i].type == 'hidden') continue;                  
    var page = form.elements['landingpages'][i].value;
    // keep a track of vanities to be created
    var currentVanity = form.elements["vanity_" +page].value;
    if (currentVanity.length == 0 || currentVanity ==form.elements["vanity_" +page].defaultValue)  {
      continue; //  ignore blank and not changed
    }
    // Check for illegal characters in the vanity name
    if (currentVanity.match(/[^A-Za-z0-9]/) != null) {
      dVanityNameError = 1;                        
      vanityErrorMessage += '* The ' + currentVanity + ' Vanity Name contains illegal characters' + '\n';                                                            
      break;
    }
    // check vanity does not already exist in db
    for (var i=0; i<aVanityNames.length; i++) {
      if ( currentVanity == aVanityNames[i]) {
        dVanityNameError = 1;
        vanityErrorMessage += '* The ' + currentVanity + ' Vanity Name is already in use' + '\n';
        break;
      }
    }
  }
  if (dVanityNameError) {
    alert(vanityErrorMessage);
    return false
  }
  aVanitiesToAdd.push(currentVanity.toUpperCase());
  return true;                                                  
}
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20561843
Forced accept.

Computer101
EE Admin
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question