onclick event not working in JavaScript Why? [duplicate] - javascript

This question already has answers here:
Have addEventListener on multiple of the same IDs
(2 answers)
Closed 2 years ago.
I have two radio buttons and I want to attach some functionality to them. But no matter how hard I try I can't attach anything to each of them. I tried to add a simple console log and it seems that the issue is the on click events do not work at all. the code is at the very end of the HTML code. What I'm missing and how to fix this...???
Here is the code: The Javascript is placed in a script tag at the end of the HTML code:
Note: I can log the radio buttons. as you see...
<!DOCTYPE html>
<!-- saved from url=(0043)http://thetheme.io/thesaas/demo/saas-2.html -->
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<!-- Styles -->
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.css" rel="stylesheet">
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/style.css" rel="stylesheet">
</head>
<body>
<!-- Main Content -->
<main>
<section id="section-pricing" class="section bg-gray">
<div class="container pricing-plans-regular">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" type="radio" name="pricing" value="monthly" autocomplete="off" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" type="radio" name="pricing" value="yearly" autocomplete="off"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Plus</p>
<br>
<h2 class="price">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="12.5" data-yearly="120">12.5</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Everything in Free & Standard, and</small><br>
<small>SAML-based single sign-on (SSO)</small><br>
<small>Compliance Exports of all messages</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
<!-- Second one -->
<div class="container pricing-plans-individual">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" class="switch-input" type="radio" name="plan" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" class="switch-input" type="radio" name="plan"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Scripts -->
<script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.js.download"></script>
<!-- <script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/script.js.download"></script>
-->
<script type="text/javascript">
document.querySelector(".pricing-plans-regular").setAttribute('style', 'display:none !important');
const toggleRegular = document.querySelector("#pricing-toggle--regular");
const toggleProfessional = document.querySelector("#pricing-toggle--professional");
console.log(toggleRegular, toggleProfessional);
toggleRegular.onclick = function() {
console.log('toggleRegular')
};
toggleProfessional.onclick = function() {
console.log('toggleProfessional')
};
</script>
</body>
</html>


You're using multiple ID instead of Class. IDs are meant to be unique.
Use class . selector
Use Element.querySelectorAll()
const toggleProfessional = document.querySelectorAll(".pricing-toggle--professional");
const togProf = (ev) => {
console.log(`${ev.target.name} says: ${ev.target.value}`);
};
toggleProfessional.forEach(el => el.addEventListener("change", togProf));
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="1"> aaa 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="2"> aaa 2</label>
<hr>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="1"> bbb 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="2"> bbb 2</label>

Related

Is there a way to make the delete icon appear for every card when I checked the checkbox?

I am unable to make the trash icon visible more than one when I checked the checkbox element.
The first card only shows the trash icon, and the rest of the cards are not showing.
I have tried getElementById, querySelectorAll and getElementsByClassName. Nothing works properly as expected.
Can you find the logic error in the code?
function check() {
if (document.querySelector(".check").checked == true) {
document.querySelector(".deleteButton").style.visibility = "visible";
} else {
document.querySelector(".deleteButton").style.visibility = "hidden";
}
}
.deleteButton {
visibility: hidden;
}
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 1
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id1">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 2
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id2">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 3
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id3">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>

Don't wrap a checkbox in a link
Also delegate
I delegate from a div I called container. It needs to be the nearest common container for your cards
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("check")) {
tgt.closest(".card-body").querySelector(".deleteButton").classList.toggle("hide", !tgt.checked)
}
else if (tgt.closest("a").classList.contains("deleteButton")) {
e.preventDefault();
tgt.closest(".card").remove()
}
})
.hide {
display: none
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div id="container">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 1
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id1">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 2
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id2">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 3
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id3">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
</div>

how to use a mutation inside a component template? VUEX

I'm learning Vue with VUEX and I'm making and small app.
That small app call a json data and print it in a template.
I created a mutation called year(), that mutation get a world of a string and return the result but when I use that mutation inside template {{ year(item.fechaInicio) }} return a empty value.
That's my html code:
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<!-- bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- fontawesome css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Tipografía -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<!-- Jquery -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- cookies jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<!-- Vuex -->
<script src="https://unpkg.com/vuex#3.6.0/dist/vuex.js"></script>
<!-- CSS estilos -->
<link href="calendario-2020.css" rel="stylesheet" />
</head>
<body>
<div class="Calendario" id="caja-vue">
<p class="calendario-titulo">Calendario Académico</p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a aria-controls="home" aria-selected="true" class="nav-link active" data-toggle="tab" href="#home" id="home-tab" role="tab">Estudiantes</a></li>
</ul>
<!--TAB 1 ESTUDIANTES-->
<div class="tab-content" id="myTabContent">
<div aria-labelledby="home-tab" class="tab-pane fade show active" id="home" role="tabpanel">
<!--Semestres-->
<div class="flex-container">
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck1" type="checkbox" /> <label class="custom-control-label" for="customCheck1">Semestre <span class="num">1</span></label></div>
<p>Enero 17-2020<br />
Mayo 15-2020
</p>
</div>
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck2" type="checkbox" /> <label class="custom-control-label" for="customCheck2">Semestre <span class="num">2</span></label></div>
<p>Agosto 15-2020<br />
Diciembre 20-2020
</p>
</div>
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck3" type="checkbox" /> <label class="custom-control-label" for="customCheck3">Intersemestral</label></div>
<p>Enero 17-2020<br />
Mayo 15-2020
</p>
</div>
<div class="col-lg-12 fechas">
<div class="row">
<div class="col-lg-9"> </div>
<div class="col-lg-3">
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Organizar por:</option>
<option>Fecha Inicio</option>
<option>Fecha Final</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!--Formulario de Busqueda-->
<div class="Formulario_calndario">
<div class="row">
<div class="col-lg-4">
<div class="form Formulario_busqueda">
<div class="input-group espacio">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fas fa-search">
<!--icono-->
</i>
</button>
</div>
<input class="form-control" name="search" placeholder="¿Qué estás buscando?" type="text" />
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Tipo de programa</option>
<option>Pregrado</option>
<option>Posgrado</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Categoria</option>
<option>Cierre académico</option>
<option>Comité de idiomas</option>
<option>Exámenes finales</option>
<option>Homologaciones, reconocimientos y validaciones</option>
<option>Inicio y finalización de clases</option>
<option>Otras actividades de la vida universitaria</option>
<option>Pago de matrículas</option>
<option>Proceso de inducción</option>
<option>Publicación de grupos cancelados</option>
<option>Recesos y vacaciones</option>
<option>Registro de asignaturas</option>
<option>Reporte de notas</option>
<option>Reserva de cupo, re activaciones de cupo y reintegros</option>
<option>Retiro de asignaturas</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Tipo de programa</option>
<option>Escuela de Administración</option>
<option>Escuela de Medicina y Ciencias de la Salud</option>
<option>Escuela de Ciencias Humanas</option>
<option>Facultad de Economía</option>
<option>Facultad de Jurisprudencia</option>
<option>Facultad de Estudios Internacionales, Políticos y Urbanos</option>
<option>Facultad de Ciencias Naturales</option>
<option>Facultad de Creación</option>
<option>Escuela de Ingeniería, Ciencia y Tecnologí</option>
</select>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fas fa-search">
<!--icono-->
</i>
</button>
</div>
<input class="form-control" name="search" placeholder="Programa" type="text" />
</div>
</div>
<div class="form-group">
<p><a aria-controls="multiCollapseExample1" aria-expanded="false" class="Fecha" data-toggle="collapse" href="#multiCollapseExample1" role="button">Seleccione un mes</a></p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body"><input class="form-control" id="example-date-input" type="date" value="2011-08-19" /></div>
</div>
</div>
</div>
<div class="form-group">
<p><a aria-controls="multiCollapseExample2" aria-expanded="false" class="Fecha" data-toggle="collapse" href="#multiCollapseExample2" role="button">Seleccione un mes</a></p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
<p>Fecha inicial</p>
<input class="form-control" id="example-date-input" type="date" value="2011-08-19" />
<p>Fecha final</p>
<input class="form-control" id="example-date-input" type="date" value="2011-08-19" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<input class="btn btn-primary" type="submit">Buscar</input>
</div>
<div class="col-md-6">
<input class="btn btn-primary Limpiar" type="submit">Limpiar</input>
</div>
</div>
</div>
</div>
</div>
<actividades></actividades>
</div>
</div>
</div>
</div>
</div>
<script src="codigo.js"></script>
</body>
</html>
That's my javascript code:
//componentes
Vue.component('actividades', {
template: /*html*/
`
<div class="col-lg-8">
<template v-for="item of actividades">
<div class="row Programa-especifico">
<div class="col-md-4 col-lg-4 Fecha">
<div class="row">
<div class="col-md-2 col-lg-2">
<i class="far fa-calendar">
<!--icono-->
</i>
</div>
<div class="col-md-10 col-lg-10 px-5"><strong class="titulo">Marzo 08</strong> <span>Abril 17 2020</span></div>
</div>
<div class="mt-3 txt">
<strong>Tipo de programa</strong> <span>{{ item.tipoPrograma }}</span><br />
<strong>Facultad</strong> <span>{{ item.facultad }}</span><br />
<strong>Programa</strong> <span>{{ item.programa }}</span><br />
<strong>Categoria</strong> <span>{{ item.categoria }}</span>
</div>
</div>
<div class="col-md-8 col-lg-8 Descripcion">
<p class="titulo">{{ item.contenido }}</p>
<!--
<p class="txt">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
-->
<!--
<i class="fas fa-map-marker-alt">
</i>
-->
<!--
<strong>Lugar:</strong> <span class="txt">Universidad del Rosario, Sede, Claustro, Aula Mutis</span><br />
<i class="far fa-calendar">
</i>
-->
<strong>Fecha de inicio:</strong> <span class="txt">
Marzo, de {{ year(item.fechaInicio) }}
</span><br />
<strong>Fecha de cierre:</strong> <span class="txt">12 Marzo, de 2020</span><br />
<!--
<i class="far fa-clock">
</i>
<strong>Hora:</strong> <span class="txt">De 8:00 a.m. a 12:30 p.m</span>
-->
<div class="row">
<div class="col-lg-3 Semestre_uno">{{ item.periodo }}</div>
<div class="col-lg-3 Cerrado">Cerrado</div>
</div>
</div>
</div>
</template>
</div>
`,
computed: {
...Vuex.mapState(['actividades','programas']),
},
methods: {
...Vuex.mapActions(['llamarJson']),
...Vuex.mapMutations(['year'])
}
});
//VueEx
const store = new Vuex.Store({
state: {
actividades: [],
programas: []
},
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.actividades = llamarJsonAction.Nueva_estructura_proveedor;
state.programas = llamarJsonAction.BD_programas;
},
year(date){
return String(date).substr(8, 2);
}
},
actions: {
llamarJson: async function({ commit }){
const data = await fetch('calendario-2021-prueba.json');
const dataJson = await data.json();
commit('llamarJsonMutation', dataJson);
}
}
});
//Vue
new Vue({
el: '#caja-vue',
store: store,
created() {
this.$store.dispatch('llamarJson');
}
});

Do not return the value in mutation. Mutations are for mutating states in vuex. Instead, add a property to state as year then in the mutaitioner just add :
state.year = String(date).substr(8, 2);
Then in your component and in computed add:
year(){
return this.store.state.year;
}
And now, you can access {{year}} in your template.

Whenever a link is clicked content to the ngcontainer of that link should take over the modal but how to do it with mutiple ngcontainers?

I have a modal and inside it i have a stepper which is connected to some links, what i want to do is whenever a person clicks on the link the content of that link should be displayed which are defined inside ngcontainers each link have contents of their own and when their respective link is clicked the content of that ngcontainer should only display!
Here's what i am doing now but how do i alter the ngIf in the first parent ngcontainer when i would have multiple ngcontainers for the links?
<div>
<div class="modal-header lead">
Generate Reports
</div>
<div>
<ul class="timeline w-75">
<li class="bg-info">
<div class="timeline-item">
<span class="timeline-icon material-icons text-info">brightness_1</span>
<span class="text-dark">Select Report</span>
</div>
</li>
<li [ngClass]="isSecondStep?'bg-info':'bg-secondary'">
<div class="timeline-item">
<span class="timeline-icon material-icons"
[ngClass]="isSecondStep?'text-info':'text-secondary'">brightness_1</span>
<span class="text-dark">Generate Report</span>
</div>
</li>
</ul>
</div>
<ng-container *ngIf="!isSecondStep">
<div>
<h4><a (click)="isSecondStep=!isSecondStep" class="text-link text-main">Head/Approver Report</a></h4>
<a>A report containing list of all departments along with it's heads and approvers.</a>
</div><br>
<div>
<h4>Student Dues Application Status Report</h4>
<a>A report containing list of all departments along with it's head and approvers.</a>
</div><br>
<div>
<h4>Student Details Report</h4>
<a>A report containing all relevant details pertaining to students registers in this institute for the current</a>
</div><br>
<div>
<h4>Staff/Faculty Details Report</h4>
<a>A report containing all relevant details pertaining to staff/Faculty of your institute.</a>
</div><br>
<div>
<h4>Dues Details Report</h4>
<a>A report containing the details related to total accumulated dues.</a>
</div><br>
</ng-container>
<ng-container *ngIf="isSecondStep">
<div>
<h4><a class="text-main">Head/Approver Report</a></h4>
</div><br>
<div class="text-left">
<label class="mt-1">Scope</label>
<div class="row">
<div class="col-sm-6 radio">
<label class="text-secondary vertical-center">
<input type="radio" class="mr-1" name="scope">Institute</label>
</div>
<div class="col-sm-6 radio">
<label class="text-secondary vertical-center">
<input type="radio" class="mr-1" name="scope" checked>Department</label>
</div>
</div>
</div><br>
<div>
<label class="mt-1 text-left">Department</label><br>
<select>
<option [ngValue]="null">Select Department</option>
<option [ngValue]="dept.id" *ngFor="let dept of departments">{{dept.name}}</option>
</select>
</div><br>
<div class="d-flex justify-content-around">
<div class="p-4">
<span class="material-icons text-main">get_app</span>
<div class="text-link text-main text-left">Download</div>
</div>
<div class="p-4">
<span class="material-icons text-main">print</span>
<div class="text-link text-main text-left">Print</div>
</div>
<div class="p-4">
<span class="material-icons text-main">clear</span>
<div class="text-link text-main text-left">Close</div>
</div>
</div>
</ng-container>
</div>

I tried to display the value of radio buttons using class name

I'm still new in coding. I hope I can get a kind response from you.
Please bear with me :) thanks
Anws,
I tried to display the value of these radio buttons but still it won't display.
May I know on how can I get the value of .custom-control-input when I choose a radio button using javascript?
May I know where I did it wrong?
PS: I didn't add the css here yet, what just I need is to display the value of these radio buttons.
function otcContinue_onClick() {
var tac = document.getElementsByClassName('custom-control-input');
if (tac.checked) {
if ($("input[name=exampleRadios]:checked").val()) {
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
} else {
$('#errorMsg').text("Please select preferred payment option.");
$('#modalError').modal('show');
}
}
}
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>

I have change your JS so when you click on an input you get the returned value it has. In this case - otc_sm.
$("input[name=exampleRadios]").on('click', function() {
console.log($(this).val());
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>

Toggle Disabled to Unable Text Fields in Sections

I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!

You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/

Categories

Resources