Witam. Mam za zadanie aby po walidacji formularza wartości zostały zapisane w paragrafie info-1.
Wszystko niby działa - wartości są tam poprawne - tylko znikają. Ostatnio miałem nawet podobny problem w js - z tym że tam miałem button bez type button dlatego mi znikało - tutaj natomiast jest input submit to on nie powinien być tutaj winowajcą.
Oto kod źródłowy :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ASdasd</title>
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<style>
table {
border-collapse: collapse;
}
table th {
text-align: center;
color: #fff;
background: #aaa;
font-weight: bold;
}
table td {
padding: 1px 15px;
border-bottom: 1px solid #ddd;
}
#formularz label {
display: inline-block;
width: 100px;
text-align: right;
}
#submit {
padding-left: 100px;
}
#formularz div {
margin-top: 1em;
}
#formularz div input {
width: 170px;
}
textarea {
vertical-align: top;
height: 5em;
width: 170px;
}
input.invalid,
textarea.invalid {
border: 3px solid red;
}
input.valid,
textarea.valid {
border: 3px solid green;
}
.blad {
color: red;
}
.ok {
color: green;
}
</style>
</head>
<body>
<form method="post">
<fieldset>
<label for="firstname">Firstname</label>
<input type="text" name="firstname" id="firstname">
<br>
<label for="lastname">Lastname</label>
<input type="text" name="lastname" id="lastname">
<br>
<label for="country">Country</label>
<select name="country" id="country">
<option value="1">Poland</option>
<option value="2">Germany</option>
<option value="3">Hungary</option>
<option value="4">France</option>
</select>
<input type="submit" id="submitbtn" name="send" value="Send">
<input type="reset">
</fieldset>
</form>
<p id="info-1"></p>
<hr>
<table>
<thead>
<tr>
<th>Lorem</th>
<th>Omnis</th>
<th>Rem</th>
<th>Voluptatibus</th>
<th>Architecto</th>
<th>Voluptates</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bombaj</td>
<td>Buenos Aires</td>
<td>Delhi</td>
<td>Kair</td>
<td>Seul</td>
<td>Lagos</td>
</tr>
<tr>
<td>Berlin</td>
<td>Paryż</td>
<td>Monachium</td>
<td>Warszawa</td>
<td>Rrzym</td>
<td>Ateny</td>
</tr>
</tbody>
</table>
<p id="info-2"></p>
<script>
$(document).ready(function() {
$('#firstname').on('blur', function() {
var input = $(this);
var firstName_length = input.val().length;
if (firstName_length >= 5 && firstName_length <= 15) {
input.removeClass("invalid").addClass("valid");
input.next('.komunikat').text("Wprowadzono poprawną nazwę.").removeClass("blad").addClass("ok");
} else {
input.removeClass("valid").addClass("invalid");
input.next('.komunikat').text("Nazwa musi mieć więcej niż 4 i mniej niż 16 znaków!").removeClass("ok").addClass("blad");
}
});
$('#lastname').on('blur', function() {
var input = $(this);
var lastName_length = input.val().length;
if (lastName_length >= 5 && lastName_length <= 15) {
input.removeClass("invalid").addClass("valid");
input.next('.komunikat').text("Wprowadzono poprawną nazwę.").removeClass("blad").addClass("ok");
} else {
input.removeClass("valid").addClass("invalid");
input.next('.komunikat').text("Nazwa musi mieć więcej niż 4 i mniej niż 16 znaków!").removeClass("ok").addClass("blad");
}
});
$('#submitbtn').click(function(event) {
var firstName = $('#firstname');
var lastName = $('#lastname');
var country = $("#country");
if(firstName.val() != "" && lastName.val() != "")
{
alert("asdsdadsa");
$("#info-1").append(firstName.val() + " <br>" + lastName.val() + "<br>" + country.val());
}
if (firstName.hasClass('valid') && lastName.hasClass('valid')) {
alert("Pomyślnie wysłano formularz.");
$("#info-1").append(firstName.val() + " <br>" + lastName.val() + "<br>" + country.val());
} else {
event.preventDefault();
alert("Uzupełnij wszystkie pola!");
}
});
});
</script>
</body>
</html>
