Dynamisch erstellte Form-Felder mit JS auf Inhalt prüfen

Brus-xy

Brus-xy

Mitglied
Hallo Leute, ich als blutiger JS Anfänger brauch eure Hilfe. Habe schon die Suche bemüht, leider auf mein konkretes Beispiel keine Antowrt, bzw. Lösung gefunden.

Habe hier Form-Text-Felder die mit diesem Script dynamisch erzeugt werden:

Code: 
script type="text/JavaScript">
var counter = 1;
var limit = 20;
function addInput(divName){
   
   if (counter == limit)  {
          alert("Maximale Anzahl an Eingabefelder erreicht");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<br><ul class='pageitem'><li class='bigfield'><input type='text' placeholder='Artikel' name='artikel[]'></li><li class='bigfield'><input type='text'  placeholder='Preis' name='betrag[]'></li></ul>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>


Der Inhalt dieser Felder (hier im Beispiel erstmal nur das artikel Feld) soll auf Inhalt geprüft werden. Es sollen keine Leeren Felder übertragen werden sondern eine Warnung angezeigt werden und das Senden soll abgebbrochen werden. Die eingegeben Daten sollen nicht verloren gehen (komm ich da um ein Affenscript herum!?)

Leider scheitere ich schon beim einfachen Zugriff auf das Array.

Code: 
<script type="text/JavaScript">
    function pruefen()
{



var test = document.form1.getElementsByName('artikel[]');

if (test[0]==""){

alert("Bitte Formular vollst&auml;ndig ausf&uuml;llen!");

}

}
</script>
 
Du vergleichst in der if-Abfrage ein DOM Element mit einem Leerstring. Du willst aber doch den Inhalt prüfen.

Javascript: 
function pruefen() { 
    var test = document.form1.getElementsByName('artikel[]');
 
    for(var i = 0; i < test.length; i++) {
        if(test[i].value === '') {
            alert("Bitte Formular vollst&auml;ndig ausf&uuml;llen!");
            return false;
        }
    }

    return true;
}
 
Zeig doch mal ein Beispiel Dokument (HTML + JavaScript).
Und die drei Gleichheitszeichen waren bewusst gewählt ;-)
 
CPoly hat gesagt.:
Und die drei Gleichheitszeichen waren bewusst gewählt ;-)
Zum Vergrößern anklicken....
Ohhh. :(

Hier meine Datei, vielen Dank für die Mühe!!

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
	<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
	<script src="javascript/functions.js" type="text/javascript"></script>

	<link href="css/style.css" type="text/css" rel="stylesheet" />
	<link rel="apple-touch-icon" href="homescreen.png"/>
	<link href="startup.png" rel="apple-touch-startup-image" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	</head>
	
	<body>
	<div id="topbar" class="black">
  	<div id="title">Kasse</div>
	</div>
	<div id="duobutton"><div class="links"><a id="pressed" href="dyn.php">Eintragen</a><a href="overview.php">&Uuml;bersicht</a></div></div>
	<?php include 'init.php';?>
	<div id="content">
	
	<script type="text/JavaScript">
	function pruefen(){

        var test = document.form1.getElementsByName('artikel[]');
 
    	for(var i = 0; i < test.length; i++) {
        	if(test[i].value === '') {
            	alert("Bitte Formular vollst&auml;ndig ausf&uuml;llen!");
            	return false;
        	}
    	}
 
    return true;
	}
	</script>
	
	
	<form name="form1" action="insert.php" method="post" onsubmit="return pruefen()">

	<ul class="pageitem"><li class="button">
        <input name="submit" type="submit" value="Speichern" />
	</li>
	</ul>
	<br><br>
	<span class="graytitle">Name</span>

	<ul class="pageitem"><li class="select">
   	
         <select name="name">
         <option value="P1">P1</option>
         <option value="P2">P2</option>
         <option value="P3">P3</option>
         <option value="P4">P4</option>
   	</select>
   	<span class="arrow"></span>
  	</li>
	</ul>
        <p>
	
	<script type="text/JavaScript">
	var counter = 1;
	var limit = 7;
	function addInput(divName){
    	if (counter == limit)  {
          alert("Maximale Anzahl an Eingabefelder erreicht");
    	}
     	else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<br><ul class='pageitem'><li class='bigfield'><input type='text' placeholder='Artikel' name='artikel[]'></li><li class='bigfield'><input type='text'  placeholder='Preis' name='betrag[]'></li></ul>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     	}
	}
	</script>
	<div id="dynamicInput">
	<br><ul class='pageitem'><li class='bigfield'><input type='text' placeholder='Artikel'  name='artikel[]'></li><li class='bigfield'><input type='text'  placeholder='Preis' name='betrag[]'></li></ul>
	</div>
	<ul class="pageitem"><li class="button">
	<input type="button" value="Feld hinzuf&uuml;gen" onClick="addInput('dynamicInput');">
	</li>
	</ul>
	</br>
	<ul class="pageitem"><li class="button">
        <input name="submit" type="submit" value="Speichern" />
  	</li>
	</ul>
	</form>
	</div>
		
	</body>
</html>
 
Hab den Fehler schnell gefunden. Die Fehlerkonsole sagt:

Error: document.form1.getElementsByName is not a function
Line: 23
Zum Vergrößern anklicken....

"getElementsByName" gibt es nur beim document-Element.
Also musst du nur die Zeile ändern.

Javascript: 
//vorher
var test = document.form1.getElementsByName('artikel[]');

//nachher
var test = document.getElementsByName('artikel[]');

Und falls du neben Artikel auch Betrag ausgefüllt haben musst, dann z.B. diese Zeile

Javascript: 
var test = Array.prototype.concat.call(Array.prototype.slice.call(document.getElementsByName('artikel[]')), Array.prototype.slice.call(document.getElementsByName('betrag[]')));
 
Erstmal vielen Dank. Es funktioniert teilweise.

Im Endeffekt sollen natürlkich schon beide (Artikel und Betrag) geprüft werden.
Aber leider werden aktuell nur die beiden Felder gechecked die schon vorhanden sind. Alle die durch das JS function addInput erzeugt werden, werden nicht berücksichtigt. Habe jetzt nicht ganz verstanden wie ich bei deiner Methode Zugriff auf die einzelnen Array Felder habe, daher mein Ansatz:

HTML: 
function pruefen(){

    var artikel = document.getElementsByName('artikel[]');
    var betrag =  document.getElementsByName('betrag[]');
 
    	for(var i = 0; i < betrag.length; i++) {
        	if (((artikel[i].value === '') && !(betrag[i].value === '')) || (!(artikel[i].value === '') && (betrag[i].value === '')) || isNaN( betrag[i].value)) {
			alert(unescape("Bitte Formular vollst%E4ndig und korrekt Ausf%FCllen"));
            	return false;            
                }	
		
               else{return true;}			
	}
}

Funktioniert für die beiden ersten Felder, aber eben nicht für alle dynamisch erzeugten Felde... :(
 
Also bei mir funktioniert das Einwandfrei. Zeig mal ein gesamtes Dokument samt JavaScript und beschreibe, wie du das Fehlverhalten herbeiführst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück