source: Prototype Application/Paw5/src/main/resources/templates/create-post.html@ 4103eaa

main
Last change on this file since 4103eaa was 4103eaa, checked in by SazdovaEkaterina <sazdovaekaterina@…>, 16 months ago

create post for existing pet + disable form if selecting from list
  • Property mode set to 100644
File size: 6.8 KB
Line 
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml"
3 xmlns:th="http://thymeleaf.org"
4 xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
5 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
6<head>
7 <meta charset="UTF-8">
8 <title>Create a post</title>
9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
11 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
12 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
13 <script>
14 function addNewPet(addNewPetCheckBox){
15
16 if(addNewPetCheckBox.checked){
17
18 document.getElementById("name").disabled = false;
19 document.getElementById("gender").disabled = false;
20 document.getElementById("ageGroup").disabled = false;
21 document.getElementById("size").disabled = false;
22 document.getElementById("species").disabled = false;
23 document.getElementById("breed").disabled = false;
24 document.getElementById("imageUrl").disabled = false;
25 document.getElementById("canBeFostered").disabled = false;
26
27 document.getElementById("petId").disabled = true;
28 } else{
29
30 document.getElementById("name").disabled = true;
31 document.getElementById("gender").disabled = true;
32 document.getElementById("ageGroup").disabled = true;
33 document.getElementById("size").disabled = true;
34 document.getElementById("species").disabled = true;
35 document.getElementById("breed").disabled = true;
36 document.getElementById("imageUrl").disabled = true;
37 document.getElementById("canBeFostered").disabled = true;
38
39 document.getElementById("petId").disabled = false;
40
41 }
42 }
43 </script>
44</head>
45<body>
46<header>
47 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
48 <div class="container">
49 <a class="navbar-brand" href="/home">Paw 5</a>
50 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
51 aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
52 <span class="navbar-toggler-icon"></span>
53 </button>
54
55 <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
56 <ul class="navbar-nav m-auto">
57 <li class="nav-item m-auto">
58 <a class="nav-link active" href="/home/aboutUs">About us</a>
59 </li>
60 <li class="nav-item m-auto">
61 <a class="nav-link active" href="/login">Login</a>
62 </li>
63 <li class="nav-item m-auto">
64 <a class="nav-link active" href="/register">Register</a>
65 </li>
66 </ul>
67 </div>
68 </div>
69 </nav>
70</header>
71 <h1>Create post</h1>
72<form th:action="@{/submit-post}" method="post">
73
74 <div>
75 <label for="petId">Select pet:</label>
76 <select id="petId" name="petId">
77 <option
78 th:each="pet :${pets}"
79 th:text="${pet.getName()}"
80 th:value="${pet.getId()}">
81 </option>
82 </select>
83 </div>
84
85 <div>
86 <label for="newPetCheckbox">Add new pet:</label>
87 <input id="newPetCheckbox" name="newPetCheckbox" type="checkbox" onclick="addNewPet(this)">
88 </div>
89
90 <div>
91 <label for="name">Name:</label>
92 <input type="text"
93 id="name"
94 name="name"
95 class="form-control"
96 placeholder="Enter name"
97 disabled>
98 </div>
99
100 <div>
101 <label for="gender">Gender:</label>
102 <select id="gender"
103 name="gender"
104 class="form-control"
105 disabled>
106 <option value = "MALE">male</option>
107 <option value = "FEMALE">female</option>
108 </select>
109 </div>
110
111 <div>
112 <label for="ageGroup">Age Group:</label>
113 <select id="ageGroup"
114 name="ageGroup"
115 class="form-control"
116 disabled>
117 <option value = "YOUNG">young</option>
118 <option value = "ADULT">adult</option>
119 <option value = "ELDER">elder</option>
120 </select>
121 </div>
122
123 <div>
124 <label for="size">Size:</label>
125 <select id="size"
126 name="size"
127 class="form-control"
128 disabled>
129 <option value = "XSMALL">extra small</option>
130 <option value = "SMALL">small</option>
131 <option value = "MEDIUM">medium</option>
132 <option value = "LARGE">large</option>
133 <option value = "XLARGE">extra large</option>
134 </select>
135 </div>
136
137 <div>
138 <label for="species">Species:</label>
139 <select id="species"
140 name="species"
141 class="form-control"
142 disabled>
143 <option value = "CAT">cat</option>
144 <option value = "DOG">dog</option>
145 <option value = "BIRD">bird</option>
146 </select>
147 </div>
148
149 <div>
150 <label for="breed">Breed:</label>
151 <input type="text"
152 id="breed"
153 name="breed"
154 class="form-control"
155 placeholder="Enter breed"
156 disabled>
157 </div>
158
159 <div>
160 <label for="imageUrl">Image URL:</label>
161 <input type="text"
162 id="imageUrl"
163 name="imageUrl"
164 class="form-control"
165 placeholder="Enter image URL"
166 disabled>
167 <!-- <label for="upload">Image:</label>
168 <input id="upload" type="file" accept="image/*">
169 <input type="submit">-->
170 </div>
171
172 <div>
173 <label for="canBeFostered">Can be fostered:</label>
174 <input type="checkbox"
175 id="canBeFostered"
176 name="canBeFostered"
177 class="form-control"
178 value=false
179 disabled>
180 </div>
181
182 <button id="submit" type="submit">Submit</button>
183
184</form>
185</body>
186</html>
Note: See TracBrowser for help on using the repository browser.