Solved

Passing form objects to a function

Posted on 2007-11-19
25
208 Views
Last Modified: 2012-06-27
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
Comment
Question by:monica73174
  • 10
  • 9
  • 5
25 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20316921
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
 

Author Comment

by:monica73174
ID: 20316938
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
 

Author Comment

by:monica73174
ID: 20316988
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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20317045
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
 

Author Comment

by:monica73174
ID: 20317057
This is my call to the function   onSubmit="return submitForm()">
0
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 250 total points
ID: 20317180
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20317195
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
 

Author Comment

by:monica73174
ID: 20317553
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
 

Author Comment

by:monica73174
ID: 20317562
I have been trying some different things btw, but its not the way I was told to do it.  
0
 

Author Comment

by:monica73174
ID: 20317596
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20317601
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20317610
I think I just saw it but let me know if you have been trying anything else. :)

bol
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 250 total points
ID: 20317634
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
 

Author Comment

by:monica73174
ID: 20317635
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20317642
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20317652
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
 

Author Comment

by:monica73174
ID: 20317687
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20317701
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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20317997
Don't I at least get an assist? After all, I gave you the solution, and b0lsc0tt only repeated what I already said...
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20318047
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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20318137
> 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
 

Author Comment

by:monica73174
ID: 20321198
How do I change it to split the points?  
0
 

Author Comment

by:monica73174
ID: 20321831
Thanks so much you have been very helpful.
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20322140
Thanks. :)
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
using web browser with BING 40 86
jQuery animation faster 1 17
Safari SVG Image Problem 1 20
Phone Dialer 5 36
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now