Link to home
Start Free TrialLog in
Avatar of php-webdesign
php-webdesign

asked on

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

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">
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

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()">

Avatar of php-webdesign
php-webdesign

ASKER

ooh damn.. i mean type="image"... but i can try this solution :-)
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()">

For <input type=image> you need no script. The onSubmit is handled correct in the form tag.
how do i do the cancel then with type=image?
The onSubmit event handler does the submission cancel also for image buttons, not only for submit buttons.
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.

I can post the page.. what way you want it?

HTML or the PHP code?

(the page is dynamicly generated)
If no db, then php.
If some db access, then generated html from browser.
It works correct. Where do you get problems?
I tested in IE6.0 and Mozilla1.7
yeah it works.... but i want

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

to also be an image...
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)">


The script change was not really neccessary, but it was suspecious to me :)

ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
hi, try this
<style>
 .imgBtn{background:url('test.gif')}
</style>

<input type="reset" value="reset" class="imgBtn" name="reset">
Good idea, but bad naming. names like the form methods should be avoided. reset() is a form method.
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>