Having trouble with javascript submit form method

[deeciple]

Hi All,

I have some code to check two text fields and submit a form if the fields match (it's to verify passwords). I don't know why but I am getting an "Object doesn't support this property or method" on the submit method. I tried it as shown below, as well as:

document.frmAddUser.submit();

Any help is always appreciated. Thanks in advance. here is my code:

<script type="text/javascript">
function verifyPass() {
var pass=document.getElementById("password").value;
var vpass=document.getElementById("verifyPassword").value;
  if (pass==vpass) {
    document.forms["frmAddUser"].submit();
  }else{
    alert("The passwords do not match.");
  }
}
</script>

 

[feherke]

Hi

Is frmAddUser the [tt]name[/tt] of your [tt]form[/tt] ? Is that the only [tt]form[/tt] with that [tt]name[/tt] ?

Post the HTML code of the [tt]form[/tt].

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[deeciple]

Hi feherke,

Thanks for your reply. Yes this is the name of the form and it's the only one on the page. If it helps, here is the code to the form:

	<form id="frmAddUser" name="frmAddUser" method="POST" action="<?php echo $editFormAction; ?>">
<span id="sprytextfield1">
<label for="userName">Email Address</label>
<br/>
<input type="text" name="userName" id="userName" tabindex="1" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span>
<p><br/>

<span id="sprytextfield2">
<label for="password">Password (12 characters)</label><br/>
<input name="password" type="password" id="password" tabindex="2" maxlength="12" />
<span class="textfieldRequiredMsg">A value is required.</span></span><p><br/>

<span id="sprytextfield3">
<label for="verifyPassword">Verify Password</label><br/>
<input name="verifyPassword" type="password" id="verifyPassword" tabindex="3" maxlength="12" />
<span class="textfieldRequiredMsg">A value is required.</span></span><p><br/>

        <label for="userLevel">Access Level</label><br/>
	    <select name="userLevel" id="userLevel" tabindex="3">
	      <option selected="Visitor">Visitor</option>
	      <option value="Member">Member</option>
	      <option value="Supervisor">Supervisor</option>
	      <option value="Administrator">Administrator</option>
        </select>
	  </p><br/>
      <fieldset><legend>Select the email alerts for the user to receive:</legend>
	  <table width="100%" border="0">
	    <tr>
	      <td><input type="checkbox" name="alertEquipment" id="alertEquipment" />
          <label for="alertEquipment">Equipment issues</label></td>
	      <td><input type="checkbox" name="alertMedia" id="alertMedia" />
          <label for="alertMedia">Media issues</label></td>
	      <td><input type="checkbox" name="alertPlaylist" id="alertPlaylist" />
          <label for="alertPlaylist">Playlist issues</label></td>
        </tr>
	    <tr>
	      <td><input type="checkbox" name="alertLog" id="alertLog" />
          <label for="alertLog">Log issues</label></td>
	      <td><input type="checkbox" name="alertSatellite" id="alertSatellite" />
          <label for="alertSatellite">Satellite issues</label></td>
	      <td><input type="checkbox" name="alertPromo" id="alertPromo" />
          <label for="alertPromo">Promo issues</label></td>
        </tr>
	    <tr>
	      <td><input type="checkbox" name="alertOperator" id="alertOperator" />
          <label for="alertOperator">Operator errors</label></td>
	      <td><input type="checkbox" name="alertProgram" id="alertProgram" />
          <label for="alertProgram">Program issues</label></td>
	      <td><input type="checkbox" name="alertAir" id="alertAir" />
          <label for="alertAir">Air affected issues</label></td>
        </tr>
      </table>
      </fieldset><br/>
	  <input type="button" name="submit" id="submit" value="Submit" onClick="verifyPass();" />
	  <br/>
	  <input type="hidden" name="MM_insert" value="frmAddUser" />
    </form>

 

[feherke]

Hi

That happens because you set the [tt]name[/tt] of your [tt]button[/tt] [tt]input[/tt] to "submit". There are ways to still call the [tt]form[/tt]'s [tt]submit()[/tt] method, but is easier, cleaner and safer to rename your [tt]button[/tt].

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[deeciple]

Thanks feherke,

It's working now.

Kind regards,

Ken

 

[deeciple]

Is there a difference between having a "submit" button type and using the submit() javascript method?

I am still having some trouble with the submit. When I used a regular "submit" button my form validation would keep the form from submitting or moving to another page if there was any invalid entry. With the javascript submit method, the vaidation still appears to be working but the page is navigated away from. I land on a page with some text stating that "X column cannot be blank".

Thanks,

Ken

 

[feherke]

Hi

Sorry, I do not really understand you. ( Just started my morning coffee, it does not made its effect yet. )

But one thing is sure : we not set the event handler on an [tt]input[/tt] when we want to handle the [tt]form[/tt]'s event.
[ul]
[li]Set the event handler on the [highlight #ffc][tt]form[/tt]'s [tt]onsubmit[/tt][/highlight].[/li]
[li][highlight #fcc][tt]return[/tt][/highlight] whatever the function returned.[/li]
[li]From the [highlight #ccf]function [tt]return[/tt][/highlight] [tt]true[/tt] if everything Ok, [tt]false[/tt] if submitting should be stopped.[/li]
[/ul]

[b]<form[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"frmAddUser"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"frmAddUser"[/i][/green] [maroon]method[/maroon][teal]=[/teal][green][i]"POST"[/i][/green] [maroon]action[/maroon][teal]=[/teal][green][i]"<?php echo $editFormAction; ?>"[/i][/green] [highlight #ffc][maroon]onsubmit[/maroon][teal]=[/teal][/highlight][green][i][highlight #ffc]"[/highlight][highlight #fcc]return[/highlight][highlight #ffc] verifyPass()"[/highlight][/i][/green][b]>[/b]

[gray]<!-- ... -->[/gray]

  [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"button"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Submit"[/i][/green] [b]/>[/b]
  [b]<br/>[/b]
  [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"hidden"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"MM_insert"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"frmAddUser"[/i][/green] [b]/>[/b]
[b]</form>[/b]

[b]function[/b] [COLOR=darkgoldenrod]verifyPass[/color][teal]()[/teal] [teal]{[/teal]
  [b]var[/b] pass[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]"password"[/i][/green][teal]).[/teal]value[teal];[/teal]
  [b]var[/b] vpass[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]"verifyPassword"[/i][/green][teal]).[/teal]value[teal];[/teal]
  [b]if[/b] [teal]([/teal]pass[teal]!=[/teal]vpass[teal])[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]"The passwords do not match."[/i][/green][teal]);[/teal]
  [teal]}[/teal]
  [highlight #ccf][b]return[/b] pass[teal]==[/teal]vpass[teal];[/teal][/highlight]
[teal]}[/teal]

Try this way first. Then if still have problems, will take a closer look.

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[vacunita]

Just to clarify,

using: [blue]<input[/blue] type=[green]'submit'[/green][blue]>[/blue]
is different from
using: [blue]<input[/blue] type=[green]'button'[/green][blue]>[/blue]

The first one will submit the form in all browsers no matter what, the second one will never submit the form.

Using the Javascript submit() method in the onclick event of each will have different results.

In your case if your button is an actual submit button, you'll need to explicitly stop the submission if the passwords don't match. That's what the return value of false in feherke's code does.

If you are using type=button, the form would never submit, and so the returning of a false value is not necessary since no submission will take place.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[feherke]

Hi

Thanks for mentioning that, Phil. Now I see I missed one important detail in the previously suggested modification : to change the [tt]input[/tt] [tt]type[/tt] to [highlight #cfc][tt]submit[/tt][/highlight] :

[b]<form[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"frmAddUser"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"frmAddUser"[/i][/green] [maroon]method[/maroon][teal]=[/teal][green][i]"POST"[/i][/green] [maroon]action[/maroon][teal]=[/teal][green][i]"<?php echo $editFormAction; ?>"[/i][/green] [maroon]onsubmit[/maroon][teal]=[/teal][green][i]"return verifyPass()"[/i][/green][b]>[/b]

[gray]<!-- ... -->[/gray]

  [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"[highlight #cfc]submit[/highlight]"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Submit"[/i][/green] [b]/>[/b]
  [b]<br/>[/b]
  [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"hidden"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"MM_insert"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"frmAddUser"[/i][/green] [b]/>[/b]
[b]</form>[/b]

Sorry. ( But at least I warned about my low caffeine level. )

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]