Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2004-10-12
18
Medium Priority
?
347 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
17 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 1000 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

782 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