Get all values for elements in a div - html

I have a for loop in and it generation id for div
i need to get all values for elements in a div when click any element at div
<div id="{{ item3.id }}" (click)="getChildren($event)">
<input type="checkbox" name="status" [checked]="item3.templatesFields.status"/>
<input type="checkbox" name="inMain" [checked]="item3.templatesFields.inMain" />
</div>
and this ts code
public getChildren(e) {
}

Try This
getChildren(e)
{
if (e.target.children.length!=0) {
var g=Array.from(e.target.children).forEach(y=>console.log(y.value))
console.log(g);//here your values
}

<div id="{{ item3.id }}" (click)="getChildren(ch1, ch2)">
<input type="checkbox" name="status" #ch1 [checked]="item3.templatesFields.status"/>
<input type="checkbox" name="inMain" #ch2 [checked]="item3.templatesFields.inMain" />
</div>
via TS you will see the nativeElement of both your checkboxes
getChildren(ch1: any, ch2: any){
console.log(ch1);
console.log(ch2);
}

Related

Input radio bottom width jquery and hiide show div

I am trying to use jquery following the documentation but don't work pkease help me
I would that when I click on a specific radio value it display the div relationated
<script>
$(document).ready(function(){
$('input:radio[name=settore]:checked').change(function() {
if($("input[name='settore']").val() == '1');
$("div#pos-animatore").show();
if($("input[name='settore']").val() == '2');
$("div#post-risto").show();
});
});
</script>
<body>
<div>
<input type="radio" name="settore" value="!"><label for"animazione"> Animazione</label>
<input type="radio" name="settore" value="2"><label for"lavoro-an">Ristorante</label>
<input type="radio" name="settore" value="3"><label for"lavoro-an">Hotel</label>
</div>
<p></p>
<div id="pos-animatore" style="display: none;">
contenuto
</div>
<div id="pos-risto" style="display: none;">
contenuto2 </div>
<div id="pos-hotel" style="display: none;">
contenuto3
</div>
</body>
There are a few errors in your code, I'm afraid.
Some incorrect jQuery selectors (notably :checked), a mistyped value (! instead of 1) and a misspelt ID attribute.
Your working code (with comments) is:
//When the DOM document is ready... execute the following...
$(document).ready(function(){
// Select all INPUT elements with name="settore" and bind to the change event
$('input[name=settore]').change(function() {
// Hide all the divs initially, as I'm assuming you only want to display the one relevant one
$("div#pos-animatore,div#pos-risto,div#pos-hotel").hide();
// If the value of the CHANGED (this) element is 1... etc
if($(this).val() == '1'){
$("div#pos-animatore").show();
} else if($(this).val() == '2'){
$("div#pos-risto").show();
} else if($(this).val() == '3'){
$("div#pos-hotel").show();
}
});
});
<div>
<input type="radio" name="settore" value="1" id="animazione"><label for="animazione"> Animazione</label>
<input type="radio" name="settore" value="2" id="lavoro-an1"><label for="lavoro-an1">Ristorante</label>
<input type="radio" name="settore" value="3" id="lavoro-an2"><label for="lavoro-an2">Hotel</label>
</div>
<p></p>
<div id="pos-animatore" style="display: none;">
contenuto
</div>
<div id="pos-risto" style="display: none;">
contenuto2
</div>
<div id="pos-hotel" style="display: none;">
contenuto3
</div>

Abnormal behaviour of radio button when click

I have created a radio button in parent and child relationship. Like main is parent and sub is its child.
When I checked the parent div radio button, and after that trying to checked the its child div radio button, then parent div radio button automatically unchecked. I don't know how ?
Here is the code .
import React from 'react';
class Body extends React.Component {
constructor(props) {
super(props);
this.state = {
length :1,
arr:[{
subLen:2
},{
subLen:0
},{
subLen:1
}]
}
this.addMain = this.addMain.bind(this);
this.addSub = this.addSub.bind(this);
}
addMain(event) {
let temp = this.state.arr;
temp.push({subLen:0});
this.setState({arr:temp});
}
addSub(event,i){
console.log("add sub click ",i);
let temp = this.state.arr;
temp[i].subLen=temp[i].subLen+1;
this.setState({arr:temp},()=>{
console.log(this.state.arr);
});
}
render() {
return (
<div>
{
this.state.arr.map((e1,i1)=>{
return <div>
<h1>Main part</h1>
<input type="text" name={`${i1}name`}
placeholder="Enter name"/><br/>
Male:<input type="radio" name=
{`${i1}gender`} value="Male"/>
Female:<input type="radio" name=
{`${i1}gender`} value="Female"/>
{e1.subLen> 0 && <h2>Sub Part</h2>}
{e1.subLen > 0 &&
Array(e1.subLen).fill().map((e2,i2)=>{
return <div>
<input type="text" name=
{`${i2}name`} placeholder="Enter name"/><br/>
Male:<input type="radio" name=
{`${i2}gender`} value="Male"/>
Female:<input type="radio" name=
{`${i2}gender`} value="Female"/>
</div>
})
}
<button onClick=
{(event)=>this.addSub(event,i1)}>Add Sub</button>
</div>
})
}
<button onClick={this.addMain}>Add More</button>
<button onClick=
{()=>console.log(this.state.arr)}>Show</button>
</div>
)
}
}
export default Body;
As you see in the image that while clicking the sub part radio buttons main part radio button unchecked automatically
I don't know why this is happening ?
Issue
Because you are using an array index as part of the radio input name and with the same suffix (i.e. "gender") they become part of the same radio button group.
Solution
Use more specific names to disambiguate the main inputs from the sub inputs.
I suggest "main-${index}-name" and "main-${index}-gender" for the main inputs, and "sub-${index}-name" and "sub-${index}-gender" for the sub inputs.
{this.state.arr.map((e1, i1) => {
return (
<div>
<h1>Main part</h1>
<input type="text" name={`main-${i1}-name`} placeholder="Enter name" />
<br />
Male:
<input type="radio" name={`main-${i1}-gender`} value="Male" />
Female:
<input type="radio" name={`main-${i1}-gender`} value="Female" />
{e1.subLen > 0 && <h2>Sub Part</h2>}
{e1.subLen > 0 &&
Array(e1.subLen)
.fill()
.map((e2, i2) => {
return (
<div>
<input
type="text"
name={`sub-${i2}-name`}
placeholder="Enter name"
/>
<br />
Male:
<input type="radio" name={`sub-${i2}-gender`} value="Male" />
Female:
<input type="radio" name={`sub-${i2}-gender`} value="Female" />
</div>
);
})}
<button onClick={(event) => this.addSub(event, i1)}>Add Sub</button>
</div>
);
})}

HTML forms are a mystery

I am taking a Vue.js course and I just learned about forms and managing them(the code is down below). I don't understand how does the tag work. It's value is determined by the option value and the selected text is the text of that specific option? Also, I am confused when it comes to checkboxes and Vue. Why do the checkboxes need different "value"s when you use v-model on that checkbox? Why would I want to create a checkbox group (inputs with the same value for the name attribute)? I don't really understand how v-model works with forms and I would love to. Thanks in advance for the person that's taking time to help me.
The Code
<template>
<form #submit.prevent="submitForm">
<div class="form-control">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model="userName" />
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
<input id="age" name="age" type="number" v-model.number="userAge" />
</div>
<div class="form-control">
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer" v-model="referrer">
<option value="google">Google</option>
<option value="wom">Word of mouth</option>
<option value="newspaper">Newspaper</option>
</select>
{{ referrer }}
</div>
<div class="form-control">
<h2>What are you interested in?</h2>
<div>
<input id="interest-news" name="interest" value="news" type="checkbox" v-model="interests"/>
<label for="interest-news">News</label>
</div>
<div>
<input id="interest-tutorials" name="interest" value="tutorials" type="checkbox" v-model="interests"/>
<label for="interest-tutorials">Tutorials</label>
</div>
<div>
<input id="interest-nothing" name="interest" value="nothing" type="checkbox" v-model="interests"/>
<label for="interest-nothing">Nothing</label>
</div>
</div>
<div class="form-control">
<h2>How do you learn?</h2>
<div>
<input id="how-video" name="how" value="video" type="radio" v-model="how"/>
<label for="how-video">Video Courses</label>
</div>
<div>
<input id="how-blogs" name="how" value="blogs" type="radio" v-model="how"/>
<label for="how-blogs">Blogs</label>
</div>
<div>
<input id="how-other" name="how" value="other" type="radio" v-model="how"/>
<label for="how-other">Other</label>
</div>
</div>
<div class="form-control">
<input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
<label for="confirm-terms">Agree to terms of use?</label>
</div>
<div>
<button>Save Data</button>
</div>
<div class="form-control">
<select></select>
</div>
</form>
</template>
<script>
export default {
data() {
return {
userName: "",
userAge: null,
referrer: "newspaper",
interests: [],
how: null,
confirm: false
};
},
methods: {
submitForm() {
// console.log("Username: " + this.userName);
// this.userName = "";
// console.log("User age: ");
// console.log(this.userAge);
// console.log(31);
// this.userAge = null;
// console.log("Referrer: " + this.referrer);
// this.referrer = "wom";
// console.log("Checkboxes: ");
// console.log(this.interests);
console.log("Radio Buttons");
console.log(this.how);
this.interests = [];
this.how = null;
// console.log('Confirm? ');
// console.log(this.confirm);
// this.confirm = false;
},
},
};
</script>
v-model is syntactical sugar for :value and #change
Instead of <input v-model="name">, you could use
<input :value="name" #update:model-value="v => name=v"> which would have the same result.
Here is an example that perhaps belabors it a bit.
const app = Vue.createApp({
data() {
return {
name: ""
}
}
})
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)"
>
`
})
app.mount("#app")
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<custom-input :value="name" #update:model-value="v => name=v"></custom-input><br />
<custom-input v-model="name"></custom-input><br />
<input :value="name" #update:model-value="v => name=v"><br />
<input v-model="name"><br />
Name: {{name}}
</div>
More info in v3 docs here

Show and hide html elements depending on radio selection

Yes, there are many posts that are kind of similar but not like mine I guess. After struggling for a while I'm not able to come up with a solution. I need help!
I have 4 different criteria:
Resident/Single, Resident/Family, Non-Resident/Single, Non-Resident/Family
For example: if Resident and Single are checked then show that div. The rest goes the same way.
<fieldset>
<ol id="membership">
<li>
<input type="radio" name="resident" value="Resident" checked="checked" /> Resident
<input type="radio" name="resident" value="Non-Resident" /> Non-Resident
</li>
<li>
<input type="radio" name="single" value="Single" checked="checked" /> Single
<input type="radio" name="single" value="Family" /> Family
</li>
</ol>
<div style="display: none;">
<div>Resident/Single</div>
<div>Resident/Family</div>
<div>Non-Resident/Single</div>
<div>Non-Resident/Family</div>
</div>
</fieldset>
This is as far as I was able to go.
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
$('div').show();
} else {
$('div').hide();
}
});
});
This is my repl: https://repl.it/#labanino/Show-based-on-selection#script.js
Instead of using ifs statement to show/hide divs you can simply get the checked values of radio button then just loop through your divs and compare if the .text() is equal to radio values show that divs only .
Demo Code :
$(document).ready(function() {
$(".category div:eq(0)").show() //show 1st div
$('input').change(function() {
//get radio values
var value = $("input[name='resident']:checked").val();
var value1 = $("input[name='single']:checked").val();
console.log(value + "/" + value1)
$(".category div").hide(); //hide all divs
var divss = value + "/" + value1;
//loop through divs
$(".category div").each(function() {
if ($(this).text() === divss) {
$(this).show() //show that div
}
})
});
})
.category > div {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<ol id="membership">
<li>
<input type="radio" name="resident" value="Resident" checked="checked" /> Resident
<input type="radio" name="resident" value="Non-Resident" /> Non-Resident
</li>
<li>
<input type="radio" name="single" value="Single" checked="checked" /> Single
<input type="radio" name="single" value="Family" /> Family
</li>
</ol>
<div class="category">
<div>Resident/Single</div>
<div>Resident/Family</div>
<div>Non-Resident/Single</div>
<div>Non-Resident/Family</div>
</div>
</fieldset>
Try selecting the divs by name or value and show them while hiding the others.
Check this repl -
https://repl.it/#DavidThomas12/Show-based-on-selection
I believe it fits your use case.

Angular 4 change layout

I have this two layouts:
<div *ngIf="!loginPanel" class="login1">
<a (click)="showLoginPanel()">Login</a>
</div>
<div *ngIf="loginPanel" class="login2">
<input type="text" placeholder="user">
<input type="password" placeholder="placeholder">
</div>
and the typescript:
public loginPanel: boolean;
constructor() { }
ngOnInit() {
this.loginPanel = false;
}
showLoginPanel() {
this.loginPanel = true;
}
In fact, the first div disappear when i click on login. but the second div doesn't replace the first. does anyone know how to do this correctly?
you can use the ngif else
<div *ngIf="!loginPanel; else loginForm" class="login1">
<a (click)="showLoginPanel()">Login</a>
</div>
<ng-template #loginForm>
<div class="login2">
<input type="text" placeholder="user">
<input type="password" placeholder="placeholder">
</div>
</ng-template>
i solve the problem. the else div should be ng-template... so, now its working.
thanks anyway