Button Onclick

[fmrock]

I used to have a function call on a regular submit button, but changed it to a image type, but the call does not appear to work anymore.

It just seems to submit right though when it should not.

<input type="image" name="No Addendum Required" class="Addendum_btn" src="images/buttons/no_addendum_required.png" alt="No Addendum" width="100" height="100" border="0" onClick="return validateNoAddendumRequired()">

here is the JS function

function validateNoAddendumRequired() {
   var ta = frmAddendum.elements["Addendum"];
   clearComments(document.frmAddendum.Addendum);   

   if (!ta.value.length) {
      //alert("You must enter your text or choose No Addendum Required.");
      return true;
   }
   else
   {
	return (confirm("You have chosen to enter a comment.  This will not become part of the medical record."));
   }
}

 

[fmrock]

Here is the previous button code.

<input name="btnSubmit" type="submit" id="btnSubmit" class="button" value="No Addendum Required" onClick="return validateNoAddendumRequired()">

 

[tlhawkins]

Just for debug purposes change your function to this:

function validateNoAddendumRequired() {
  alert("click happened");
  return false;
}

If this alert doesn't happen then point us at your HTML. Chances are there is a javascript error someplace on the page that has caused JS to stop.

If the alert does happen then start adding your previous code back in until you find the problem.

Travis Hawkins
jobs.bestcodingpractices.com

 

[BillyRayPreachersSon]

Why not move the onlick attribute from your button and put the same code in an onsubmit attribute on the form?

So:

<form ... onsubmit="return validateNoAddendumRequired();">

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

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

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Diancecht]

Did the TextArea also change?

Cheers,
Dian

 

[tsuji]

>var ta = frmAddendum.elements["Addendum"];
[tt]var ta = [red]document.[/red]frmAddendum.elements["Addendum"];[/tt]

>[tt]name="No Addendum Required"[/tt]
Giving value of name attribute with spaces in it is not very clever in particular you have such a broad choice of name!

 

[fmrock]

I have 3 buttons on this form, and 2 of them need to perform different validation.

Any ideas on how i Can fix this? Do i need on validation function that is run onSubmit? But is there a way to tell which button is clicked?

<form action="my_incomplete_charts_chart_view_update.asp" method="post" name="frmAddendum">


<textarea name="Addendum" cols="47" rows="10" onClick="clearComments(document.frmAddendum.Addendum)"><%=Addendum%></textarea>  
<table>
<tr>
    <td><input type="image" name="No_Addendum_Required" class="Addendum_btn" src="images/buttons/no_addendum_required.png" alt="No Addendum" width="100" height="100" border="0" onClick="return validateNoAddendumRequired()"></td>
    <td><input type="image" name="Save_Complete_Later" class="Addendum_btn" src="images/buttons/save_addendum_complete_later.png" alt="Save Addendum for Later" width="100" height="100" border="0"></td>
    <td><input type="image" name="Electronic_Signature" class="Addendum_btn" src="images/buttons/save_addendum_signature.png" alt="Save and Sign" width="100" height="100" border="0"  onClick="return validateElectronicSignature()"></td>
</tr>
</table>
</form>

function validateElectronicSignature() {
   var ta = document.frmAddendum.elements["Addendum"];
   clearComments(document.frmAddendum.Addendum);   

   if (!ta.value.length) {
      alert("You must enter your text or choose No Addendum Required.");
      return false;
   }
   return (confirm("By signing this addendum your statements will become part of the medical record."));
}


function validateNoAddendumRequired() {
   var ta = document.frmAddendum.elements["Addendum"];
   clearComments(document.frmAddendum.Addendum);   

   if (!ta.value.length) {
      //alert("You must enter your text or choose No Addendum Required.");
      return true;
   }
   else
   {
	return (confirm("You have chosen to enter a comment.  This will not become part of the medical record."));
   }
}

 

[tsuji]

[1] If scripted as such and that it does not work (meaning the form is submitted despite all), it must be that the function not shown clearComments(obj) is erronous. You have to show that function if you want to debug.

[2]
>Do i need on validation function that is run onSubmit?
You can, but you can do as such as well.

>But is there a way to tell which button is clicked?
Client-side sure as well as server-side. Client-side here, just pass the name of the image-type input element to the function.
[tt] onclick="return f(this.name)"[/tt]
and then check the name (string) passed to the function f as argument. In that case, you don't need two separate functions. But as such shown, you don't need to know because you script two validating function. You can combine them after by passing the name if you want to.

[4]
The main thing is to show and make sure clearComments() is correct. As an note, you should just pass the ta established to it. They are the same object.
>clearComments(document.frmAddendum.Addendum);
[tt]clearComments(ta);[/tt]

 

[fmrock]

I dont think the clear comments should have anything do do with the problem.

Here is that function.

function clearComments(field) {
    if (field.value == "Enter your Addendum here.") {
        field.value = "";
    }
}

I think it has to do with <input type="image" instead of using regular submit buttons.

I think i should change the new images to be regular links and call the JS function and then have the function submit the form.

How would I change the existing 2 functions?

 

[tsuji]

In that case, I have nothing to add.