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!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using an Image for validation & then submit 1

Status
Not open for further replies.
jasonray

jasonray

MIS
Apr 5, 2002
15
US
Hello,

I have a question about how to us an Image button to validate a form and then submit the data once the validation is successful. I seem to be able to make it work with a standard button, but I try the image it just blows right by the validation.

Any ideas?

Here is the code that I am using:
Code: 
<html>
<head>
<title>Validation</title>
<script language=&quot;javascript&quot; type=&quot;text/javascript&quot; >
<!-- Begin
  function Require(obForm,szFields)
    {
      var fields = szFields.split(&quot;,&quot;)
      var szMissing= new Array();
      for (x=0;x<fields.length;x++) {
        if (obForm.elements[fields[x]].value.length==0) {
           szMissing[szMissing.length]=new String(fields[x]);
        }
      }
      if (szMissing.length) {
        alert(&quot;The field&quot;+((szMissing.length>1)?&quot;s &quot;:&quot; &quot;)+szMissing.join(&quot;,&quot;)+&quot; must be filled in first&quot;);
        return false
      }
      return true;
    }
	
// end-->

</script>
</head>
<body onLoad=&quot;document.RefiOrderForm.ReferenceNumber.focus();&quot;> 
<form name=&quot;RefiOrderForm&quot;  method=&quot;post&quot; action=&quot;[URL unfurl="true"]http://www.msn.com&quot;[/URL] onSubmit=&quot;return Require(this,'ReferenceNumber')&quot;> 
  <table width=&quot;760&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> 
    <tr> 
      <td colspan=&quot;5&quot;></td> 
    </tr> 
    <tr> 
      <td width=&quot;141&quot; height=&quot;24&quot; class=&quot;Titles&quot;><span class=&quot;bullets&quot;>*</span>Reference Number:</td> 
      <td width=&quot;619&quot; colspan=&quot;4&quot; ><input tabindex=&quot;1&quot; name=&quot;ReferenceNumber&quot;  type=&quot;text&quot; class=&quot;formfills&quot; id=&quot;RefNumber&quot; size=&quot;60&quot; maxlength=&quot;60&quot;  ></td> 
    </tr> 
    <tr> 
      <td height=&quot;24&quot; class=&quot;Titles&quot;> </td> 
      <td colspan=&quot;4&quot; > </td> 
    </tr> 
  </table> 
  <table width=&quot;760&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> 
    <tr> 
      <td height=&quot;26&quot; colspan=&quot;6&quot; class=&quot;Headers&quot;>    Subject Property</td> 
    </tr> 
    <tr> 
      <td width=&quot;133&quot; height=&quot;26&quot; class=&quot;Titles&quot;><span class=&quot;bullets&quot;>*</span>Address:</td> 
      <td width=&quot;388&quot; ><input tabindex=&quot;11&quot; class=&quot;formfills&quot; name=&quot;SubjectAddress&quot; type=&quot;text&quot; id=&quot;SubjectAddress&quot; size=&quot;60&quot; maxlength=&quot;60&quot; ></td> 
      <td width=&quot;104&quot; class=&quot;Titles&quot;>Property Type:</td> 
      <td width=&quot;135&quot; colspan=&quot;3&quot;><select tabindex=&quot;17&quot; name=&quot;PropType&quot; class=&quot;formfills&quot; id=&quot;PropType&quot; > 
          <option value=&quot;UNKNOWN&quot; selected>Please Select One
          <option value=&quot;SFR&quot;>Single Family
          <option value=&quot;CONDO&quot;>Condo
          <option value=&quot;COMMERCIAL&quot;>Commercial
          <option value=&quot;INDUSTRIAL&quot;>Industrial
          <option value=&quot;VACANT&quot;>Vacant
          <option value=&quot;UNKNOWN&quot;>Unknown
        </select></td> 
    </tr> 
    <tr> 
      <td height=&quot;26&quot; class=&quot;Titles&quot;><span class=&quot;bullets&quot;>*</span>City,State,Zip:</td> 
      <td colspan=&quot;5&quot; ><input class=&quot;formfills&quot; tabindex=&quot;12&quot; name=&quot;SubjectCity&quot; type=&quot;text&quot; id=&quot;SubjectCity&quot; size=&quot;37&quot; maxlength=&quot;36&quot; > 
        <input class=&quot;formfills&quot; tabindex=&quot;13&quot; name=&quot;SubjectState&quot; type=&quot;text&quot; id=&quot;SubjectState&quot; size=&quot;4&quot; maxlength=&quot;2&quot; > 
        <input class=&quot;formfills&quot; tabindex=&quot;14&quot; name=&quot;SubjectZip&quot; type=&quot;text&quot; id=&quot;SubjectZip&quot; size=&quot;10&quot; maxlength=&quot;10&quot; > </td> 
    </tr> 
    <tr> 
      <td height=&quot;26&quot; class=&quot;Titles&quot;>County:</td> 
      <td colspan=&quot;5&quot; ><input name=&quot;SubjectPropCounty&quot; type=&quot;text&quot; class=&quot;formfills&quot; id=&quot;SubjectPropCounty&quot; tabindex=&quot;15&quot;  size=&quot;60&quot; maxlength=&quot;60&quot;></td> 
    </tr> 
    <tr> 
      <td height=&quot;26&quot; class=&quot;Titles&quot;>APN/Tax Parcel#(s):</td> 
      <td colspan=&quot;5&quot; ><input class=&quot;formfills&quot; tabindex=&quot;16&quot; name=&quot;Apn&quot; type=&quot;text&quot; id=&quot;Apn&quot; size=&quot;60&quot; maxlength=&quot;30&quot; ></td> 
    </tr> 
    <tr> 
      <td height=&quot;29&quot; colspan=&quot;6&quot;><hr color=&quot;#000000&quot; noshade size=&quot;3&quot;></td> 
    </tr> 
  </table> 
  <table width=&quot;760&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> 
    <tr> 
      <td height=&quot;25&quot; colspan=&quot;6&quot; class=&quot;Headers&quot;>    Borrower Information</td> 
    </tr> 
    <tr> 
      <td width=&quot;133&quot; height=&quot;25&quot; class=&quot;Titles&quot;><span class=&quot;bullets&quot;>*</span>Borrower Name:</td> 
      <td colspan=&quot;5&quot;><input tabindex=&quot;17&quot; name=&quot;BorrowerName&quot; type=&quot;text&quot; class=&quot;formfills&quot; id=&quot;BorrowerName&quot; size=&quot;60&quot; maxlength=&quot;60&quot; ></td> 
    </tr> 
    <tr> 
      <td height=&quot;25&quot; class=&quot;Titles&quot;>Work Phone:</td> 
      <td width=&quot;118&quot;><input tabindex=&quot;18&quot; name=&quot;BorrowerWorkPhone&quot; type=&quot;text&quot; class=&quot;formfills&quot; id=&quot;BorrowerWorkPhone&quot; size=&quot;17&quot; maxlength=&quot;17&quot;  ></td> 
      <td width=&quot;119&quot; class=&quot;Titles&quot;>Social Security:</td> 
      <td width=&quot;390&quot; colspan=&quot;3&quot;><input tabindex=&quot;19&quot; name=&quot;BorrowerSS&quot; type=&quot;text&quot; class=&quot;formfills&quot; id=&quot;BorrowerSS&quot; size=&quot;20&quot; maxlength=&quot;20&quot; ></td> 
    </tr> 
    <tr> 
      <td height=&quot;25&quot; class=&quot;Titles&quot;>Co-Borrower Name:</td> 
      <td colspan=&quot;5&quot;><input tabindex=&quot;20&quot; name=&quot;CoBorrowerName&quot; type=&quot;text&quot; class=&quot;formfills&quot; id=&quot;CoBorrowerName&quot; size=&quot;60&quot; maxlength=&quot;60&quot; ></td> 
    </tr> 
    <tr> 
      <td height=&quot;25&quot; class=&quot;Titles&quot;>Work Phone:</td> 
      <td><input tabindex=&quot;21&quot; name=&quot;CoBorrowerWorkPhone&quot; type=&quot;text&quot; class=&quot;formfills&quot; id=&quot;CoBorrowerWorkPhone&quot; size=&quot;17&quot; maxlength=&quot;17&quot;  ></td> 
      <td class=&quot;Titles&quot;>Social Security:</td> 
      <td colspan=&quot;3&quot;><input tabindex=&quot;22&quot; name=&quot;CoBorrowerSS&quot; type=&quot;text&quot; class=&quot;formfills&quot; id=&quot;CoBorrowerSS&quot; size=&quot;20&quot; maxlength=&quot;20&quot; ></td> 
    </tr> 
  </table> 
  <table width=&quot;760&quot; height=&quot;90&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> 
    <tr align=&quot;center&quot;> 
      <td width=&quot;721&quot; ><input name=&quot;&quot; type=&quot;submit&quot;> 
     <a href=&quot;javascript:document.RefiOrderForm.submit()&quot; onClick=&quot;&quot;><img src=&quot;../images/SubmitOrderButton.gif&quot; border=&quot;0&quot; alt=&quot;Submit Order&quot;></a> 
        </td> 
    </tr> 
  </table> 
</form> 
</body>
</html>
 
Sort by date Sort by votes
If you change your a href to:

Code: 
<a href=&quot;javascript:if(Require(document.forms['RefiOrderForm'],'ReferenceNumber'))document.RefiOrderForm.submit();&quot;>

All will work again.

Calling the submit mehtod bypasses the onSubmit event.

Hope this helps!

Dan
 
Upvote 0 Downvote
I have one more question. Now that I the validation code working with the rest of my page, I need to send the &quot;missing fields&quot; to another HTML page (Popup Window) instead of an alert so I can format the text. How would you do that?


Code: 
<script language=&quot;javascript&quot; type=&quot;text/javascript&quot; >
<!-- Begin
  function Require(obForm,szFields)
    {
      var fields = szFields.split(&quot;,&quot;)
      var szMissing= new Array();
      for (x=0;x<fields.length;x++) {
        if (obForm.elements[fields[x]].value.length==0) {
           szMissing[szMissing.length]=new String(fields[x]);
        }
      }
      if (szMissing.length) {
        alert(&quot;The field&quot;+((szMissing.length>1)?&quot;s &quot;:\n\n&quot; &quot;)+szMissing.join(&quot;\n\n&quot;)+&quot; must be filled in first&quot;);
        return false
      }
      return true;
    }
    
// end-->
 
Upvote 0 Downvote
Ok, I found out that I can us the showModalDialog, but I am not able to find out how to Show the missing fields on the Modal Dialog.

Basiclly this is what I have on my main form:
Code: 
function Requirez(obForm,szFields)
    {
      var fields = szFields.split(&quot;,&quot;)
      var szMissing= new Array();
      for (x=0;x<fields.length;x++) {
        if (obForm.elements[fields[x]].value.length==0) {
           szMissing[szMissing.length]=new String(fields[x]);
        }
      }
      if (szMissing.length) {
	var validationz = szMissing.join

	  window.showModalDialog(&quot;ValidationResults.html&quot;,,&quot;dialogHeight: 150px; dialogWidth: 200px; dialogTop: 300px; dialogLeft: 300px; edge: Sunken; center: Yes; help: No; resizable: Yes; status: No;&quot;);
        return false
      }
      return true;
    }

This is the original Alert code that has the Missing field information which needs to be passed.
Code: 
//alert(&quot;The field&quot;+((szMissing.length>1)?&quot;s:\n\n&quot;:&quot; &quot;)+ szMissing.join(&quot;\n\n&quot;) +&quot; \n\nmust be filled in first&quot;);
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
715
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
696
TheLazyPig
TheLazyPig
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
451
gmmastros
gmmastros
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
751
198709km
198709km
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top