JavaScript onsubmit mit dem Internet Explorer

**engel90**

Hallo,
ich habe eine MySQl Datenbank voller Bücher und möchte dafür nun ein HTML-Forular schreiben mit welchem ich Bücher hinzufügen kann. Dabei überprüfe ich mittels JavaScript und dem Eventhandle "onsubmit", ob die pflichtfelder ausgefüllt wurden. Dies funktioniert auch wunderbar, jedoch nur im Mozilla Firefox. Wenn ich für den gleichen Code den Internet Explorer (Version 6) verwende werden zwar die Änderungen übernommen (Hintergrundfarbe des fehlenden Fledes ändern) jedoch wird das Formular dann trotzdem weggeschickt.

markieren

Code:

			<?xml version="1.0" encoding="ISO-8859-1" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

   <head>

      <title>Stefan Engelhardt - Kontakte</title>

      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

      <link rel="stylesheet" type="text/css" href="design.css" />

      <script src="validateform.js" type="text/javascript"></script>

   </head>

   <body>

      <h1>Buch hinzufügen</h1>

      <h3 class="hint">(Mit * gekennzeichnete Felder sind Pflichtfelder)</h3>

      <form action="addbook.php" method="post" name="bookdata" onsubmit="return ValidateForm1();">

         <table border="0" cellpadding="0" cellspacing="0">

            <tr>

               <td width="200">ISBN13:*</td>

               <td><input name="isbn13" type="text" size="20" maxlength="13"></td>

               <td>[img]help.jpg[/img]</td>

            </tr>

            <tr>

               <td>ISBN10:</td>

               <td><input name="isbn10" type="text" size="20" maxlength="10"></td>

               <td>[img]help.jpg[/img]</td>

            </tr>

            <tr>

               <td>Titel:*</td>

               <td><input name="title" type="text" size="50" maxlength="128"></td>

               <td />

            </tr>

            <tr>

               <td>Autor(en):</td>

               <td><input name="author" type="text" size="50" maxlength="128"></td>

               <td />

            </tr>

            <tr>

               <td>Verlag:</td>

               <td><input name="publisher" type="text" size="50" maxlength="128"></td>

               <td />

            </tr>

            <tr>

               <td>Jahr:</td>

               <td><input name="year" type="text" size="5" maxlength="4"></td>

               <td>[img]help.jpg[/img]</td>

            </tr>

            <tr>

               <td>Perönlicher Kommentar:</td>

               <td><input name="comment" type="text" size="50" maxlength="128"></td>

               <td>[img]help.jpg[/img]</td>

            </tr>

            <tr>

               <td />

               <td class="notification" id="MissingContentNotification"> </td>

               <td />

            </tr>

            <tr>

               <td />

               <td>

                  <input type="submit" value=" Datensatz hinzufügen ">

                  <input type="reset" value=" Felder zurücksetzen ">

               </td>

               <td />

            </tr>

         </table>

      </form>

   </body>

</html>

markieren

Code:

			function ValidateForm() {

  /* Alle Pflichtfelder auf Inhalt prüfen */

  if ((document.bookdata.isbn13.value == "") || (document.bookdata.title.value == ""))

  {

     /* Alle Pflichtfelder einzeln in umgekehrter Reihenfolge abarbeiten */

     if (document.bookdata.title.value == "")

     {

        /* Hintergrund des Feldes rot färben */

        document.bookdata.title.style.backgroundColor = "#f08080";

        /* Eingabefocus auf das Feld legen */

        document.bookdata.title.focus();

     }

    else

    {

       /* Hintergrund des Feldes zurücksetzen */

        document.bookdata.title.style.backgroundColor = "#ffffff";

    }

     if (document.bookdata.isbn13.value == "")

     {

        document.bookdata.isbn13.style.backgroundColor = "#f08080";

        document.bookdata.isbn13.focus();

     }

    else

    {

       /* Hintergrund des Feldes zurücksetzen */

        document.bookdata.isbn13.style.backgroundColor = "#ffffff";

    }

     /* Benachrichtigung über die fehlenden Elemente anzeigen */

     var notification = document.getElementById("MissingContentNotification");

     notification.firstChild.nodeValue = "Bitte füllen Sie alle Pflichtfelder aus.";

     /* Abschicken des Formulars verhindern */

     return false;

  }

  else

  {

     /* Feldhintergrund zurücksetzen */

     document.bookdata.title.style.backgroundColor = "#ffffff";

     document.bookdata.isbn13.style.backgroundColor = "#ffffff";

     /* Benachrichtigungsfeld zurücksetzen */

     var notification = document.getElementById("MissingContentNotification");

     notification.firstChild.nodeValue = " ";

     /* Formular absenden */

     return true;

  }

}

**mkinzler**

Führe mal das Skript direkt im Button aus

**engel90**

Zitat von mkinzler:

Führe mal das Skript direkt im Button aus

habe das script sowohl im onsubmit als auch im onclick handler ausprobiert, es funktioniert dann auch beim Firefox nicht mehr.

**omata**

markieren

Code:

			<form action="addbook.php" method="post" name="bookdata">

  :

  <input type="button" value=" Datensatz hinzufügen " onclick="ValidateForm();" />

  <input type="reset" value=" Felder zurücksetzen " />

  :

</form>

markieren

Code:

			function ValidateForm() {

  /* Alle Pflichtfelder auf Inhalt prüfen */

  if (   (document.bookdata.isbn13.value == "") 

      || (document.bookdata.title.value == "")) {

    :

    /* Abschicken des Formulars verhindern */

  }

  else {

    :

    :

    /* Formular absenden */

    document.bookdata.submit;

  }

}

**marabu**

Moin,

Zitat von engel90:

... Wenn ich für den gleichen Code den Internet Explorer (Version 6) verwende ...

wird denn wirklich der gleiche Code verwendet?

Im Beitrag #1 wird src="validateform.js" eingebunden, "return ValidateForm1();" aufgerufen, aber der Code für ValidateForm() gezeigt.

Grüße vom marabu

**engel90**

Zitat von omata:

markieren

Code:

			<form action="addbook.php" method="post" name="bookdata">

  :

  <input type="button" value=" Datensatz hinzufügen " onclick="ValidateForm();" />

  <input type="reset" value=" Felder zurücksetzen " />

  :

</form>

markieren

Code:

			function ValidateForm() {

  /* Alle Pflichtfelder auf Inhalt prüfen */

  if (   (document.bookdata.isbn13.value == "") 

      || (document.bookdata.title.value == "")) {

    :

    /* Abschicken des Formulars verhindern */

  }

  else {

    :

    :

    /* Formular absenden */

    document.bookdata.submit;

  }

}

hat funktioniert
danke schön

schade ist nur, dass das Absenden des Formulars jetzt nur noch mit aktiviertem JavaScript funktioniert

**omata**

Neuer Versuch...

markieren

Code:

			<form action="addbook.php" method="post" name="bookdata">

 :

 <script type="text/javascript">

  <!--

   document.write(

    '<input type="button" value=" Datensatz hinzufügen " onclick="ValidateForm();" />'

   );

  -->

 </script>

 <noscript>

  <div style="display:inline">

   <input type="submit" value=" Datensatz hinzufügen " />

  </div>

 </noscript>

 <input type="reset" value=" Felder zurücksetzen " />

 :

</form>

markieren

Code:

			function ValidateForm() {

  /* Alle Pflichtfelder auf Inhalt prüfen */

  if (   (document.bookdata.isbn13.value == "") 

      || (document.bookdata.title.value == "")) {

    :

    /* Abschicken des Formulars verhindern */

  }

  else {

    :

    :

    /* Formular absenden */

    document.bookdata.submit;

  }

}

**engel90**

Zitat von omata:

Neuer Versuch...

markieren

Code:

			<form action="addbook.php" method="post" name="bookdata">

 :

 <script type="text/javascript">

  <!--

   document.write(

    '<input type="button" value=" Datensatz hinzufügen " onclick="ValidateForm();" />'

   );

  -->

 </script>

 <noscript>

  <div style="display:inline">

   <input type="submit" value=" Datensatz hinzufügen " />

  </div>

 </noscript>

 <input type="reset" value=" Felder zurücksetzen " />

 :

</form>

markieren

Code:

			function ValidateForm() {

  /* Alle Pflichtfelder auf Inhalt prüfen */

  if (   (document.bookdata.isbn13.value == "") 

      || (document.bookdata.title.value == "")) {

    :

    /* Abschicken des Formulars verhindern */

  }

  else {

    :

    :

    /* Formular absenden */

    document.bookdata.submit;

  }

}

Danke

Ich wusste garnicht das man so mit Javascript arbeiten kann (ich bin neu in JavaScript)

JavaScript onsubmit mit dem Internet Explorer

JavaScript onsubmit mit dem Internet Explorer

Re: JavaScript onsubmit mit dem Internet Explorer

Re: JavaScript onsubmit mit dem Internet Explorer

Re: JavaScript onsubmit mit dem Internet Explorer

Re: JavaScript onsubmit mit dem Internet Explorer

Re: JavaScript onsubmit mit dem Internet Explorer

Re: JavaScript onsubmit mit dem Internet Explorer

Re: JavaScript onsubmit mit dem Internet Explorer

Forumregeln

mkinzler (Moderator) Registriert seit: 9. Dez 2005 Ort: Heilbronn 39.851 Beiträge Delphi 11 Alexandria	#2 Re: JavaScript onsubmit mit dem Internet Explorer 14. Jul 2008, 05:34 Führe mal das Skript direkt im Button aus Markus Kinzler
	Zitat

engel90 Registriert seit: 15. Jan 2007 Ort: Jena 38 Beiträge Delphi 7 Personal	#3 Re: JavaScript onsubmit mit dem Internet Explorer 14. Jul 2008, 10:11 Zitat von mkinzler: Führe mal das Skript direkt im Button aus habe das script sowohl im onsubmit als auch im onclick handler ausprobiert, es funktioniert dann auch beim Firefox nicht mehr.
	Zitat

marabu Registriert seit: 6. Apr 2005 10.109 Beiträge	#5 Re: JavaScript onsubmit mit dem Internet Explorer 15. Jul 2008, 05:38 Moin, Zitat von engel90: ... Wenn ich für den gleichen Code den Internet Explorer (Version 6) verwende ... wird denn wirklich der gleiche Code verwendet? Im Beitrag #1 wird src="validateform.js" eingebunden, "return ValidateForm1();" aufgerufen, aber der Code für ValidateForm() gezeigt. Grüße vom marabu
	Zitat