Solved

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

Posted on 2004-10-12
18
292 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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)
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now