Delphi-PRAXiS - JavaScript onsubmit mit dem Internet Explorer

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - JavaScript onsubmit mit dem Internet Explorer (https://www.delphipraxis.net/117204-javascript-onsubmit-mit-dem-internet-explorer.html)

JavaScript onsubmit mit dem Internet Explorer

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.

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>

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;

  }

}

Re: JavaScript onsubmit mit dem Internet Explorer

Führe mal das Skript direkt im Button aus

Re: JavaScript onsubmit mit dem Internet Explorer

Zitat:

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.

Re: JavaScript onsubmit mit dem Internet Explorer

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>

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;

  }

}

Re: JavaScript onsubmit mit dem Internet Explorer

Moin,

Zitat:

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

Re: JavaScript onsubmit mit dem Internet Explorer

Zitat:

Zitat von omata

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>

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 :dp:

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

Re: JavaScript onsubmit mit dem Internet Explorer

Neuer Versuch...

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>

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;

  }

}

Re: JavaScript onsubmit mit dem Internet Explorer

Zitat:

Zitat von omata

Neuer Versuch...

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>

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 :-D

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

:dp: