Code to clear a text field not working 1

[deeciple]

Hi All,

I have a function that I have been working on to dynamically (based on the user's selection in a drop list) enable and destroy spry validation for a couple of text fields (while also showing or hiding these fields). This part is working great but what I would like to do is if the user fills in data for these fields and then changes their mind and makes another selection I would like the fields to be cleared so that the data will not be entered into my database. I have what I think should be a working code but for some reason it's not. Could someone help me figure out what I am overlooking here? I added "this is not working" to my comments where the broken code is.

Thanks in advance,

Ken

// show and hide sections of a form
function preparePage() {

  var EquipLoc = document.getElementById("EquipLoc");
  var EquipID = document.getElementById("EquipID");
	
  document.getElementById("List1").onclick = function() {
		if (document.getElementById("List1").value=="Equipment issue") {
			// use CSS style to show it
			document.getElementById("Equipment").style.display = "block";
			document.getElementById("Satellites").style.display = "none";

      // if there isn't a validaton, build one
      if(!sprytextfield2){
      sprytextfield2 = new Spry.Widget.ValidationTextField("spryEquipID", "none", {validateOn:["blur"]});
      }
      if(!spryselect1){
      spryselect1 = new Spry.Widget.ValidationSelect("spryEquipLoc", {validateOn:["blur"]});
      } 

		} else if (document.getElementById("List1").value=="Satellite issue") {
			// use CSS style to show it
			document.getElementById("Satellites").style.display = "block";
			document.getElementById("Equipment").style.display = "none";

      //if exists, destroy spry field validation for these fields
      if (sprytextfield2) {
      sprytextfield2.resetClasses();
      sprytextfield2.destroy();
      sprytextfield2 = null;
      }

      if (spryselect1) {
      spryselect1.resetClasses();
      spryselect1.destroy();
      spryselect1 = null;
      } 
 
      //clear any values from these fields (this isn't working)
      if (null !== EquipLoc){
      EquipLoc.value="";
      }

      if (null !== EquipID){
      EquipID.value="";
      }
		} else {
			// hide the div
			document.getElementById("Equipment").style.display = "none";
			document.getElementById("Satellites").style.display = "none";

     //if exists, destroy spry field validation for these fields
      if (sprytextfield2) {
      sprytextfield2.resetClasses();
      sprytextfield2.destroy();
      sprytextfield2 = null;
      }

      if (spryselect1) {
      spryselect1.resetClasses();
      spryselect1.destroy();
      spryselect1 = null;
      } 

      //clear any values from these fields (this isn't working)
      if (null !== EquipLoc){
      EquipLoc.value="";
      }

      if (null !== EquipID){
      EquipID.value="";
      }
    }  
};

 

[vacunita]

Any errors? Check the browsers error console. I'm sure there will be a few.

Also the logic seems to be a little convoluted, and certain conditions are not likely to be true for the textbox elements to be cleared.

Also make sure the elements you are trying to target have the ID you are trying to target them with.

Issuing alerts in the conditions will help you debug whether or not they are true, and so whether or not the actual clearing code is getting executed.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[BillyRayPreachersSon]

You say this code isn't working:

//clear any values from these fields (this isn't working)
if (null !== EquipLoc){
      EquipLoc.value="";
}

What is the value of EquipLoc if it isn't null? Given the only place I can see that it is set is here:

var EquipLoc = document.getElementById("EquipLoc");

then I can only assume there is still an element on the page with an ID of "EquipLoc". If this is the case and it shouldn't be there, you need to remove it.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

[blue]@[/blue] Twitter:

http://twitter.com/SleepyDrunkDan

 

[deeciple]

Thanks for your help Vacunita and Dan. I used an alert to see when that line of code to clear my field was being triggered and it seems it is being triggered immediately on the click (before the value of the field in my if statement is set. So it seems there never is a condition to trigger the clearing of the text field. This is strange, though because my "dynamic" spry validation is being created and destroyed properly. Anyway there will be time for more testing in the office tomorrow. Happy holiday all!!!

Thanks,

Ken

 

[vacunita]

If this is the case and it shouldn't be there, you need to remove it.

Why? The element needs to exist to be able to clear its value. I agree it's an odd way of checking it, but it's not wrong. Also it's good practice to validate that an element or variable exists before attempting to use it.

As far as when it's triggered, you may be right that the timing isn't correct, but it should affect the entire code, that is nothing should be happening correctly.

The reason is the usage of onclick, as it triggers the code the second you click on the list. Rather than waiting for an option to be selected. You can use the onchange event to make sure your code only runs when the value of the list has changed.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[deeciple]

The reason is the usage of onclick, as it triggers the code the second you click on the list. Rather than waiting for an option to be selected. You can use the onchange event to make sure your code only runs when the value of the list has changed.

Yes, I noticed this behaviour. I think I experimented with onchange while I was trying to get the dynamic validation to work and for some reason I abandoned it. It may be that I need to revisit it now that I have that part working. Hopefully it won't fix one thing while breaking the other. lol.

I am in meetings for a while but I will try it ASAP and let you know how it goes.

Kind regards,

Ken

 

[BillyRayPreachersSon]

If this is the case and it shouldn't be there, you need to remove it.

Why? The element needs to exist to be able to clear its value. I agree it's an odd way of checking it, but it's not wrong.

I think you've misunderstood me. I was pointing out that the test [that we are told is broken] can only pass if "EquipLoc" is null, and the only way that can happen [in the code we've been shown] is if the getElementById call fails. This can only happen if #EquipLoc is not present, which is why I said that it should be removed if the test is to pass.

Dan

 

[deeciple]

I was pointing out that the test [that we are told is broken] can only pass if "EquipLoc" is null

Probably should use "" (empty string) instead of null?

Ken

 

[vacunita]

Dan, look at that bit of code again. It is checking if EquipLoc is different to null. Or otherwise not null.

if(null [red]!==[/red] EquipLoc)

Which means it needs to exist. otherwise it's value could not be set to an empty string.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[BillyRayPreachersSon]

I know. But it can never be null if the element exists.

I think we must be talking about two different things. I'm talking about the test not being able to fail unless the element doesn't exist. You're talking about the value not being able to be set unless the element exists.

Dan

 

[vacunita]

But it needs to not fail. Otherwise nothing will happen.

Again it's a little redundant, but it should work. It just means it will work every time.

So it will attempt to reset the value.

I don't see the problem with that condition then.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[BillyRayPreachersSon]

After re-reading the original post, I see where the confusion comes from.

I read this:

//clear any values from these fields (this isn't working)
if (null !== EquipLoc){
      EquipLoc.value="";
}

and thought that the "this isn't working" comment applied to the test, not to the setting of the value. I should've paid more attention to the description of the problem... sorry!

Dan

 

[deeciple]

Hi All,

I think I have it working now. I discovered that my dynamic validation was not functioning as I had originally thought either, so I had to troubleshoot that. Thanks for the tips on using alerts to track down where the code was failing. This was really helpful. I ended up having to move all of the code to a separate function which is called via the onblur event of the drop list.

I also had to change the resetClasses() method that I was using to simply reset(). I don't really know what the difference is but I had gotten the idea for the code from another site and was simply trying to apply it to my needs.

Anyhow, here is the final (hopefully working) code:

// set and destroy dynamic validation
function setValidation() {

  var discrepType = document.getElementById("List1").value;
  var EquipLoc = document.getElementById("EquipLoc");
  var EquipID = document.getElementById("EquipID");

  if (discrepType=="Equipment issue") {

      // if there isn't a validaton, build one
      if(!spryselect1){
      spryselect1 = new Spry.Widget.ValidationSelect("spryEquipLoc", {validateOn:["blur"]});
      }
      if(!sprytextfield2){
      sprytextfield2 = new Spry.Widget.ValidationTextField("spryEquipID", "none", {validateOn:["blur"]});
      }

  } else {

    // if there is a validaiton in sprytextfield destory it, and clear the variable
    if (spryselect1) {
    EquipLoc.value="";
    spryselect1.reset();
    spryselect1.destroy();
    spryselect1 = null;
    //this is for testing:
    //alert("spryselect1 was destroyed.");
    }

    if(sprytextfield2){
    EquipID.value="";
    sprytextfield2.reset();
    sprytextfield2.destroy();
    sprytextfield2 = null;
    //this is for testing:
    //alert("sprytextfield2 was destroyed.");
    }

  }
  // proceed with the rest as normal  
  return true;
};