Я хотел бы скрыть элемент HTML, когда нажимаю на другой элемент.У меня есть меню с подменю, которое имеет две опции.Один вариант показывает таблицу, а другой - форму.Когда я нажимаю на первый вариант, появляется таблица.Если после того, как я нажму на второй вариант, появятся предыдущая таблица и форма.
Меню:
В действииЯ получаю таблицу и в другом действии я получаю форму.
Код в HTML:
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#" onclick="origin()">Action</a>
<a class="dropdown-item" href="#" onclick="formOrigin()">Another action</a>
</div>
<div>
<table class="table"></table>
</div>
<div>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="city">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="add">
<label class="form-check-label" for="add">Check</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
Код в Javascript:
function origin() {
var url = "http://localhost:8000/api/v1/origin";
petition.onreadystatechange = ResponseOrigin;
petition.open("GET", url, true);
petition.send();
}
function ResponseOrigin(){
var response;
text="<tr><th>Identifier</th><th>Name</th><th>Numero</th><th>City</th></tr>";
if (petition.readyState == 4)
if (petition.status == 200) {
responser = petition.responseText;
var responseC = response.split("<");
var responseV = responseC[0];
var data = JSON.parse(responseV);
for (var i = 0; i < data.length; i++) {
text += "<tr id =" + data[i].id + "><td>" + data[i].id + "</td><td id='name'>" + data[i].name + "</td><td>" +
data[i].city + "</td>
document.getElementById('table').innerHTML = text;
document.formOrigin.style.display="none";
}
else alert("Problem with URL");
}
function formOrigin() {
var url = "http://localhost:8000/api/v1/origin";
petition.onreadystatechange = responseAddOrigin;
petition.open("POST", url, true);
petition.send(JSON.stringify({name: document.formOrigin.name.value,
city: document.formOrigin.city.value}));
}
function responseAddOrigen(){
var response;
if (petition.readyState == 4)
if (petition.status == 200) {
response = petition.responseText;
alert ("data recorded correctly");
}
else
alert("Problem with URL");
}