Help need in undertanding onChange, onSubmit & more 1

lcs01 · Jun 7, 2007

Experts,

I wrote a small piece of js/html code like this:

Code:

<head>
<script language="JavaScript" type="text/javascript">
function isBlank (userInput) {
  var val = userInput.value;
  alert('In isBlank(), val = ' + val); // for debug only
[COLOR=red]/* what I want to do:
if userInput is blank, ask users to enter something
else go ahead to call save.pl
*/[/color]
  //return false;
}
</script>
</head> 
<body>  
<form method="post" action="save.pl" name="theForm"> 
First Name: <input type="text" name="fname" onChange="isBlank(this);" /> 
<input type="submit"> 
</form> </body>

Here are my questions:

1) Is there a difference between onChange="isBlank(this);" and onChange="return isBlank(this);"?

I tried both and could not tell the difference.

2) After I entered something and clicked anywhere on the screen, the js function isBlank() is invoked. Certainly this is not ideal. How can I implement it in a way so that isBlank will be called ONLY when I clicked the button 'Submit'?

3) To solve the question in #2, I tried 'onSubmit' instead of 'onChange'. But it did not work.

However, I do believe 'onChange' is not an ideal way for this purpose, because the current implementation has a problem as follows:

After you enter something, you click once, isBlank() is called. But if you click twice w/o entering a new string, isBlank() will not be called. I understand this behavior is caused by onChange(), because nothing is changed, no need to call isBlank().

So, how do I make sure that isBlank is called whenever I click 'Submit' button with or without make a change in the user input area?

4. I also need help in implementing what is stated inside 'function isBlank()' as a comment in RED.

I hope I have made myself clear and thank you, in advance, for your help.

lcs01 · Jun 7, 2007

I guess I found a solution:

Code:

<form name="theForm" action="save.pl" method="post" onSubmit="return isBlank(this);">

monksnake · Jun 7, 2007

Ok, I'll help you out, I was overwhelmed by all the questions, but I see you got the onsubmit correct for the most part.

1) Difference is one acts as a subroutine (onChange="isBlank(this);") and the other acts as a function (nChange="return isBlank(this);"). Functions always have return values, they perform commands on something and kick out something, subroutines simply process info without kicking any information back. In this case of you code above, there won't be any difference that you will notice in your code with the two different calls.

2) You did that already.

3) You did that already.

4) Ok here's where I'll help.

Your code as is:

Code:

<form name="theForm" action="save.pl" method="post" onSubmit="return isBlank(this);">

Won't do anything in validating the text box (seeing if it's not blank). You are passing a reference to [!]this[/!], which is fine on the <input> element, cause [!]this[/!] would be the textbox. Putting it on the <form> means [!]this[/!] is a reference to the form.

So to fix that, you have to reference the textbox.

I prefer to use .getElementById when referring to objects, so first do this:

Code:

<input [!]id="fNameText"[/!] type="text" name="fname" />

id can be anything you want, just as long as no 2 objects have the same id.

Now refer to that textbox with your function call:

Code:

<form name="theForm" action="save.pl" method="post" onSubmit="return isBlank([!]document.getElementById('fNameText')[/!]">

Now in your function, you do the check, since you have that function being called onsubmit, if it returns false, the form WON'T be submitted.

Code:

function isBlank (userInput) {
  var val = userInput.value;
  if (val == "") {
     alert("The textbox is blank, please enter something.");
     return false;
  }
  return true;  
}

That will give you what you are after.
Note: You can send spaces within the textbox with this code and it will submit.

[monkey]

<.

lcs01 · Jun 8, 2007

Thank you, monksnake, so much for your great help!!

I have two more questions:

1) There are more than one required field which should be checked in isBlank(). My current implementation is somewhat like this:

The html part stays the same:

Code:

<form name="theForm" action="save.pl" method="post" onSubmit="return isBlank(this);">

The js part is like this:

Code:

var requiredFields = new Array("fname", "lname", "email");

function isBlank (userInput) {
  var len = userInput.elements.length;
  var blankFields;
  for(i = 0; i < len; i++) {
    var key = userInput.elements[i].name;
    var val = userInput.elements[i].value;
    for(j = 0; j < requiredFields.length; j++) {
      if(key == requiredFields[j]) {
        if(val == '') {
          blankFields += key + ',';
        }
      }
    } 
  } 
  if(blankFields) {
    alert('These fields are required: ' + blankFields);
    return false;
  }
  return true;
}

However, I don't like those two loops. I wonder if I can get rid of the inner loop somehow?

In addition, I did not use an ID as you suggested. Can my implementation be improved by using an ID and calling getElementById? If so, how?

I'll ask my 2nd question in a separated thread. Thank you again for you help.

lcs01 · Jun 8, 2007

Here is my 2nd question.

I am actually designing a user account application page. It is not necessary to use javascript. But I want to learn js through this project. So, here is what I want:

In this page, a user is asked to enter his first & last name and he can also pick his own login ID. So the html part is somewhat like this:

Code:

<form name="theForm" action="save.pl" method="post" onSubmit="return isBlank(this);">
First Name: <input type="text" name="fname" />
<br>
Last Name: <input type="text" name="lname" />
<br>
Pick an ID: <input type="text" name="loginID" />
<input type="submit"> 
</form>

Once this user has entered his first & last name, a default userID would be first initial + last name. But this should be verified through perl against our database to make sure the uniqueness. If it is unique, then it is populated to the loginID field, but still let the user to change.

BTW, I know perl pretty well. I just need help 1) to invoke a perl code from js; 2) to populate it to the loginID field.

Could monksnake or other experts show me a way to implement it? Many thanks!

monksnake · Jun 8, 2007

1. With the code you have, the way I'd do it is make requiredFields a string. Then check with the indexOf method to see if the name of the input is in requiredFields.

Code:

var requiredFields = "fname, lname, email";

function isBlank (userInput) {
  var len = userInput.elements.length;
  var blankFields;
  for(i = 0; i < len; i++) {
    if (userInput.elements[i].value == '' && [!]requiredFields.indexOf(userInput.elements[i].name > -1[/!]) {   
       blankFields += userInput.elements[i].name + ',';
    } 
  } 
  if(blankFields) {
    alert('These fields are required: ' + blankFields);
    return false;
  }
  return true;
}

indexOf will return -1 if a string isn't found within a larger string.

[monkey]

<.

lcs01 · Jun 8, 2007

I love it! Thank you, monksnake. I like your nickname, too.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help need in undertanding onChange, onSubmit & more 1

lcs01

Programmer

lcs01

Programmer

monksnake

Programmer

lcs01

Programmer

lcs01

Programmer

monksnake

Programmer

lcs01

Programmer

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help need in undertanding onChange, onSubmit &amp; more 1

lcs01

Programmer

lcs01

Programmer

monksnake

Programmer

lcs01

Programmer

lcs01

Programmer

monksnake

Programmer

lcs01

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

Help need in undertanding onChange, onSubmit & more 1