Witam !
Na początku chcę tylko uprzedzić że jestem początkujący;-)
Mam prosty formularz z którego danych nie chcę przesyłać do jakieś bazy danych czy też na konto pocztowe . Dane z formularza chcę jedynie wyświetlić obok niego - co już zrobiłem za pomocą jQuery. Jedyne co chciałbym zrobić jeszcze to dodać walidacje do formularza. Wcześniej gdy dodałem framework jQuery Validation Plugin - to walidacja wymuszała poprawność wpisanych danych, ale gdy kliknąłem na button, to nie poprawione dane zostały wysyłane przez Jquery na miejsce obok.Szukam rozwiązania aby było możliwe przesłanie danych z formularza na miejsce obok, dopiero gdy dane zostaną poprawione w formularzu. Dodam że w pliku scripts.js zablokowałem domyślne działanie przeglądarki (czyli wysyłanie formularza) za pomocą event.preventDefault(); - w celu wyświetlenia danych z formularza obok formularza za pomocą jQuery. Pytanie nr. 2: czy jest możliwe formatowanie (powiększenie ) strzałek (góra, dół) w inpucie typu number ? Będę wdzięczny za wskazówki jak tego dokonać oraz o ile to możliwe chciałbym uniknąć walidacji w PHP.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kawiarnia</title>
<link rel="stylesheet" href="style/style.css">
<script src="jquery.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<section class="reservation">
<div class="container">
<h2 class="center-text"></h2>
<h5 class="center-text"></h5>
<div class="col-half">
<form action="">
<label for="name">
<strong>Imię i nazwisko</strong>
</label><br>
<input type="text" name="name" id="name"><br>
<label for="email">
<strong>Email</strong>
</label><br>
<input type="text" name="email" id="email"><br>
<label for="persons">
<strong>Ilośc osób</strong>
</label><br>
<input type="number" name="persons" value="" min="1" max="10" id="persons"><br>
<button type="submit" class="button button-dark" id="login">Rezerwuj</button>
</form>
</div>
<div class="col-half" id="reservation-right">
<h4>Znajdź nas</h4>
<img src="img/mapa.jpg" alt="Mapa">
</div>
</div>
</section>
</body>
</html>
sesions.js
$(document).ready(function(){
$("#login").click(function(event){
event.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var persons = $("#persons").val();
$("#reservation-right").html(name + "<br>" + email + "<br>" + persons);
});
});
