od-boy
Ensign
- Registriert
- Nov. 2007
- Beiträge
- 224
Hallo zusammen,
die SuFu hat mir leider nicht geholfen. Entschuldige bitte meinen evtl. nicht passenden Titel, ich bin in diesem Gebiet noch ein Anfänger.
Ich habe ein HTML Formular geschrieben und es in einen overlay gepackt. Nach Eingabe und Überprüfung (Validation) der Formularfelder (Passwortüberprüfung funktioniert übrigens nicht; warum?) sollen nach einer Bestätigungsabfrage diese Daten in der "darunterliegenden Hauptseite" aufgelistet werden und nicht im overlay selbst, wie es momentan ist. Wenn der User auf "Nein" oder Ähnliches klickt soll nichts passieren.
Hier mal der Code:
Meine Fragen sind also:
Wie packe ich einen Popup rein, der nach einer Bestätigung fragt? Wie schaffe ich es, dass die Daten im main document aufgelistet werden?
Wie muss ich die Passwortüberprüfung anpassen?
Danke und Grüße,
od-boy
die SuFu hat mir leider nicht geholfen. Entschuldige bitte meinen evtl. nicht passenden Titel, ich bin in diesem Gebiet noch ein Anfänger.
Ich habe ein HTML Formular geschrieben und es in einen overlay gepackt. Nach Eingabe und Überprüfung (Validation) der Formularfelder (Passwortüberprüfung funktioniert übrigens nicht; warum?) sollen nach einer Bestätigungsabfrage diese Daten in der "darunterliegenden Hauptseite" aufgelistet werden und nicht im overlay selbst, wie es momentan ist. Wenn der User auf "Nein" oder Ähnliches klickt soll nichts passieren.
Hier mal der Code:
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery task</title>
<style>
body {
width: 500px;
}
.my-row {
width: 100%;
padding: 5px;
border-bottom: 1px solid #000;
}
label {
margin-right: 5px;
}
.label-left {
text-align: right;
}
.label-right {
text-align: left;
}
.error {
color: #cc0000;
}
/* The Overlay: */
.overlay {
/* General properties: */
/* - Hidden when the page is first displayed */
display: none;
/* - Displayed on top of the other page elements */
z-index: 10000;
/* - Fixed position */
position: fixed;
top: 50px;
left: 50px;
/* Appearance: */
background-color: grey;
padding: 5px;
border: 1px solid #000000;
-moz-box-shadow: 0 0 40px 5px #000000;
box-shadow: 0 0 40px 5px #000000;
-webkit-box-shadow: 0 0 40px 5px #000000;
}
/* The Close Button: */
.overlay-close {
/* Button image: */
background-image: url(close.png);
background-repeat:no-repeat;
/* Location: */
position: absolute;
right: -5px;
top: 5px;
/* Mouse cursor: */
cursor: pointer;
/* Size: */
height: 35px;
width: 35px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
function myValidateEMailAddress(email_address) {
var email_pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return email_pattern.test(email_address);
}
function checkPassword(password) {
var my_pwd_pattern = /^(?=.*[a-zA-Z].*[a-zA-Z])(?=.*\d.*\d)[a-zA-Z0-9_]{6,20}$/;
return my_pwd_pattern.test(password);
}
$(document).ready(function() {
$('#my_form').submit(function(e) {
var my_errors = false;
$('.my-row > .error').remove();
$('#my_submission').empty();
$(':text, textarea').each(function() {
$(this).val($.trim($(this).val()));
if ($(this).val() == '') {
$(this).parent().append('<div class="error">Please provide a value</div>');
my_errors = true;
}
});
if ($('#email').val() != '') {
if (!myValidateEMailAddress($('#email').val())) {
$('#email').parent().append('<div class="error">Please type in a correct e-mail address</div>');
my_errors = true;
}
}
if ($(':radio[name="form_of_address"]:checked').length == 0) {
$(':radio[name="form_of_address"]:first').parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($(':radio[name="sex"]:checked').length == 0) {
$(':radio[name="sex"]:first').parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($('.interests:checked').length == 0) {
$('.interests:first').parent().after('<div class="error">Please select at least one item</div>');
my_errors = true;
}
if ($('#newsletter option:selected').val() == '') {
$('#newsletter').parent().append('<div class="error">Please select one item</div>');
my_errors = true;
}
if (my_errors) {
return false;
}
else {
e.preventDefault();
var my_submission_array = $('#my_form').serialize().split('&');
if (my_submission_array.length > 0) {
$('#my_submission').html('<h2>Submitted Elements</h2><ul></ul>');
for (var i = 0; i < my_submission_array.length; i++) {
var my_pair = my_submission_array[i].split('=');
$('#my_submission > ul').append('<li>' + my_pair[0] + ': ' + my_pair[1] + '</li>\n');
}
}
}
});
});
$(document).ready(function() {
$('a.overlay-link').click(function() {
var my_overlay_id = $($(this).attr('rel'));
my_overlay_id.prepend('<div class="overlay-close"></div>').show();
$(document).on('click', '.overlay-close', function() {
my_overlay_id.hide();
});
});
});
});
</script>
</head>
<body>
<h2><u>jQuery</u></h2>
<h3>Task 3</h3>
</br>
<div id="overlay1" class="overlay">
<h2>Fill out this form!</h2>
<form name="my_form" id="my_form" action="" method="post">
<div class="my-row">
<fieldset>
<legend><b>Form of address:</b></legend>
<input type="radio" name="form_of_address" id="group1" value="1">
<label for="group1" class="label-right">Mr</label>
<input type="radio" name="form_of_address" id="group2" value="2">
<label for="group2" class="label-right">Ms</label>
</fieldset>
</div>
<div class="my-row">
<fieldset>
<legend><b>Sex:</b></legend>
<input type="radio" name="sex" id="group1" value="1">
<label for="group1" class="label-right">Male</label>
<input type="radio" name="sex" id="group2" value="2">
<label for="group2" class="label-right">Female</label>
</fieldset>
</div>
<div class="my-row">
<label for="last_name" class="label-left"><b>Last Name: </b></label>
<input type="text" name="last_name" id="last_name">
</div>
<div class="my-row">
<label for="first_name" class="label-left"><b>First Name: </b></label>
<input type="text" name="first_name" id="first_name">
</div>
<div class="my-row">
<label for="email" class="label-left"><b>E-Mail: </b></label>
<input type="text" name="email" id="email">
</div>
<div class="my-row">
<label for="password" class="label-left"><b>Password: </b></label>
<input type="password" name="password" id="password">
</div>
<div class="my-row">
<fieldset>
<legend><b>What are your interests?</b></legend>
<input type="checkbox" name="interests" class="interests" id="interest1" value="sleeping">
<label for="interest1" class="label-right">Sleeping</label>
<input type="checkbox" name="interests" class="interests" id="interest2" value="lazy">
<label for="interest2" class="label-right">Being lazy</label>
<input type="checkbox" name="interests" class="interests" id="interest3" value="eating">
<label for="interest3" class="label-right">Eating</label>
<input type="checkbox" name="interests" class="interests" id="interest4" value="movies">
<label for="interest4" class="label-right">Watching movies</label>
<input type="checkbox" name="interests" class="interests" id="interest5" value="music">
<label for="interest5" class="label-right">Listening to music</label>
</fieldset>
</div>
<div class="my-row">
<label for="newsletter" class="label-left"><b>Do you want to subscribe to a newsletter?</b></label>
<select name="newsletter" id="newsletter">
<option value="">Make your choice</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="my-row">
<label for="comments" class="label-left"><b>Any comments?</b></label>
<textarea name="comments" id="comments" cols="40" rows="3"></textarea>
</div>
<div class="my-row">
<input type="submit" name="submit" id="submit" value="Submit">
</div>
<div id="my_submission"></div>
</form>
</div>
<a href="#" rel="#overlay1" class="overlay-link">Click here to open the form in an overlay</a>
</body>
</html>Meine Fragen sind also:
Wie packe ich einen Popup rein, der nach einer Bestätigung fragt? Wie schaffe ich es, dass die Daten im main document aufgelistet werden?
Wie muss ich die Passwortüberprüfung anpassen?
Danke und Grüße,
od-boy
