Solved

input type="submit" to type="button"

Posted on 2004-10-12
18
322 Views
Last Modified: 2013-12-03
I have got a problem with setting the inupt type submit to input type button (if you know what i mean)...

I can set it to button, but then the 2 javascript checks are not executed while submitting. Anybody got an idea?

I have the following Javascript:

<script type="text/javascript">
function ValidateForm(theForm){
      var relatie=document.theForm.relatie
      var url=document.theForm.url
      var provider=document.theForm.provider
      var      elem=document.theForm.elements
      if ((relatie.value==null)||(relatie.value=="")){
            alert("Fill in the relation")
            relatie.focus()
            return false;
      }      
      if ((url.value==null)||(url.value=="")){
            alert("Fill in the URL")
            url.focus()
            return false;
      }      
      if ((provider.value==null)||(provider.value=="")){
            alert("Fill in the provider")
            provider.focus()
            return false;
      }
      for(var i=0;i<elem.length;i++){
            if((elem[i].name.indexOf("opmerking")==0 &&
                  elem[i].value>"") ||
                  (elem[i].name.indexOf("hostname")==0 &&
                  elem[i].value>"") ||
                  (elem[i].name.indexOf("usercode")==0 &&
                  elem[i].value>"") ||
                  (elem[i].name.indexOf("password")==0 &&
                  elem[i].value>"")){
                  var fNum=elem[i].name.replace(/\D/g,"")
                  var waarde="niet_ingevuld"
                  if((document.theForm["hostname"+fNum].value=="") || (document.theForm["usercode"+fNum].value=="") || (document.theForm["password"+fNum].value=="")){
                        if(waarde=="filled_in"){
                              waarde="filled_in"
                        }
                        else {
                              waarde="not_filled_in"
                        }
                  }
                  else {
                        waarde="filled_in"
                  }
            }
      }
      if(waarde=="filled_in"){
            return true;
      } else {
            alert("There must be at least one row filled in")
            return false;
      }      
}      

function checkForm(theForm){
  elem = theForm.elements;
  for(var i=0;i<elem.length;i++){
    if((elem[i].name.indexOf("opmerking")==0 &&
       elem[i].value>"") ||
         (elem[i].name.indexOf("hostname")==0 &&
       elem[i].value>"") ||
         (elem[i].name.indexOf("usercode")==0 &&
       elem[i].value>"") ||
         (elem[i].name.indexOf("password")==0 &&
       elem[i].value>"")){
      fNum = elem[i].name.replace(/\D/g,"");
      if(theForm["hostname"+fNum].value==""||
         theForm["usercode"+fNum].value==""||
         theForm["password"+fNum].value==""){
           if(theForm["hostname"+fNum].value==""){
               alert('The field hostname is not filled in');
                   var hostname=document.theForm["hostname"+fNum]
                   hostname.focus()
         return false;
             }
           if(theForm["usercode"+fNum].value==""){
               alert('The field usercode is not filled in');
                   var usercode=document.theForm["usercode"+fNum]
                   usercode.focus()
         return false;
             }
           if(theForm["password"+fNum].value==""){
               alert('The field password is not filled in');
                   var password=document.theForm["password"+fNum]
                   password.focus()
         return false;
             }
         return false;
      }
      }
  }
  return ValidateForm();
}
</script>

And the following form:

<form action="toevoegen.php" name="theForm" method="post" onSubmit="return checkForm(this)">
//here the elements
<input type="submit" value="Save" name="Save">
<input type="reset" name="Cancel" value="Cancel">
0
Comment
Question by:php-webdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 5
18 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285015
There is no reason why you had to change the type from submit to button.
But if you really have to, then try this:

<input type="button" value="Save" name="Save" onClick="if(checkForm(this.form)) this.form.submit()">

0
 
LVL 5

Author Comment

by:php-webdesign
ID: 12285027
ooh damn.. i mean type="image"... but i can try this solution :-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285034
And if you do not know the form submit check script name, then you could even do this:

<input type="button" value="Save" name="Save" onClick="if(this.form.onsubmit()) this.form.submit()">

0
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 63

Expert Comment

by:Zvonko
ID: 12285051
For <input type=image> you need no script. The onSubmit is handled correct in the form tag.
0
 
LVL 5

Author Comment

by:php-webdesign
ID: 12285059
how do i do the cancel then with type=image?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285068
The onSubmit event handler does the submission cancel also for image buttons, not only for submit buttons.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285085
You did not post the complette page source so I cannot test it.
But I would avoid naming parameter variables and page elements with the same name.
You used the name theForm as parameter and as form name.

0
 
LVL 5

Author Comment

by:php-webdesign
ID: 12285123
I can post the page.. what way you want it?

HTML or the PHP code?

(the page is dynamicly generated)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285153
If no db, then php.
If some db access, then generated html from browser.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285207
It works correct. Where do you get problems?
I tested in IE6.0 and Mozilla1.7
0
 
LVL 5

Author Comment

by:php-webdesign
ID: 12285226
yeah it works.... but i want

<td><input type="reset" value="reset" name="reset"></td>

to also be an image...
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285247
Here the reset image:

  <td><img src="img/opslaan.gif" onClick="myForm.reset()"></td>

And the script with the renamed form tag:


<html>
<head>
<title>Toevoegen</title>
<link rel="stylesheet" type="text/css" href="inlogstyle.css" />
<script type="text/javascript">
function ValidateForm(theForm){
     var relatie=theForm.relatie
     var url=theForm.url
     var provider=theForm.provider
     var     elem=theForm.elements
     if ((relatie.value==null)||(relatie.value=="")){
          alert("Vul de relatie in")
          relatie.focus()
          return false;
     }    
     if ((url.value==null)||(url.value=="")){
          alert("Vul de url in")
          url.focus()
          return false;
     }    
     if ((provider.value==null)||(provider.value=="")){
          alert("Vul de provider in")
          provider.focus()
          return false;
     }
     for(var i=0;i<elem.length;i++){
          if((elem[i].name.indexOf("opmerking")==0 &&
               elem[i].value>"") ||
               (elem[i].name.indexOf("hostname")==0 &&
               elem[i].value>"") ||
               (elem[i].name.indexOf("usercode")==0 &&
               elem[i].value>"") ||
               (elem[i].name.indexOf("password")==0 &&
               elem[i].value>"")){
               var fNum=elem[i].name.replace(/\D/g,"")
               var waarde="niet_ingevuld"
               if((theForm["hostname"+fNum].value=="") || (theForm["usercode"+fNum].value=="") ||

(theForm["password"+fNum].value=="")){
                    if(waarde=="ingevuld"){
                         waarde="ingevuld"
                    }
                    else {
                         waarde="niet_ingevuld"
                    }
               }
               else {
                    waarde="ingevuld"
               }
          }
     }
     if(waarde=="ingevuld"){
          return true;
     } else {
          alert("Er moet minimaal 1 rij van gegevens ingevuld worden")
          return false;
     }    
}    

function checkForm(theForm){
  elem = theForm.elements;
  for(var i=0;i<elem.length;i++){
    if((elem[i].name.indexOf("opmerking")==0 &&
       elem[i].value>"") ||
        (elem[i].name.indexOf("hostname")==0 &&
       elem[i].value>"") ||
        (elem[i].name.indexOf("usercode")==0 &&
       elem[i].value>"") ||
        (elem[i].name.indexOf("password")==0 &&
       elem[i].value>"")){
      fNum = elem[i].name.replace(/\D/g,"");
      if(theForm["hostname"+fNum].value==""||
         theForm["usercode"+fNum].value==""||
         theForm["password"+fNum].value==""){
          if(theForm["hostname"+fNum].value==""){
              alert('Het veld hostname is niet ingevuld');
                var hostname=theForm["hostname"+fNum]
                hostname.focus()
         return false;
           }
          if(theForm["usercode"+fNum].value==""){
              alert('Het veld username is niet ingevuld');
                var usercode=theForm["usercode"+fNum]
                usercode.focus()
         return false;
           }
          if(theForm["password"+fNum].value==""){
              alert('Het veld password is niet ingevuld');
                var password=theForm["password"+fNum]
                password.focus()
         return false;
           }
         return false;
      }
     }
  }
  return ValidateForm(theForm);
}
</script>
</head>
<body>
<form action="toevoegen.php" name="myForm" method="post" onSubmit="return checkForm(this)">


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285253
The script change was not really neccessary, but it was suspecious to me :)

0
 
LVL 63

Accepted Solution

by:
Zvonko earned 250 total points
ID: 12285257
Sorry, it worked in test, but correct path to the form object is this:

  <td><img src="img/reset.gif" onClick="document.myForm.reset()"></td>

0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12285271
hi, try this
<style>
 .imgBtn{background:url('test.gif')}
</style>

<input type="reset" value="reset" class="imgBtn" name="reset">
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12285295
Good idea, but bad naming. names like the form methods should be avoided. reset() is a form method.
0
 
LVL 5

Author Comment

by:php-webdesign
ID: 12286171
Bacause i did something wrong with the previuos post... here the HTML again, previous post has been deleted. No need te reply to this question.

<html>
<head>
<title>Toevoegen</title>
<link rel="stylesheet" type="text/css" href="inlogstyle.css" />
<script type="text/javascript">
function ValidateForm(theForm){
     var relatie=document.theForm.relatie
     var url=document.theForm.url
     var provider=document.theForm.provider
     var     elem=document.theForm.elements
     if ((relatie.value==null)||(relatie.value=="")){
          alert("Vul de relatie in")
          relatie.focus()
          return false;
     }    
     if ((url.value==null)||(url.value=="")){
          alert("Vul de url in")
          url.focus()
          return false;
     }    
     if ((provider.value==null)||(provider.value=="")){
          alert("Vul de provider in")
          provider.focus()
          return false;
     }
     for(var i=0;i<elem.length;i++){
          if((elem[i].name.indexOf("opmerking")==0 &&
               elem[i].value>"") ||
               (elem[i].name.indexOf("hostname")==0 &&
               elem[i].value>"") ||
               (elem[i].name.indexOf("usercode")==0 &&
               elem[i].value>"") ||
               (elem[i].name.indexOf("password")==0 &&
               elem[i].value>"")){
               var fNum=elem[i].name.replace(/\D/g,"")
               var waarde="niet_ingevuld"
               if((document.theForm["hostname"+fNum].value=="") || (document.theForm["usercode"+fNum].value=="") || (document.theForm["password"+fNum].value=="")){
                    if(waarde=="ingevuld"){
                         waarde="ingevuld"
                    }
                    else {
                         waarde="niet_ingevuld"
                    }
               }
               else {
                    waarde="ingevuld"
               }
          }
     }
     if(waarde=="ingevuld"){
          return true;
     } else {
          alert("Er moet minimaal 1 rij van gegevens ingevuld worden")
          return false;
     }    
}    

function checkForm(theForm){
  elem = theForm.elements;
  for(var i=0;i<elem.length;i++){
    if((elem[i].name.indexOf("opmerking")==0 &&
       elem[i].value>"") ||
        (elem[i].name.indexOf("hostname")==0 &&
       elem[i].value>"") ||
        (elem[i].name.indexOf("usercode")==0 &&
       elem[i].value>"") ||
        (elem[i].name.indexOf("password")==0 &&
       elem[i].value>"")){
      fNum = elem[i].name.replace(/\D/g,"");
      if(theForm["hostname"+fNum].value==""||
         theForm["usercode"+fNum].value==""||
         theForm["password"+fNum].value==""){
          if(theForm["hostname"+fNum].value==""){
              alert('Het veld hostname is niet ingevuld');
                var hostname=document.theForm["hostname"+fNum]
                hostname.focus()
         return false;
           }
          if(theForm["usercode"+fNum].value==""){
              alert('Het veld username is niet ingevuld');
                var usercode=document.theForm["usercode"+fNum]
                usercode.focus()
         return false;
           }
          if(theForm["password"+fNum].value==""){
              alert('Het veld password is niet ingevuld');
                var password=document.theForm["password"+fNum]
                password.focus()
         return false;
           }
         return false;
      }
     }
  }
  return ValidateForm();
}
</script>
</head>
<body>
<form action="toevoegen.php" name="theForm" method="post" onSubmit="return checkForm(this)">
<table align="center" width="95%" cellspacing="0" cellpadding="0" border="0">
<tr>
     <td>Selecteer de relatie:</td>
     <td></td>

     <td><select name="relatie">
     <option value="" SELECTED>Kies Relatie</option>
     <option value="2">1PointAdvise</option>
          <option value="221">test</option>
     </select><br></td>

</tr>
<tr>
     <td>URL:</td>
     <td></td>
     <td><input type="text" name="url" size="40"/><br></td>
</tr>
<tr>
     <td>Provider:</td>
     <td></td>
     <td><input type="text" name="provider" size="40" /></td>

</tr>
<tr>
     <td>Opmerking:</td>
     <td></td>
     <td><textarea rows="2" name="alg_opmerking" cols="37"></textarea></td>
</tr>
</table>
<br>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="95%">
<tr>
  <td class="tabelkop"></td>
  <td class="tabelkop">&nbsp;&nbsp;Hostname</td>

  <td class="tabelkop">&nbsp;&nbsp;Usercode</td>
  <td class="tabelkop">&nbsp;&nbsp;Password</td>
  <td class="tabelkop">&nbsp;&nbsp;Opmerking</td>
</tr>
<tr>
  <td nowrap="nowrap"><strong>ftp</strong></td>
  <td><input name="hostname1" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="usercode1" value="" type="text">&nbsp;&nbsp;</td>

  <td><input name="password1" value="" type="text">&nbsp;&nbsp;</td>
  <input type="hidden" name="inlogtype_id1" value="1" />
  <td><textarea rows="2" name="opmerking1"></textarea>&nbsp;&nbsp;</td>
</tr>
<tr>
  <td nowrap="nowrap"><strong>telnet</strong></td>
  <td><input name="hostname2" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="usercode2" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="password2" value="" type="text">&nbsp;&nbsp;</td>

  <input type="hidden" name="inlogtype_id2" value="2" />
  <td><textarea rows="2" name="opmerking2"></textarea>&nbsp;&nbsp;</td>
</tr>
<tr>
  <td nowrap="nowrap"><strong>ftp en telnet</strong></td>
  <td><input name="hostname3" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="usercode3" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="password3" value="" type="text">&nbsp;&nbsp;</td>
  <input type="hidden" name="inlogtype_id3" value="3" />

  <td><textarea rows="2" name="opmerking3"></textarea>&nbsp;&nbsp;</td>
</tr>
<tr>
  <td nowrap="nowrap"><strong>database</strong></td>
  <td><input name="hostname4" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="usercode4" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="password4" value="" type="text">&nbsp;&nbsp;</td>
  <input type="hidden" name="inlogtype_id4" value="4" />
  <td><textarea rows="2" name="opmerking4"></textarea>&nbsp;&nbsp;</td>

</tr>
<tr>
  <td nowrap="nowrap"><strong>onderhoud</strong></td>
  <td><input name="hostname5" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="usercode5" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="password5" value="" type="text">&nbsp;&nbsp;</td>
  <input type="hidden" name="inlogtype_id5" value="5" />
  <td><textarea rows="2" name="opmerking5"></textarea>&nbsp;&nbsp;</td>
</tr>
<tr>

  <td nowrap="nowrap"><strong>testomgeving</strong></td>
  <td><input name="hostname6" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="usercode6" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="password6" value="" type="text">&nbsp;&nbsp;</td>
  <input type="hidden" name="inlogtype_id6" value="6" />
  <td><textarea rows="2" name="opmerking6"></textarea>&nbsp;&nbsp;</td>
</tr>
<tr>
  <td nowrap="nowrap"><strong>database onderhoud</strong></td>

  <td><input name="hostname7" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="usercode7" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="password7" value="" type="text">&nbsp;&nbsp;</td>
  <input type="hidden" name="inlogtype_id7" value="7" />
  <td><textarea rows="2" name="opmerking7"></textarea>&nbsp;&nbsp;</td>
</tr>
<tr>
  <td nowrap="nowrap"><strong>statistieken</strong></td>
  <td><input name="hostname8" value="" type="text">&nbsp;&nbsp;</td>

  <td><input name="usercode8" value="" type="text">&nbsp;&nbsp;</td>
  <td><input name="password8" value="" type="text">&nbsp;&nbsp;</td>
  <input type="hidden" name="inlogtype_id8" value="8" />
  <td><textarea rows="2" name="opmerking8"></textarea>&nbsp;&nbsp;</td>
</tr>
</tr>
<tr>
  <td></td>
  <td>&nbsp;&nbsp;</td>
  <td><input type="image" src="img/opslaan.gif" value="Save" name="Save"></td>

  <td><input type="reset" value="reset" name="reset"></td>
  <td></td>
  <td>&nbsp;&nbsp;</td>
</tr>
</form>
</body>
</html>
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How do I add counter to html listbox using jquery 2 44
Boolean 13 51
Convert complicated date to yyyy-mm-dd format 22 53
Dropdown animation to normal dropdown 6 28
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question