erro on validating does not stop when change from button to image

[cat5ive]

Hi,

I have an asp that contain a form table. It validate some of the fields when user click 'update' botton. Then submit itself (to add or update to database file). Then redirect to the previous page.

It was working fine until I change the input type="botton" to input type="image". The problem now is when alert box pops up (error in ponumber or invamount) and I click 'ok' on the alert box, the asp page got reload and all the information on the form is gone. Please help.
Here is a function that get called when click save (or update button)

 function check_input()
	    {  
		   
		   if (ltrim(document.f1.ponumber.value==""))
		   {
		     alert ("P.O # is Required");
			 document.f1.ponumber.focus();
			 return false; 
		   }
		  		  		  		      
		   if (isNaN(ltrim(document.f1.invamount.value)))
		   {
		     alert ("Invalid Invoice Amount Entered. Please Enter an Integer.");
			 document.f1.invamount.focus();
			 return false; 
		   }   
		   else if (ltrim(document.f1.invamount.value)== 0 || (document.f1.invamount.value==""))
		   {
		     alert ("Invoice Amount must be Entered.");
			 document.f1.invamount.focus();
			 return false; 
		   }
	 		   
		   document.f1.flag.value = "1"		   
		   document.f1.submit();  		  
			  
		}

Here is some code in the form. All I changed was the code in red.

<table cellspacing="0" cellpadding="0" border="0" bgcolor="#edecd7">
<form action="mv_ap_detail.asp" method="post" name="f1"> 
 <input type="hidden" name="flag" value="<%=strflag%>">
 <input type="hidden" name="hdninvnumber" value="<%=strinvnumber%>">
.... some output and input fields ......
 <tr>  	 
	 			<td  width="125" align="right" class="ver10pxgry2"><B>Inv. Amount</b></td>
				<td ><img src="images/spacer.gif" width="5" height="1" border="0"></td>
				<td><input name="invamount" class="ver11pxblk" type="Text" size="10" value="<%=strinvamount%>"></td>					               				
	 	  	    <td  class="ver10pxgry2" align="right"><b>Due Date</b></td>
				<td ><img src="images/spacer.gif" width="5" height="1" border="0"></td>		
				<td><input name="duedate" class="ver11pxblk" type="Text" size="15"  value="<%=strduedate%>" onchange="check_date(this)"></td>			
			</tr>
			<tr><td><img src="images/spacer.gif" width="1" height="10" border="0"></td></tr>
		    <tr>  	 
	 			<td  width="125" align="right" class="ver10pxgry2"><B>Department#</b></td>
				<td ><img src="images/spacer.gif" width="5" height="1" border="0"></td>
				<td><input name="department" class="ver11pxblk" type="Text" size="6" maxlength="6" value="<%=strdepartment%>"></td>	
	 	  	    <td  class="ver10pxgry2" align="right"><b>P.O.#</b></td>
				<td ><img src="images/spacer.gif" width="5" height="1" border="0"></td>		
				<td><input name="ponumber" class="ver11pxblk" type="Text" size="20" maxlength="20" value="<%=strponumber%>"></td>			
			</tr>
 </table>
		<table  cellspacing="0" cellpadding="0" border="0" width="100%">
		<tr><td><img src="images/spacer.gif" width="1" height="30" border="0"></td></tr>
  	     <tr>
		  <td><img src="images/spacer.gif" width="430" height="1" border="0"></td>                   	  
       	  <td><img src="images/spacer.gif" width="20" height="1" border="0"></td>   
[COLOR=red]     		 
	 <td><input type="image" name="save" value="f1" src="images/btn_save_cream.gif" border="0"  onclick="check_input()"></td>
	    <!--  <td><input type="Button" name="update" value="update" class="ver12pxgrn" onclick="check_input()" ></td>-->[/color]	 
	     </tr>
	     <tr><td ><img src="images/spacer.gif" width="1" height="5" border="0"></td></tr>
       </table>

 

[theniteowl]

The problem is probably not the button itself but somewhere in the Javascript or in the value that populates the fields when you submit it to the ASP page.

If you get a javascript error during your validation the script halts and the form will continue to submit without having completed the validation. Then your ASP page may not be getting the values you intended it to.

Try commenting out the lines that submit the form in your javascript code then run the form and watch for any javascript errors. In IE they will show on the Status Bar in the lower left border of the window. In Firefox if you have the Javascript console installed you can get much better information about the javascript errors.

If it works without showing a javascript error then change the page to not submit to itself and setup a test.asp file to submit to that just reads in and response.write out form values to make sure everything is coming through the way you expect it to.
If that works then it could be a typo where you are having the ASP values populate the form fields.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[cat5ive]

Hi,

I think you misunderstood me, may be I wasn't clear.

When I click 'save', the asp page suppose to validate if the ponumber is not blank and invamount is not 0.
I intentionally left either of them blank when click save. Then I got the alert box pop up with the message saying you must enter the value. Up to here is working fine. Now when I click 'Ok' on the alert box, suppostedly the alert box should disappear and notthing else should happen to the asp page (except it should have cursor on either ponumber or invamount field). So I can proceed to input my ponumber or invamount. However, when I click 'ok' on the alert box, seem like the form got submit. So now it shows the same asp page with a blank form.
Again it was working fine with the input type="button". If I change back from input type="image" to "button", it works fine again.
I suspect that the way I use event handler is not correct. I'm very new in web site programming.

Thanks.

 

[theniteowl]

Any chance you no longer have your ltrim function on the page? That would cause an error after the popup message prior to the return false statement and result in exactly this situation.



It's hard to think outside the box when I'm trapped in a cubicle.

 

[theniteowl]

OK, after testing myself I was seeing the same problem you were.

Try modifying your onclick event to this:

onclick="[COLOR=red]return[/color] check_input();"

Not sure why it causes a problem with an image but not with a button type except perhaps that javascript has a wider range of tests for button and handles it better. Not sure.
But this seems to work for me.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[cat5ive]

Actually, I don't use ltrim on ponumber any more. The code should be like below. I forgot to remove it when I post it. Sorry about that. I did not have it before I change from button to image either.

if (document.f1.ponumber.value=="")
           {
             alert ("P.O # is Required");
             document.f1.ponumber.focus();
             return false; 
           }

The ltrim still on the page though. Code as below

 function ltrim(strIn)
   		{
   		 var strOut=""
		  if (!strIn)
			{}
		  else
			{
			 for (intI=0; intI < strIn.length; intI++)
			 {
			  if (strIn.charAt(intI) !=" ")
	   			{
	   			strOut = strIn.substring(intI)
	   			break 
	 			}
			}
   		   }
  		 return strOut
  		}

 

[cat5ive]

Thank you soooo much, theniteowl. After the change as you suggest it's working fine.

Thanks again.