Solved

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

Posted on 2004-10-12
18
314 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
  • 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

828 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