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

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 236
  • Last Modified:

Passing form objects to a function

I am trying to do validation on a field called fname.  Actually all the form field objects.  I pass them through a function to another function but it keeps telling me my object is null.

Here is my code.

function testLength(field){
      object = document.getElementById(field);
      alert(object); /////////////--------->>> This shows the object as null.
            if (field == 0) {
                  object.style.backgroundColor = "yellow";
                  return false;
            }
            else
                  object.style.backgroundColor = "white";
                  return true;
      }
      

      
      function submitForm(){
            valid = true;
            if ( testLength(document.reg.fname) == false ){
                  alert("Please enter a first name");
                  valid = false;
            }
            
            return valid;
      }
0
monica73174
Asked:
monica73174
  • 10
  • 9
  • 5
2 Solutions
 
b0lsc0ttCommented:
monica73174,

How do you call the function testLength?  The way you have script it should be with a string that has an ID value.  If you are actually passing the form object to testLength then you don't need the second line.  The field variable in the function is the form object.

If field is some other object then you need to still change it.  In the submitForm function it calls that function but seems to pass a form element.  What is the test for in ...

if (field == 0)

That would be looking at the fname element.  What part of that element do you want to check for 0?  You might just need to specify the property you are testing.  I don't see any reason to use object when you have the element as an object with field.

I hope this helps.  Let me know if you have any questions or need more information.  You will need to clarify what is in the form and what the functions are suppose to do if you want me to be more specific on a fix.

b0lsc0tt
0
 
monica73174Author Commented:
I changed it to this, which works to check the length of fname field.  But it doesnt stop the form from submitting.

      function submitForm(){
            valid = true;
            if ( testLength(document.reg.fname.value) == false ){
                  alert("Please enter a first name");
                  valid = false;
            }
            
            return valid;
      }

function testLength(field){
      
            if (field.length == 0) {
                  document.reg.field.style.backgroundColor = "yellow";
                  return false;
            }
            else
                  object.style.backgroundColor = "white";
                  return true;
      }
0
 
monica73174Author Commented:
okay maybe this will help.  I have all these form fields and I am supposed to submit each one to a function called testLength.  I have to pass the field to the function.  I check each field to see if it has a length of zero.  If it does then the function returns false and cancels the form submit, displays an error and turns the text box yellow.  
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Göran AnderssonCommented:
Take aim... ready... shot in the dark, as you haven't shown how you call the function.

You have to pass on the return value from the function to the onsubmit event.

Change

onsubmit="submitForm()"

to

onsubmit="return submitForm()"
0
 
monica73174Author Commented:
This is my call to the function   onSubmit="return submitForm()">
0
 
Göran AnderssonCommented:
Change

if ( testLength(document.reg.fname.value) == false ){

to

if ( testLength(document.reg.fname) == false ){

and

      function testLength(field){
            if (field.length == 0) {
                  document.reg.field.style.backgroundColor = "yellow";
                  return false;
            }
            else
                  object.style.backgroundColor = "white";
                  return true;
      }

to

      function testLength(field){
            if (field.value.length == 0) {
                  field.style.backgroundColor = "yellow";
                  return false;
            }
            else
                  field.style.backgroundColor = "white";
                  return true;
      }
0
 
b0lsc0ttCommented:
Please review the last sentence in my last comment.  I am glad my comments so far have helped but to help more I will need to see the html and any other script.  Specifically the form tag and the element that has the onsubmit event you posted above.  That should be in the form tag or that may be the cause of your problem.

Without details we will just be guessing.  I hope this second attempt to get info works.  I won't ask the same questions again. :)

bol
0
 
monica73174Author Commented:
Sorry I was trying to not put too much code in the posting.  

Here is the script
<script type="text/javascript">
      function calcCost()
      {
            cost = 145;
            noguests = document.reg.guests;
            iguests = noguests.selectedIndex;
            
            cost += (iguests * 30);
            if (document.reg.member[0].checked == true)
            {
                  cost -= 25;
            }
            
            document.reg.total.value = cost;
            document.reg.fname.value = "test";
          document.reg.fname.style.backgroundColor = "yellow";
      }
      
            
                  
      function testLength(field){
      
            {
                  document.reg.field.style.backgroundColor = "yellow";
                  return false;
            }
            else
                  object.style.backgroundColor = "white";
                  return true;
      }
      function submitForm(){
            valid = true;
            alert('hello');
            
            if (document.reg.fname.value.length == 0 ){
                  testLength(document.reg.fname)
                  alert("Please enter a first name");
                  valid = false;
            }
            return valid;
      }
</script>

Here is my form.  

<form id="reg" name="reg" method="get" action="summary.htm" onSubmit="return submitForm()">
<input type="hidden" id="total" name="total" />

<table>
<tr>
   <td><span>*</span>First Name</td>
   <td><input name="fname" id="fname" /></td>
   <td style="text-align: right"><span>*</span>Last</td>
   <td><input name="lname" id="lname" /></td>
</tr>
<tr>
   <td id="add"><span>*</span>Address</td>
   <td colspan="3"><textarea id="address" name="address"></textarea></td>
</tr>
<tr>
   <td><span>*</span>E-mail</td>
   <td colspan="3"><input name="email" id="email" /></td>
</tr>
<tr>
   <td><span>*</span>Phone Number</td>
   <td colspan="3">
       <input id="phone1" name="phone1" size="3" />
       <input id="phone2" name="phone2" size="3" /> -
       <input id="phone3" name="phone3" size="4" />
   </td>
</tr>
<tr>
   <td colspan="3">Number attending banquet (add $30 per person)</td>
   <td>
       <select id="guests" name="guests" onChange="calcCost()">
       <option>0</option>
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
       <option>7</option>
       <option>8</option>
       <option>9</option>
       <option>10</option>
       </select>
   </td>
</tr>
<tr>
   <td colspan="3"><span>*</span>Member of ACGIP (save $25 on registration fee)</td>
   <td>
       <input type="radio" name="member" value="yes" onChange="calcCost()" /> Yes
       <input type="radio" name="member" value="no" onChange="calcCost()"  /> No
   </td>
   
</tr>
</table>

<p><span>* Required Information</span></p>
<p style="text-align: center"><input id="sbutton" type="submit" value="continue" /></p>
</form>
0
 
monica73174Author Commented:
I have been trying some different things btw, but its not the way I was told to do it.  
0
 
monica73174Author Commented:
Here is my new script  - it gets to the if statement of the testLength shows the length is 0 but still submits the form.  


<script type="text/javascript">
      function calcCost()
      {
            cost = 145;
            noguests = document.reg.guests;
            iguests = noguests.selectedIndex;
            
            cost += (iguests * 30);
            if (document.reg.member[0].checked == true)
            {
                  cost -= 25;
            }
            
            document.reg.total.value = cost;
      }
      
            
                  
      function testLength(field){
            alert('testLength');
            if (field.length == 0)
            {
                  alert('Length is wrong');
                  field.style.backgroundColor = "yellow";
                  return false;
            }
            else
                  {field.style.backgroundColor = "white";
                  return true;
                  
            }
      }
      
      /*function testPattern(field, reg){
            if (reg.test(field)){
            
            }
      } */
      
      function submitForm(){
            valid = true;
            if (testLength(document.reg.fname.value) == 0 ){
                  //testLength(document.reg.fname)
                  alert("Please enter a first name");
                  valid = false;
            }
            return valid;
      }
</script>
0
 
b0lsc0ttCommented:
Thanks for the html and code.  It is good to worry about posting too much but I did ask for it.  :)  In the future you can use the Attach Code Snippet box to attach the code and keep the impact to a minimum.  Let me know if you have a question about using it.

What do you mean by trying some different things?

bol

0
 
b0lsc0ttCommented:
I think I just saw it but let me know if you have been trying anything else. :)

bol
0
 
b0lsc0ttCommented:
Try changing a line in the submitForm() function.  My modification is below ...

            if (!testLength(document.reg.fname)){

The issue is passing the value and not the element.  Let me know how it works or if you have a question.

bol
0
 
monica73174Author Commented:
Thank you for being so kind and helping me.  Sometimes I am in a panic and I put something up very fast without thinking about it.  

Okay I found the problem, it doesnt like the  way I am trying to apply the style to the text box.  It was blowing up on it and just skipping it.  Thats a relief.  Now I just need to figure out how to apply the style.
0
 
b0lsc0ttCommented:
The change above will work.  You could also combine the 2 functions so you don't have to worry about passing the element.

Let me know if you have a question about getting it to work.

bol
0
 
b0lsc0ttCommented:
One other change is needed in the other function.

      function testLength(field){
            if (field.value.length == 0)

That should do it now though. :)

bol
0
 
monica73174Author Commented:
Thank you if I could give you a million points I would!  I have so much trouble with javascript and this really taught me a lot.
0
 
b0lsc0ttCommented:
Boy, a million points would be nice. :)  500 is great though.

I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
 
Göran AnderssonCommented:
Don't I at least get an assist? After all, I gave you the solution, and b0lsc0tt only repeated what I already said...
0
 
b0lsc0ttCommented:
I have no objection to a split.  As I reread the previous posts it seems GreenGhost did at the very least identify the main issue (http:#20317180), if not provide a working solution.  Although I did not notice this as I helped a split probably would be fair.  Let me know if you want me to reopen this question so you can change it.  If there is a reason the earlier posts didn't help then a response would help.  I am certainly not trying to tell you how to close this but just wanted to point it out in case you missed it and agree with what I just said.

Let me know if you have a question about any of this.

b0lsc0tt
EE Zone Advisor
0
 
Göran AnderssonCommented:
> t seems GreenGhost did at the very least identify the main issue (http:#20317180), if not provide a working solution.

But I did provide a working solution. monica73174 did incorporate most of my changes, and both the additional changes that you suggested are just things that she omitted or missed in my solution.
0
 
monica73174Author Commented:
How do I change it to split the points?  
0
 
monica73174Author Commented:
Thanks so much you have been very helpful.
0
 
Göran AnderssonCommented:
Thanks. :)
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 10
  • 9
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now