Gulum/weddingapiPage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add telephonumber field

Browse Source
This commit is contained in:
Julian
2022-02-05 16:48:23 +01:00
parent f8f88d6fc2
commit 169c2ee9b9
2 changed files with 90 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@@ -109,28 +109,49 @@
<div class="container"> <div class="container">
<div class="row animate-box"> <div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading"> <div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<h2>Nimmst du Teil?</h2> <h2>Nimmst du teil?</h2>
<p>Bitte gebt uns mit folgendem Formular bis zum 03.03.2022 bescheid ob ihr könnt oder nicht! Falls nicht bitte einfach die Seite wieder verlassen. Die Feier wird in Frankfurt (DE) stattfinden. <p>Liebe Gäste, zu unserer Hochzeit laden wir euch recht herzlich ein. Bitte gebt uns mit
folgendem Formular bis zum 03.03.2022 Bescheid, ob ihr teilnehmt! Über das Plus-Symbol könnt
ihr eure Begleitpersonen hinzufügen.
Falls ihr nicht teilnehmen könnt, bitte einfach die Seite wieder verlassen. Die Feier wird
in 55234 Kettenheim (DE)
stattfinden.
</p>
<p>
Liebe Grüße</br>
Draga & Julian
</p> </p>
</div> </div>
</div> </div>
<div class="row animate-box"> <div class="row animate-box">
<div id="attentants" class="col-md-10"> <div class="col-md-10">
<form class="form-inline"> <form id="js-attentants" class="form-inline">
<div class="col-md-6 col-sm-6"> <div>
<div class="form-group"> <div class="col-md-4 col-sm-4">
<label for="firstname" class="sr-only">Vorname</label> <div class="form-group">
<input type="firstname" class="form-control" id="firstname" placeholder="Vorname"> <label for="firstname" class="sr-only">Vorname</label>
<input type="firstname" class="form-control" id="firstname"
placeholder="Vorname">
</div>
</div> </div>
</div> <div class="col-md-4 col-sm-4">
<div class="col-md-6 col-sm-6"> <div class="form-group">
<div class="form-group"> <label for="lastname" class="sr-only">Nachname</label>
<label for="lastname" class="sr-only">Nachname</label> <input type="lastname" class="form-control" id="lastname"
<input type="lastname" class="form-control" id="lastname" placeholder="Nachname"> placeholder="Nachname">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label for="tel" class="sr-only">Telefonnummer</label>
<input type="telephon" class="form-control" id="tel"
placeholder="Telefonnummer">
</div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div class="plus-button col-md-2"> <div class="plus-button col-md-2">
<span class="icon"> <span class="icon">
<a href="#" class="js-addField"><i class="icon-plus"></i></a> <a href="#" class="js-addField"><i class="icon-plus"></i></a>

64
js/main.js
View File

@@ -188,7 +188,7 @@
event.preventDefault(); event.preventDefault();
// Container <div> where dynamic content will be placed // Container <div> where dynamic content will be placed
var container = document.getElementById("attentants"); var container = document.getElementById("js-attentants");
// Clear previous contents of the container // Clear previous contents of the container
// while (container.hasChildNodes()) { // while (container.hasChildNodes()) {
// container.removeChild(container.lastChild); // container.removeChild(container.lastChild);
@@ -196,14 +196,60 @@
//container.appendChild() //container.appendChild()
// Append a node with a random text // Append a node with a random text
container.appendChild(document.createTextNode("Member")); //container.appendChild(document.createTextNode("Member"));
// // Create an <input> element, set its type and name attributes var outerDiv = document.createElement("div");
// var input = document.createElement("input"); outerDiv.style="padding-top: 20px;";
// input.type = "text";
// input.name = "member" + i; var firstNameDiv = document.createElement("div");
// container.appendChild(input); firstNameDiv.classList.add('col-md-6');
// // Append a line break firstNameDiv.classList.add('col-sm-6');
// container.appendChild(document.createElement("br")); var formGroupDiv = document.createElement("div");
formGroupDiv.classList.add('form-group');
firstNameDiv.appendChild(formGroupDiv);
//Label
var labelElement = document.createElement("label");
labelElement.setAttribute("for","firstname");
labelElement.classList.add('sr-only');
labelElement.innerHTML = "Vorname";
formGroupDiv.appendChild(labelElement);
//Input
var inputElement = document.createElement("input");
inputElement.setAttribute("type","firstname");
inputElement.classList.add('form-control');
inputElement.setAttribute("id","firstname");
inputElement.setAttribute("placeholder","Vorname");
formGroupDiv.appendChild(inputElement);
outerDiv.appendChild(firstNameDiv);
var lastNameDiv = document.createElement("div");
lastNameDiv.classList.add('col-md-6');
lastNameDiv.classList.add('col-sm-6');
var lastnameFormGroupDiv = document.createElement("div");
lastnameFormGroupDiv.classList.add('form-group');
lastNameDiv.appendChild(lastnameFormGroupDiv);
//Label
var lastNamelabelElement = document.createElement("label");
lastNamelabelElement.setAttribute("for","lastname");
lastNamelabelElement.classList.add('sr-only');
lastNamelabelElement.innerHTML = "Nachname";
lastnameFormGroupDiv.appendChild(lastNamelabelElement);
//Input
var firstNameInputElement = document.createElement("input");
firstNameInputElement.setAttribute("type","lastname");
firstNameInputElement.classList.add('form-control');
firstNameInputElement.setAttribute("id","lastname");
firstNameInputElement.setAttribute("placeholder","Nachname");
lastnameFormGroupDiv.appendChild(firstNameInputElement);
outerDiv.appendChild(lastNameDiv);
container.appendChild(outerDiv);
return false; return false;
}); });