I have been attempting to create an alert for the "save" button after it is clicked, but so far I have not been successful.
Perfil.html
- Profile.html is not the main page. It is part of a dashboard.
<li class="nav-item">
<a class="nav-link" href="#" a-view="infoPessoal" onclick="fetchContent(this)" a-folder="administrativo">
<i class="fas fa-info-circle"></i>
<!-- Icons -->
Information
</a>
</li>
<div class="ajax-fullscreenperfil" id="ajax-fullscreenperfilJs">
<p></p>
</div>
<script>
let button2 = document.querySelector('form button.btn')
button2.addEventListener('click', () => {
alert("Handler for .click() called.")
})
</script>
Ajax.js
- I used to make the html call on the same page that is the nav-bar.
let content = document.getElementById('ajax-fullscreenperfilJs')
function fetchContent(el) {
let view = el.getAttribute('a-view')
let folder = el.getAttribute('a-folder')
fetch(`../ajax/${folder}/${view}.html`)
.then(response => {
let html = response.text()
return html
})
.then(html => {
console.log(html)
content.innerHTML = html
})
}
InfoPessoal.html
- This is the page that will be shown in the prof.html div.
<div class="main-content">
<div class="perfil-parent">
<div class="perfil">
<div class="perfil-img">
<div class="img">
</div>
</div>
<div class="perfil-form">
<form>
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your full name.">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email.">
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="text" class="form-control" id="age" placeholder="Enter your age.">
</div>
<div class="form-group">
<label for="corp">Institution:</label>
<input type="text" class="form-control" id="corp" placeholder="Enter your institution or company.">
</div>
<div class="form-group">
<label for="genre">Access Priority:</label>
<select class="form-control" id="genre">
<option>Client</option>
<option>Maintenance</option>
<option>Administrator</option>
</select>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter your password.">
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose photo</label>
</div>
<button type="button" class="btn">Save</button>
</form>
</div>
</div>
</div>
</div>
I am able to successfully load the infoPersonal.html view through Ajax, but I am unable to trigger an alert by clicking on the "Save" button.