<div class="lang_selection"><input id="lang_0" name="language[]"
value="0" type="checkbox"><label for="lang_0">English</label>
</div>
<div class="lang_selection"><input id="lang_25" name="language[]"
value="25" type="checkbox"><label for="lang_25">Arabic</label>
</div>
<div class="lang_selection"><input id="lang_22" name="language[]"
value="22" type="checkbox"><label for="lang_22">Portuguese-
Brazil</label></div>
<div class="lang_selection"><input id="lang_23" name="language[]"
value="23" type="checkbox"><label for="lang_23">Bulgarian</label>
</div>
<div class="lang_selection">
<input id="lang_19" name="language[]" value="19" type="checkbox">
<label for="lang_19">Czech</label>
</div>
I tried this code
value = soup.find('input', {'name': 'language[]'}).get('value')
but give me error:'NoneType' object is not subscriptable
I want to get a array list of the value number [0,25,22,23,19]
You can use CSS selector, so it will become one liner:
print([int(i['value']) for i in soup.select(r'input[name^=language]') if 'value' in i.attrs])
Prints:
[0, 25, 22, 23, 19]
input[name^=language] will select all <input> tags, that the attribute name begins with language.
You need this perhaps:
rangeLen = len(soup.findAll(attrs={"name" : "language[]"}))
language = soup.findAll(attrs={"name" : "language[]"})
valueList = list()
for i in range(rangeLen):
valueList.append(int(language[i]['value']))
print(valueList)
Output:
[0, 25, 22, 23, 19]
Related
I have a nested loop in a vue component. The first loop is to create four dropdown boxes, the second loop is to create three options within each dropdown box. I have attached the image to illustrate. They work correctly in that if I select the checkbox for any of the options within any dropdown box then the correct outcome occurs. The problem is that if I click the word next to the checkbox then always the corresponding option in the first dropdown box is selected, which is not acceptable. So, if I click the checkbox next to 3b then everything is fine; if I click the 'b' next to the checkbox (which is likely for a user to do), then 1b will be selected.
How can I make clicking the 'b' in this case select 3b instead of 1b?
template code
<b-list-group v-for="number in numbers" v-bind="number">
<b-button v-b-toggle=number class="m-1 flood-button">{{ number }} </b-button>
<b-collapse :id="number">
<b-card>
<b-list-group>
<b-list-group-item v-for="letter in letters" v-bind="letter" class="list-group-item">
<label :for=letter>
<input :id="letter" type="checkbox" #change="toggleLayerVisibility({
'floodType': ft,
'risk': $event.target.id,
'display': $event.target.checked
})">
{{ letter }}
</label>
</b-list-group-item>
</b-list-group>
</b-card>
</b-collapse>
</b-list-group>
component data
data () {
return {
letters: ["a", "b", "c"],
numbers: ["1", "2", "3", "4"]
}
}
screenshot
It happens because the input id was the same for all inputs with the same letter, so 1b and 3b have the same id. Try to modify the id attribute, e.g. add a number to differentiate ids.
new Vue({
el: '#app',
data() {
return {
letters: ["a", "b", "c"],
numbers: ["1", "2", "3", "4"]
}
},
methods: {
toggleLayerVisibility() {},
}
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>
<div id="app">
<b-list-group v-for="number in numbers" v-bind="number">
<b-button v-b-toggle=number class="m-1 flood-button">{{ number }} </b-button>
<b-collapse :id=number>
<b-card>
<b-list-group>
<b-list-group-item v-for="letter in letters" v-bind="letter" class="list-group-item">
<label :for="letter + number">
<input :id="letter + number" type="checkbox" #change="toggleLayerVisibility({
'floodType': ft,
'risk': $event.target.id,
'display': $event.target.checked
})">
{{ letter }}
</label>
</b-list-group-item>
</b-list-group>
</b-card>
</b-collapse>
</b-list-group>
</div>
when I edit a dict in a array which has been cloned from another dict,the value of the other cloned dictionaries also changes. Is there a way where i can change only the specified dictionary value??
<template v-for="stage in clonedstages">
<p v-text="stage.name" #click="stagedisplay=true" > </p>
<stage header="Stage Edit" :visible.sync="stagedisplay" :modal="true">
<div>
<div class="form-group">
<label for="stagename">Stage name </label>
<input type="text" class="form-control" id="stagename" v-model="[index]clonedstages.name">
</div>
</div>
<button class="btn btn-secondary" #click="stagedisplay=false">Done</button>
</stage>
</template>
<div class="col-sm">
<button class="btn-sm btn-primary" #click="Gd">GD</button>
`
interview: {
stage_type : 1,
description : "something",
name : "Interview"
},
clonedstages: [],
this is the dict,
Interview(){
vue_create.clonedstages.push(vue_create.interview);
},
this is the method.
I am new to this.
this is my code :
<b-form #submit="onSubmit" #reset="onReset" >
<b-card v-for="(item, index) in items" :key="item.name">
<input type="file"
style="visibility:hidden;"
id="file"
ref="file"
#click="printIndex(index)" #change.once="handleFileUpload($event.target,$event.target.files)"
/>
{{index}}
</b-card>
</b-form>
my model :
items: [{
name: "soldat",
margin: 3,
labour: 2,
finition: 1,
demandMax: 40,
demandMin: 0
},
{
name: "train",
margin: 2,
labour: 1,
finition: 1,
demandMax: 800,
demandMin: 0
}
]
printIndex() function only prints 0, while it should print 1 when I click on the second displayed input object .
The {{index}} displays correctly 1 on the second object (train) .
It is like the INPUT can't access the INDEX variable, because it is a v-for .
Do you experiment the same behavior ?
With a modified vue code like this :
<b-card v-for="(item, index) in items" :key="item.index" #click="printIndex(index)">
<input type="file"
style="visibility:hidden;"
id="file"
ref="file"
#change.once="handleFileUpload($event.target,$event.target.files)"
/>
</b-card>
printIndex() is triggered 2 times when clicking on INPUT , and also gives 0 the second time, while it should only display the index 1 when clicking on my second object, just like in angularJs.
I have no solution, I am bloqued. If anyone has a solution, i would really appreciate it .
This is the printIndex method :
printIndex(index){
console.log(index)
}
EDIT : Excuse me, Some code was missing, added the #change . I suspect that there is a conflict between both #change and #click.
EDIT 2 :
<input v-model="index" #click="printIndex(index)"></input>
is working perfectly inside the v-for loop, the error seems to be linked to type="file" : this is the error :
**File inputs are read only. Use a v-on:change listener instead.**
EDIT 3 resolved, thank you
I have placed the printIndex() function above the hidden button , in the label, like this :
<label for="file" class="btn btn-secondary btn-block" #click="printIndex(index)">
<i class="fas fa-user-astronaut"></i>
<span class="d-none d-sm-block">Change picture</span>
</label>
<input
type="file"
style="visibility:hidden;"
id="file"
ref="file"
#change="handleFileUpload($event.target,$event.target.files)"
accept="image/*"
/>
The main problem was that an input type ="file" is readonly, so you can't access his index .
Your model objects doesn't have any index property so :key="item.index" is just wrong. Use :key="index" instead...
EDIT 3 resolved, thank you
I have placed the printIndex() function above the hidden button , in the label, like this :
<label for="file" class="btn btn-secondary btn-block" #click="printIndex(index)">
<i class="fas fa-user-astronaut"></i>
<span class="d-none d-sm-block">Change picture</span>
</label>
<input
type="file"
style="visibility:hidden;"
id="file"
ref="file"
#change="handleFileUpload($event.target,$event.target.files)"
accept="image/*"
/>
The main problem was that an input type ="file" is readonly, so you can't access his index .
In a web form, using Vuejs, I would like to implement a multiple choice question with a sub-question for each item.
For instance, the question could look like this:
What type of vehicle do you use, and how often ?
A) Aeroplane (chekbox), Every day / Once a month / once a year (radio),
B) Train (checkbox), Every day / Once a month / Once a year (radio),
C) Donkey (checkbox), Every day / Once a month / Once a year (radio),
D) (and so on).
I can imagine that my html could look something like this :
<div class="form-group">
<div class="line" v-for="(type, index) in listOfVehicles">
<input type="checkbox" v-bind:value="index" v-bind:id="index" v-model="???">
<label v-bind:for="index">{{type}}</label>
<div class="subquestion" v-for="(sub, id) in listOfSubQuestions">
<input type="radio"
v-bind:value="id"
v-bind:id="'sub-' + index + '-' + id"
v-model="???">
<label v-bind:for="'sub-' + index + '-' + id">{{sub}}</label>
</div>
</div>
</div>
where my Vue instance would have listOfVehicles and listOfSubQuestions as arrays in my data.
Ideally, I would like all the respondent's input to be stored in a single array called for instance answers.
As an example, if answers A and C have been ticked, answers could look something like: [{vehicle: 'A', frequency: 'Once a year'},{vehicle: 'C', frequency: 'Every day'}].
But I have no clue how to make this work.
I quickly made something if this is what you need. Its my first time answering a question hope this can help you out. You can add a button and store a new object every-time you click the button,
which can result something like the example you mentioned.
new Vue({
el: "#app",
data: {
vehicle: [],
frequency: '',
result: []
},
methods: {
save() {
const result = {
vehicle: this.vehicle,
frequency: this.frequency
}
this.result.push(result)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>What type of vehicle do you use, and how often ?</h2>
<div>
<label for="plane">Aeroplane</label>
<input id="plane" type="checkbox" value="aeroplane" v-model="vehicle">
<label for="car">car</label>
<input id="car" type="checkbox" value="car" v-model="vehicle">
<label for="train">train</label>
<input id="train" type="checkbox" value="train" v-model="vehicle">
<div>
<label for="plane">everyday</label>
<input type="radio" name="options" value="everyday" v-model="frequency">
<label for="plane">monthly</label>
<input type="radio" name="options" value="monthly " v-model="frequency">
<label for="plane">yearly</label>
<input type="radio" name="options" value="yearly" v-model="frequency">
</div>
<button #click="save">submit</button>
<p>{{result}}</p>
</div>
</div>
I have input sections like so:
<div class="cloneable" data-id="0">
<div class="col-md-9">
<div class="form-group">
<label>Skills and Qualifications Titles</label>
<input placeholder="ex : PHP, WordPress" name="skill.name" type="text" class="form-control" vmodel="skill.name">
<span class="help-block text-danger" v-text="errors.get('skill.name')"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Skill Level %</label>
<input placeholder="ex : 90" name="skill.percentage" type="text" class="form-control" v-model="skill.percentage">
<span class="help-block text-danger" v-text="errors.get('skill.percentage')"></span>
</div>
</div>
</div>
Each section can be cloned to make a duplicate, so I am trying to array my data so I can access it backend like
skill[0]['name']
skill[1]['name']
skill[2]['name']
... etc
I am initiating the data like so:
skill: [
{
'name': '',
'percentage': ''
}
],
I have tried using the models like skill.index.name, but that doesn't work, how can I achieve what I am trying to do above?
If I understand, you have an array of skills like:
skill: [
{'name': 'a_name', 'percentage': '20'}
{'name': 'b_name', 'percentage': '30'}
],
and you want to access a particular member of that array in your template. The normal way the arrays end up in templates is using a v-for: like:
<li v-for="a_skill in skill">
{{ a_skill.name }}
</li>
…which would like all the skills in the array.
If you want to access a particular member of that array you will need to add the index like this:
<input v-model="skill[0].name"> // not skill.0.name
(don't forget the hyphen in v-model it's missing in your example)
You can even do that if you have some data you want to use as the index. For example:
data () {
return {
skill: [
{"name": "Foo"},
{"name": "Bar"}
],
i: 1
}},
Then you could use this in your template:
<input v-model="skill[i].name">