Beiträge von flo96

flo96 · 28. März 2015

Wie übergebe ich nun die js-sachen an php?

flo96 · 28. März 2015

DANKE!!!

flo96 · 24. März 2015

Also ich hab da mal soweit etwas...
Ich hab jetzt die Frage wie ich dann eine Meldung ausgebe am ende, dass das Absenden des Formulars erfolgreich war und wie ich dann eine Mail an mich senden lasse, dass da jemand mitgemacht hat...
Dazu kommt die auswertung... wie mache ich das dann? Kann ich eigentlich eine Datei mit der Endung .sql auf den server legen, die eine Datenbank beschreibt?
Und sind irgendwo vielleicht irgendwelche Fehler?

HTML

<section id="umfrage">

				<!--Inhalt-->
				In kürze wird eine Umfrage bereit stehen.
				<br>
				<!-- multistep form -->
				<form class="msform" method="post">
					<!-- progressbar -->
					<ul class="progressbar">
						<li class="active">Was bedeutet für dich Heimat?</li>
						<li>Über dich</li>
						<li>Fragen zum Thema</li>
						<li>Weitere Fragen zum Thema</li>
						<li>Spamschutz</li>
					</ul>
					<!-- fieldsets -->
					<fieldset data-check-id="1">
						<h2 class="fs-title">Was bedeutet für dich Heimat?</h2>
						<h3 class="fs-subtitle">antworte mögl. spontan</h3>
						<textarea name="spontan" placeholder="5 Stichworte" type="text" rows="5"></textarea>
						<br>
						<input type="button" name="next" class="next action-button" value="Weiter">
					</fieldset>
					<fieldset data-check-id="2">
						<h2 class="fs-title">Über dich</h2>
						<h3 class="fs-subtitle">Geschlecht und Alter</h3>
						<input type="radio" name="geschlecht" value="maennlich" class="geschlecht" checked="checked">&nbsp;männlich
						<input type="radio" name="geschlecht" value="weiblich" class="geschlecht">&nbsp;weiblich
						<br>
						<br>
						<input name="titleer" placeholder="In welchem Jahr bist du geboren?" type="number">
						<br>
						<br>
						<input name="gebort" placeholder="In welcher Stadt bist du geboren?">
						<br>
						<input type="button" name="previous" class="previous action-button" value="Zurück">
						<input type="button" name="next" class="next action-button" value="Weiter">
					</fieldset>
					<fieldset data-check-id="3">
						<h2 class="fs-title">Fragen zum Thema</h2>
						<h3 class="fs-subtitle">Bitte antworte spontan</h3>
						<input name="q1" placeholder="Welcher heimatliche Brauch ist dir am Geläufigsten?">
						<input name="q2" placeholder="Wie wichtig findest du heimatliche Bräuche?">
						<input name="q3" placeholder="Wie verbindest du Heimat mit Essen und Trinken?">
						<input name="q4" placeholder="Wie verbindest du Heimat und Essen/Trinken?">
						<br>
						<br>
						<input type="button" name="previous" class="previous action-button" value="Zurück">
						<input type="button" name="next" class="next action-button" value="Weiter">
					</fieldset>
					<fieldset data-check-id="4">
						<h2 class="fs-title">Weitere Fragen zum Thema</h2>
						<h3 class="fs-subtitle">Bitte antworte spontan</h3>
						<input name="q5" placeholder="Was denkst du über Immigranten?">
						<br>
						<br>
						Denkst du, dass Heimat orts- oder personengebunden ist?
						<br>
						<input type="radio" value="ortsgebunden" name="q6" checked="checked" class="geschlecht">&nbsp;ortsgebunden
						<input type="radio" value="personengebunden" name="q6" class="geschlecht">&nbsp;personengebunden
						<br>
						<br>
						<input type="button" name="previous" class="previous action-button" value="Zurück">
						<input type="button" name="next" class="next action-button" value="Weiter">
					</fieldset>
					<fieldset data-check-id="5">
						<h2 class="fs-title">Spamschutz</h2>
						<h3 class="fs-subtitle">Gleich geschafft! :)</h3>
						<input class="vtcha-spamschutz">
						<input type="button" name="previous" class="previous action-button" value="Zurück" />
						<input type="submit" name="submit" class="submit action-button" value="Absenden" />
					</fieldset>
				</form>




				<!-- jQuery -->
				<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script><!-- -->
				<!-- jQuery easing plugin -->
				<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
				<script src='//files.elementcode.de/vtcha/js/jquery.vtcha.bundle.min.js'></script>
				<script src='//files.elementcode.de/sweetalert/lib/sweet-alert.min.js'></script>
				<script>
					$(document).ready(function () {
						spamschutz_init();
						msform_init();
						$('form').submit(function (event) {
							if (form_completeCheck() && true) {
							} else {
								event.preventDefault();
							}
						});
					});
					function check($fs) {
						var ok = true;
						switch ($fs.attr('data-check-id')) {
							case '1':
								$i_spontan = $('textarea[name="spontan"]', $fs);
								if ($i_spontan.val().length < 10) {
									ok = false;
									$i_spontan.addClass('error');
								} else {
									$i_spontan.removeClass('error');
								}
								break;
							case '2':
								$i_geschlecht = $('input[value="geschlecht"]', $fs);
								$i_titleer = $('input[name="titleer"]', $fs);
								$i_gebort = $('input[name="gebort"]', $fs);
								if ($i_titleer.val().length < 2) {
									ok = false;
									$i_titleer.addClass('error');
								} else {
									$i_titleer.removeClass('error');
								}
								if ($i_gebort.val().length < 5) {
									ok = false;
									$i_gebort.addClass('error');
								} else {
									$i_gebort.removeClass('error');
								}
								break;
							case '3':
								$i_q1 = $('input[name="q1"]', $fs);
								$i_q2 = $('input[name="q2"]', $fs);
								$i_q3 = $('input[name="q3"]', $fs);
								$i_q4 = $('input[name="q4"]', $fs);
								if ($i_q1.val().length < 3) {
									ok = false;
									$i_q1.addClass('error');
								} else {
									$i_q1.removeClass('error');
								}
								if ($i_q2.val().length < 3) {
									ok = false;
									$i_q2.addClass('error');
								} else {
									$i_q2.removeClass('error');
								}
								if ($i_q3.val().length < 3) {
									ok = false;
									$i_q3.addClass('error');
								} else {
									$i_q3.removeClass('error');
								}
								if ($i_q4.val().length < 3) {
									ok = false;
									$i_q4.addClass('error');
								} else {
									$i_q4.removeClass('error');
								}
								break;
							case '4':
								$i_q5 = $('input[name="q5"]', $fs);
								$i_q6 = $('input[value="q6"]', $fs);
								if ($i_q5.val().length < 3) {
									ok = false;
									$i_q5.addClass('error');
								} else {
									$i_q5.removeClass('error');
								}
								break;
							case '5':
								if (spamschutz_check() === false) {
									ok = false;
								}
								break;
							}
							if (ok === true) {
								$fs.attr('data-complete', true);
								return true;
							} else {
								$fs.attr('data-complete', false);
								return false;
							}
					}
					function unCheck($fieldset) {
						$fieldset.attr('data-complete', false);
					}
					function form_completeCheck() {
						var ok = true;
						$('fieldset').each(function (index, elem) {
							$this = $(this);
							if ($this.attr('data-complete') != 'true') {
								ok = false;
							};
						});
						if (ok === true) {
							return true;
						} else {
							swal('Irgendwo hast Du Daten vergessen :/', '\xDCberpr\xFCfe nochmal deine Eingaben!', 'error');
							return false;
						}
					}
					function msform_init() {
						var current_fs, next_fs, previous_fs;
						var left, opacity, scale;
						var animating;
						$('.submit').click(function () {
							check($(this).parent());
						});
						$('.next').click(function () {
							if (animating)
							return false;
							animating = true;
							current_fs = $(this).parent();
							next_fs = $(this).parent().next();
							if (check(current_fs) === false) {
								animating = false;
								return false;
							}
							$('.progressbar li').eq($('fieldset').index(next_fs)).addClass('active');
								next_fs.show();
								current_fs.animate({ opacity: 0 }, {
									step: function (now, mx) {
										scale = 1 - (1 - now) * 0.2;
										left = now * 50 + '%';
										opacity = 1 - now;
										current_fs.css({ 'transform': 'scale(' + scale + ')' });
										next_fs.css({
											'left': left,
											'opacity': opacity
										});
									},
									duration: 800,
									complete: function () {
										current_fs.hide();
										animating = false;
									},
									easing: 'easeInOutBack'
								});
						});
						$('.previous').click(function () {
							if (animating)
							return false;
							animating = true;
							current_fs = $(this).parent();
							previous_fs = $(this).parent().prev();
							unCheck(previous_fs);
							$('.progressbar li').eq($('fieldset').index(current_fs)).removeClass('active');
							previous_fs.show();
							current_fs.animate({ opacity: 0 }, {
								step: function (now, mx) {
									scale = 0.8 + (1 - now) * 0.2;
									left = (1 - now) * 50 + '%';
									opacity = 1 - now;
									current_fs.css({ 'left': left });
									previous_fs.css({
										'transform': 'scale(' + scale + ')',
										'opacity': opacity
									});
								},
								duration: 800,
								complete: function () {
									current_fs.hide();
									animating = false;
								},
								easing: 'easeInOutBack'
							});
						});
					};
					function spamschutz_init() {
						$('.vtcha-spamschutz').vtcha({ ok: 'multi_human_detected' });
					}
					function spamschutz_check() {
						$this = $('.vtcha-spamschutz');
						if ($this.val() == 'multi_human_detected') {
							return true;
						} else {
							return false;
						}
					}
					//@ sourceURL=pen.js
					</script>
					<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
			</section>

Alles anzeigen

Das CSS dazu:

CSS

#umfrage
{
	height: 700px;
}




/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Arial);




/*form styles*/
.msform 
{
	width: 500px;
	margin: 40px auto;
	padding: 10px;
	text-align: center;
	position: relative;
	background-color: #EDD09E;
	border-radius: 5px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
}




.msform fieldset 
{
	background: #EDD09E;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	box-sizing: border-box;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	/*stacking fieldsets above each other*/
	position: absolute;
}




/*Hide all except first fieldset*/
.msform fieldset:not(:first-of-type) 
{
	display: none;
}




/*inputs*/
.msform input, .msform textarea 
{
	padding: 15px;
	border: 1px solid rgba(0,0,0, .05);
	border-radius: 3px;
	margin-bottom: 5px;
	width: 100%;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	color: #2C3E50;
	font-size: 12px;
}




.msform input.geschlecht
{
	padding: 5px;
	border: 1px solid rgba(0,0,0, .05);
	border-radius: 3px;
	margin-bottom: 5px;
	width: 5%;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	color: #2C3E50;
	font-size: 12px;
}




.msform input.error, .msform textarea.error
{
	border-color: rgb(255,99,71);
}




/*buttons*/
.msform .action-button 
{
	width: 100px;
	background: rgb(64,64,64);
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 2px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
	transition: all .4s;
}




.msform .action-button:hover, .msform .action-button:focus 
{
	box-shadow: 0 0 0 2px white, 0 0 0 3px rgb(255,99,71);
	background-color: rgb(255,99,71);
}




/*headings*/
.fs-title 
{
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}




.fs-subtitle 
{
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}




/*progressbar*/
.progressbar 
{
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
	width: 90%;
	margin: 0 auto 10px;
}




.progressbar li 
{
	list-style-type: none;
	color: rgb(255, 255, 255);
	text-transform: uppercase;
	font-size: 9px;
	width: 20%;
	float: left;
	position: relative;
}




.progressbar li:before 
{
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: rgb(21, 21, 21);
	background: rgb(255, 255, 255);
	border-radius: 50%;
	margin: 0 auto 5px auto;
}




/*progressbar connectors*/
.progressbar li:after 
{
	content: '';
	width: 100%;
	height: 2px;
	background: rgb(255, 255, 255);
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}




.progressbar li:first-child:after 
{
	/*connector not needed before the first step*/
	content: none; 
}




/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.progressbar li.active:before,  .progressbar li.active:after
{
	background: rgb(255,99,71);
	color: #FFFFFF;
}




.vtcha
{
	max-width: 100%;
}




.vtcha-spamschutz
{
	padding: 0 auto;
}




.vtcha .item-box,.vtcha .target-box
{
	width: 170px;
	margin: 10px auto 0;
}

Alles anzeigen

flo96 · 13. März 2015

mit dem was du mir empfohlen hast da?

flo96 · 11. März 2015

geimeint ist auf alle daten... wohl in ne database schreiben oder?

flo96 · 4. März 2015

bei mir sagt er fehler auf der seite und ich kann nur n schwarzen hintergrund sehen...

Edit:

ich habs in nem anderem browser probiert und jetzt funtst es... und ich kann das einfach nachd em schema weiterführen?

kann ich auch eine Datenauswertung im browser machen in form eines kreisdiagramms oder so?

flo96 · 2. März 2015

Hallo,

wie vllt einige aus dem php-Teil dieses Forums wissen, versuche ich gerade ein Schritt-für-Schritt formular für eine Umfrage zu basteln. Ich komme nicht weiter wie mit dem Javascript und dem ganzen zu händeln... es muss relativ zügig gehen, da ich bis ende März die Website abgeben muss... ich habe mir zwar das tut von The Scout durchgelesen, leider verwirrt mich das ganze ein wenig... wenn ihr mir vllt helfen könntet wäre das klasse

Mein bisheriges Script von html:

HTML

<form action="<?php $_SERVER['SCRIPT_NAME']; ?>" method="POST">
					<table cellspacing="5">
						<thead>
							<tr>
								<th colspan="4">Wir bitten euch um eure Meinung</th>
							</tr>
							<tr>
								<th class="erkl" colspan="4">Bitte füllen Sie alle mit <span class="pf">*</span> gekennzeichneten Felder aus (Pflichtfelder)</th>
							</tr>
						</thead>

						<tfoot>
							<tr>
								<td colspan="4"><input type="submit" name="weiter" id="weiter" value="Weiter" /></td>
							</tr>
						</tfoot>

						<tbody>
							<tr>
								<td rowspan="2" colspan="2"><span class="pf">*</span> Was bedeutet für dich Heimat?<br><span class="ht">~ 5 Wörter, Trennung p. [Enter], möglichst spontan ~</td>
								<td colspan="2"><textarea rows="6" name="spontan" id="spontan"><?php echo $spontan; ?></textarea></td>
							</tr>
						</tbody>
					</table>
				</form>

Alles anzeigen

Und das bisherige php-script:

PHP

<?php
	// Sicherheitsabfrage - Zufallszahlen generieren
	$Z0 = array(mt_rand(1, 9), mt_rand(1, 9));
	$Z1 = max($Z0); 
	$Z2 = min($Z0);
	$Spam = $Z1 . " + &#" . (48 + $Z2) . "; =";
	$Schutz = md5($Z1 + $Z2);
?>
<?php 
	//Variablen deklarieren um gesendete Objekte einfacher zu packen
	$spontan = $_POST['spontan'];
	$geschlecht = $_POST['geschlecht'];
	$alter = $_POST['altersgruppe'];
	/*$zip = $_POST["zip"];
	$zip2 = $_POST["zip2"];
	$fehler2['sicherheit'] = (md5($_POST["zip"]) != ($_POST["zip2"]));
	$fehler2 = array("sicherheit"=>"",);
	$sicherheit = 'test';  --> Für Spamschutz wichtig*/
?>
<?php 
	error_reporting(E_ALL); //Testphase -> alle Fehler und Warnungen ausgeben
	if(isset($_POST['weiter'])){ //wenn Weiter-Button gedrückt
		$fehler = array(); //$fehler ist anfangs ein leeres array
		//Eingabefeld prüfen
		if(!empty($spontan)){
			$spontan = $_POST['spontan'];
		}else{
			$fehler[] = 'Bitte antworte möglichst spontan!';
		}				
		//fehler vorhanden?
		if(empty($fehler)){
			//keine Fehler vorhanden
			header("Location: umfr2.php");
		}else{
			//Fehler vorhanden -> ausgeben
			foreach($fehler as $err){
				echo $err.'<br>';
			}
		}
	} //if(isset($_POST['weiter'])) ENDE
?>

Alles anzeigen

Wo muss ich nun wie javascript usw anwenden um das nächste Form zu holen? und wie werte ich das nun aus?

flo96 · 2. März 2015

aso

flo96 · 2. März 2015

geil

flo96 · 27. Februar 2015

ok wer hat bock mir mit dem javascript und/oder Ajax (muss ich das beides benutzen oder nur eines?) zu helfen?

flo96 · 27. Februar 2015

ok

flo96 · 27. Februar 2015

aso also mit -webkit- was weis ich

flo96 · 26. Februar 2015

hä was? ok kein plan... hab wohl doch noch nicht so viel ahnung

flo96 · 26. Februar 2015

hmmm hast recht... dann lasse ich es lieber so wies vorher war

flo96 · 26. Februar 2015

Dabei muss mir definitiv geholfen werden Weil Javascript und/oder Ajax hab ich noch nie benutzt außer die scripts für Lightbox....

EDIT:

Aber prinzipiell kann ich es ja so machen dass ich die Umfrage auf mehrere Teildateien aufsplitten und die Variablen weitergeben oder? Und vorher überprüfe ich ob die Angaben korrekt sind.... wenn sie das sind lasse ich einen

PHP

<?php header("Location: umfr2.php"); >

laufen.

EDIT2:

Wenn es denn möglich ist die Variablen weiterzugeben

flo96 · 24. Februar 2015

merci beaucoup
leider sieht es jetzt nicht mehr ganz so schön aus

flo96 · 24. Februar 2015

Hab mal ne frage.

Muss ich eine Textarea

HTML

<textarea></textarea>

für einen bestimmten Browser speziell ansprechen?

flo96 · 24. Februar 2015

bedeutet ich soll es lieber über mehrere Seiten laufen lassen?

flo96 · 24. Februar 2015

Zitat von erwieder

Hallo erstmal ich fange an mich mit css zu beschäftigen und bräuchte da mal hilfe.

Ich habe ein tutorial nachgebastelt ( --> Hier geht es zur Demo <-- )

Standart gibt es : Home | Menu 1| Menu 2 | Menu 3

wenn mann auf Menu 1 hält kommt ein submenü mit : submenu A - H

fertig. das geht auch.

den css. hab ich geändert das wenn mann auf submenu H geht ein weiteres submenu geöfnet wird mit inhalt 2A - 2D.

und wenn mann da auf 2 D geht, kommt ein weiteres submenu mit inhalt 3A - 3D

das geht auch. mach ich jetzt das wenn man auf 3D geht ein weiteres submenu sich öffnet, ist das submenu aber dauerhaft angezeigt. Das soll aber erst angezeigt werden, wenn mann über 3D hält. Wo liegt der Fehler ?

Alles anzeigen

Entweder ist das ein Missverständnis oder was weis ich... nun ja wenn es auf bleibt... kannst du vllt mal dein html dazu geben?

flo96 · 24. Februar 2015

Bei mir ist das ebenfalls das Problem, nur dass ich Notepad++ verwende, welches auch die aktuellste version ist... ich musste nun mit einem <?php Header(); ?> arbeiten... gibt es da auch ne andere Möglichkeit?

Beiträge von flo96

Schritt-für-Schritt-Formular

Schritt-für-Schritt-Formular

Schritt-für-Schritt-Formular

Schritt-für-Schritt-Formular

Schritt-für-Schritt-Formular

Schritt-für-Schritt-Formular

Schritt-für-Schritt-Formular

Textarea

Formular-Daten in Variablen speichern und an das Formular zurückgeben

Formular-Daten in Variablen speichern und an das Formular zurückgeben

Background-Image

Textarea

Textarea

Background-Image

Formular-Daten in Variablen speichern und an das Formular zurückgeben

Background-Image

Textarea

Formular-Daten in Variablen speichern und an das Formular zurückgeben

Hilfe bei mehr sub tabs.

Plötzlich wieder keine Umlaute möglich, trotz UTF-8