jmeno.prijmeni
/
formulare
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

report

master
Jméno Příjmení 4 years ago
parent
c575240736
commit
d27e994478
1 changed files with 68 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 124
      index.html

124
index.html
View File

@ -14,62 +14,70 @@
</head>
<body>
<h1>Registrační formulář</h1>
<div class="card" style="width: 24rem;">
<div class="card-body">
<form id="regform" action="">
<div class="mb-3">
<label for="name" class="form-label">Jméno</label>
<input class="form-control" id="name" type="text" name="name" value="" placeholder="e.g. Bob">
</div>
<div class="mb-3">
<label for="age" class="form-label">Věk</label>
<input class="form-control" id="age" type="number" name="age" min="1" max="199" placeholder="Your age">
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<form id="regform" action="">
<div class="mb-3">
<label for="name" class="form-label">Jméno</label>
<input class="form-control" id="name" type="text" name="name" value="" placeholder="e.g. Bob">
</div>
<div class="mb-3">
<label for="age" class="form-label">Věk</label>
<input class="form-control" id="age" type="number" name="age" min="1" max="199" placeholder="Your age">
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" id="male" type="radio" name="sex" value="male">
<label class="form-check-label" for="male">muž</label>
</div>
<div class="form-check">
<input class="form-check-input" id="female" type="radio" name="sex" value="female">
<label class="form-check-label" for="female">žena</label>
</div>
</div>
<div class="mb-3">
<label for="country" class="form-label"></label>
<select id="form-label" name="country" class="form-select">
<option value="CZ">Česko</option>
<option value="SK">Slovensko</option>
<option value="DE">Německo</option>
</select>
</div>
<div class="mb-3">
Chci zasílat novinky z: <br>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="news" value="1" id="vedtech">
<label class="form-check-label" for="vedtech">Věda a technika</label> <br>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="news" value="2" id="eko">
<label class="form-check-label" for="eko">Ekonomika</label>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="birthday">Datum narození</label>
<input class="form-control" id="birthday" type="date" max="2021-11-03">
</div>
<div class="mb-3">
<label class="form-label" for="hobbies">Zájmy</label>
<textarea class="form-control" id="hobbies" name="hobbies" cols="30" rows="10"></textarea>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" id="male" type="radio" name="sex" value="male">
<label class="form-check-label" for="male">muž</label>
</div>
<div class="form-check">
<input class="form-check-input" id="female" type="radio" name="sex" value="female">
<label class="form-check-label" for="female">žena</label>
</div>
</div>
<div class="mb-3">
<label for="country" class="form-label"></label>
<select id="form-label" name="country" class="form-select">
<option value="CZ">Česko</option>
<option value="SK">Slovensko</option>
<option value="DE">Německo</option>
</select>
</div>
<div class="mb-3">
Chci zasílat novinky z: <br>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="news" value="1" id="vedtech">
<label class="form-check-label" for="vedtech">Věda a technika</label> <br>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="news" value="2" id="eko">
<label class="form-check-label" for="eko">Ekonomika</label>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="birthday">Datum narození</label>
<input class="form-control" id="birthday" name="birthday" type="date" max="2021-11-03">
</div>
<div class="mb-3">
<label class="form-label" for="hobbies">Zájmy</label>
<textarea class="form-control" id="hobbies" name="hobbies" cols="30" rows="10"></textarea>
</div>
<div class="mb-3">
<input class="btn btn-primary" type="submit" name="reg" value="Registrovat">
<button class="btn btn-primary" type="submit">Registrovat 2</button>
</div>
</form>
</div>
<div class="mb-3">
<input class="btn btn-primary" type="submit" name="reg" value="Registrovat">
<button class="btn btn-primary" type="submit">Registrovat 2</button>
</div>
</form>
</div>
</div>
<div id="form-report" class="col">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
let form = document.querySelector("#regform");
@ -78,10 +86,14 @@
event.preventDefault();
let data = new FormData(form);
console.log(data);
console.log(data.get("name"));
console.log(data.get("age"));
let report = document.querySelector("#form-report");
report.innerHTML = "<p>" + data.get("name") + "</p>";
report.innerHTML += "<p>" + data.get("age") + "</p>";
report.innerHTML += "<p>" + data.get("sex") + "</p>";
report.innerHTML += "<p>" + data.get("country") + "</p>";
report.innerHTML += "<p>" + data.getAll("news") + "</p>";
report.innerHTML += "<p>" + data.get("birthday") + "</p>";
report.innerHTML += "<p>" + data.get("hobbies") + "</p>";
});

Write Preview
Loading…
Cancel
Save