javascript onclick multiple functions 1

[lewnussi]

In javascript, I am trying to call more than one function starting with onclick in a form.

In the form, this does not work:

<input type="submit" value="thevalue" name="goodname" onclick="return function_1(this.form);function_2(this.form);" />

So I tried only function_1 for the onclick, and put this in the .js file, but it also does not work:

function function_1(health)
{
if(health.phone.value=="")
{
alert("Please enter your home telephone number.\n");
return false;
function_2();
}
return true;
}

function function_2(health)
{
     	
if(health.first_name.value.length<2)
{
	alert("Please enter your first name.\n");
	return false;
}		
return true;
}

In both cases, the first function works, but not the second, and the Firefox Error Console does not return an error.

How do I call function_2?

 

[dwarfthrower]

What do you understand the function of the [tt]return[/tt] statement to be in Javascript?

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[lewnussi]

The return statement specifies the value to be returned by a function and performs the act of returning that value to where the function was called from.

Tried the following, does not work:

function function_1(health)
{
if(health.phone.value=="")
{
alert("Please enter your home telephone number.\n");
return false;
}
return true;
return function_2();
}

function function_2(health)
{        
if(health.first_name.value.length<2)
{
    alert("Please enter your first name.\n");
    return false;
}        
return true;
}

Still puzzled.

 

[dwarfthrower]

The return statement specifies the value to be returned by a function and performs the act of returning that value to where the function was called from.

...ending the execution of the current function.

Once your code hits a return statement, no more code in that function will be executed.

[tt]function_2[/tt] is never being executed because you are always returning before you call it. If you'd taken the time to step through your code with a debugger you would have seen that.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[lewnussi]

It's not a matter of time, it's a matter of knowledge.

I was aware of the Firefox Error Console and was using that, but you indicate that I should use a "debugger" also.

I have now installed the Venkman debugger and will try that.

Thank you for the information.

 

[tsuji]

[1]
>onclick="return function_1(this.form);function_2(this.form);"
[tt]onclick="return function_1(this.form) [red]&&[/red] function_2(this.form);"[/tt]
[2]
[tt]function function_1(health)
{
if(health.phone.value=="")
{
alert("Please enter your home telephone number.\n");
return false;
}
return true;
[red]//[/red]return function_2();
}[/tt]

 

[lewnussi]

tsuji:

The Firefox Error Console says that the onclick you suggest is a syntax error.

Still puzzled.

 

[dwarfthrower]

You could also read the FAQs or do a google search on "form validation Javascript".

However, for the sake of brevity:

/**
 * Wrap everything in a validation function.
 * That way you can keep adding further calls
 * to the validation function as you progress.
 */
function validateMyForm(objForm){
 if(!function_1(objForm)){
  return false;
 }
 if(!function_2(objForm)){
  return false;
 }
}

function function_1(objForm){
 if(objForm.phone.value == ""){
  alert("Please enter your home telephone number.\n");
  return false;
 }
 return true;
}

function function_2(objForm){
 if(objForm.first_name.value.length < 2){
  alert("Please enter your first name.\n");
  return false;
 }
 return true;
}

<input type="submit" value="thevalue" name="goodname" onclick="return validateMyForm(this.form);" />

It's not an ideal method though to play "mastermind" with your users in this fashion. You're better off letting them know in one hit which fields need rectification rather than have them fill in one field only to be told another needs filling in ad infinitum. The better approach would be:

/**
 * Still have everything wrapped up in the one function
 */
function validateMyForm(objForm){
 // Initialise an error message
 var strError = "";

 // Build up the error message with your 
 // functions
 strError += function_1(objForm);
 strError += function_2(objForm);

 // If we have no error message then 
 // everything validated
 if(strError == ""){
  return true;
 }
 else{
  strError = "The following fields need to be completed\n" + strError;
  alert(strError);
  return false;
 }
}

function function_1(objForm){
 if(objForm.phone.value == ""){
  return "\nPlease enter your home telephone number.\n";
 }
 else{
  return "";
 }
}

function function_2(objForm){
 if(objForm.first_name.value.length < 2){
  return "\nPlease enter your first name.\n";
 }
 else{
  return "";
 }
}

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[lewnussi]

dwarfthrower,

Before coming to this forum, I did spend many hours Google-searching trying various search terms and finally gave up because I could not find anything that worked.

Your second solution would be best but The Error Console says that objForm has no properties.

...
function function_1(objForm){
 if(objForm.phone.value == ""){
...

I have not been able to fix it.

 

[trollacious]

Show us the code you have now so we can see what you're working with.

Lee

 

[lewnussi]

onclick="return validateMyForm();"

function validateMyForm(objForm){
 // Initialise an error message
 var strError = "";

 // Build up the error message with your 
 // functions
 strError += function_1(objForm);
 strError += function_2(objForm);

 // If we have no error message then 
 // everything validated
 if(strError == ""){
  return true;
 }
 else{
  strError = "The following fields need to be completed\n" + strError;
  alert(strError);
  return false;
}
}

function function_1(objForm){
 if(objForm.phone.value == ""){
  return "\nPlease enter your home telephone number.\n";
 }
 else{
  return "";
 }
}

function function_2(objForm){
 if(objForm.first_name.value.length < 2){
  return "\nPlease enter your first name.\n";
 }
 else{
  return "";
 }
}

 

[tsuji]

>The Firefox Error Console says that the onclick you suggest is a syntax error.
On its own and up to the point of info shown, I don't think so. As to any other info thereafter, I have not read it.

 

[dwarfthrower]

Your second solution would be best but The Error Console says that objForm has no properties.

onclick="return validateMyForm();"

onclick="return validateMyForm([!]this.form[/!]);"

My second solution would be best if you implemented it.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[lewnussi]

Yes, dwarfthrower, you are correct, my mistake.

I was so focused on your second js code, I passed over the onclick code you included.

Then I read the FAQ at:

http://www.tek-tips.com/faqs.cfm?fid=2809

but not carefully enough, and wrongly assumed that this.form was not needed.

Your code works perfectly when properly implemented.

This method is a way better result than I had ever expected.

Thank you.

 

[dwarfthrower]

No sweat, happy to help, even happier if you learn something along the way

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo