I've some piece of code in HTML code,
<label class="color">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
How do I convert this html code into codeigniter with form helper Form Control?
Try with this code :
Note : First load form_helper either in autoload.php or in controller
Assuming that checkbox name is username
<?=form_label(form_checkbox('username','',['checked' => TRUE]).'<span class="slider round"></span>','username',['class' => 'color']);?>
Output :
<label for="username" class="color">
<input type="checkbox" name="username" value="" checked="checked" />
<span class="slider round"></span>
</label>
For more : https://www.codeigniter.com/userguide3/helpers/form_helper.html
Related
I hope you are good!
I built this piece of code, which results in the following design of a checklist, in which I am able to select multiple items from a list -
<!DOCTYPE html>
<html>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="item1" name="item1" value="Tshirt">
<label for="item1"> Tshirt</label><br>
<input type="checkbox" id="item2" name="item2" value="Jeans">
<label for="item2"> Jeans</label><br>
<input type="checkbox" id="item3" name="item3" value="Shirt">
<label for="item3"> Shirt</label><br>
<input type="checkbox" id="item4" name="item4" value="Trousers">
<label for="item4"> Trousers</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The checklist I get :
And when I choose some items and click submit [for this time I chose Jeans & Trousers], I get my response in this format : item2=Jeans&item4=Trousers. Unfortunately, I cannot further work with this kind of response format...
The format I need should be more like : Jeans , Trousers. No item-ids, and no = signs - just their display names... Is it possible to get a response like that?
Any help would be appreciated! Thanks a lot! 🙂
Edit : Here's the code I took inspiration from - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_checkbox
You can get an array of values in your backed using name format like myarrayName[]. The name attribute doesn't have to be unique. For example:
<form action="" method="post">
<input type="checkbox" id="item1" name="item[]" value="Tshirt">
<label for="item1"> Tshirt</label><br>
<input type="checkbox" id="item2" name="item[]" value="Jeans">
<label for="item2"> Jeans</label><br>
<input type="checkbox" id="item3" name="item[]" value="Shirt">
<label for="item3"> Shirt</label><br>
<input type="checkbox" id="item4" name="item[]" value="Trousers">
<label for="item4"> Trousers</label><br><br>
<input type="submit" value="Submit">
</form>
I have a for loop that displays the data into multiple radio-buttons (bootstrap):
<div class="radio" >
<label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
<input type="radio" name="optradio" id="choice.id"> [[choice.content]]
</label>
</div>
As you can see, I wanted to use the choice.id for id="..." in each button, technically it should look something like this:
<input type="radio" name="optradio" id="1"> Choice1
<input type="radio" name="optradio" id="2"> Choice2
<input type="radio" name="optradio" id="3"> Choice3
But it renders it with the actual string choice.id:
<input type="radio" name="optradio" id="choice.id"> Choice1
<input type="radio" name="optradio" id="choice.id"> Choice2
<input type="radio" name="optradio" id="choice.id"> Choice3
Forgive my naiveness. Any help/advices? Thanks a lot!
It renders with choice-id string because you add plain string as the id value, not a variable value
You can use v-bind directive or the shorthand for v-bind -> :id
<div class="radio" >
<label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
<input type="radio" name="optradio" v-bind:id="choice.id"> [[choice.content]]
</label>
</div>
using shorthand <input type="radio" name="optradio" :id="choice.id">
To answer your questions in the comments.
You can ' separate 'the radios by adding them in a ' group ' using the name attribute. Radios with the same name attribute are in one group. Changing their values won't affect other radios in other groups ( with different name attributes ). See example below.
Or you can use vue v-model to separate and get the selected options.
new Vue({
el: "#radio-app",
data: {
question1: '',
question2: ''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://github.com/vuejs/vue-devtools"></script>
Question1:
<input type="radio" name="question1" id="q1choice1" value="choice1"/>
<input type="radio" name="question1" id="q1choice2" value="choice2"/>
Question2:
<input type="radio" name="question2" id="q2choice1" value="choice1"/>
<input type="radio" name="question2" id="q2choice2" value="choice2"/>
<hr />
<h2> Or with VUE v-model </h2>
<div id="radio-app">
Question1:
<input type="radio" id="q1choice1vue" value="choice1" v-model="question1">
<input type="radio" id="q1choice2vue" value="choice2" v-model="question1">
Question2:
<input type="radio" id="q2choice1vue" value="choice1" v-model="question2">
<input type="radio" id="q2choice2vue" value="choice2" v-model="question2">
<div>Question 1 selected answer: {{ question1 }}</div>
<div>Question 2 selected answer: {{ question2 }}</div>
</div>
Check more here
VUE template syntax
v-bind directive
Use: v-bind:id="choice.id" or the short version :id="choice.id"
I am using selenium and python 3.X to login into a bank.
I have a input type="radio" class="switch-input" with two options Personal/Business when default is Personal
elem1=browser.find_element_by_id('business')
elem2=browser.find_element_by_id('personal')
and checking with
elem1.get_attribute('checked')
elem2.get_attribute('checked')
I am getting the expected results (True for the elem2 and None for elem1)
But when using elem2.click() i am getting error :
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
I tried to change to find_element_by_xpath and to wait but the same results.
Any ideas?
Here is the HTML code:
<div class="custom-switch">
<div class="switch switch-blue">
<input type="radio" class="switch-input" name="view" id="personal" value="Personal" checked="checked" />
<label for="personal" class="switch-label switch-label-on personal">Personal</label>
<input type="radio" class="switch-input" name="view" id="business" value="Business" />
<label for="business" class="switch-label switch-label-off business">Business</label>
<span class="switch-selection"></span>
</div>
</div>
The answer was to press on the label
browser.find_element_by_xpath('//label[#for=\'business\']').click()
I am new to Vue.js. Basically, I have two checkboxes and I want them to behave like a radio-buttons (I know I can use a radio but I wanna know what the problem is) It works fine in Safari, but not in Chrome.
these are the checkboxes:
<label class="list-display" for="list-box">
<input type="checkbox" id="list-box" v-model="list"
v-on:click='mini=!list'>
<span class="switch">
<p>list</p>
</span>
</label>
<label class='list-display' for="mini-box">
<input type="checkbox" id="mini-box" v-model="mini"
v-on:click='list=!mini'>
<span class="switch">
<p>mini</p>
</span>
</label>
and in data I declare
list: true,
mini: false,
It checks the first box #mini-box when it loads but when the boxes are clicked the both toggle true or false
Thank you for any help!
Due to different browser behavior, you can bind event using $nextTick like this to prevent inconsistency. Seems this is more readable and traceable than using watcher.
<label class="list-display" for="list-box">
<input type="checkbox" id="list-box" :value="list" #click="$nextTick(()=>{mini = !(list=$event.target.checked)})">
<span class="switch">
<p>list</p>
</span>
</label>
<label class='list-display' for="mini-box">
<input type="checkbox" id="mini-box" :value="mini" #click="$nextTick(()=>{list = !(mini=$event.target.checked)})">
<span class="switch">
<p>mini</p>
</span>
</label>
How do I get a value of 1 if it is checked and a value of 0 if not using Typescript? I am using a materialize framework.
Here's the code for it:
<div class='switch'>
<label>
Deactivate
<input name='switch_Activate' type='hidden' value='0'>
<input id='active' name='switch_Activate'
type='checkbox' onclick='onActive(this.id)' checked value='1'>
<span class='lever'></span>
Activate
</label>
</div>
function
onActive(){
}
Thank you!
You can use type="radio" inputs and bind its to ngModel
<input type="radio" name="switch_Activate" [value]="0" [(ngModel)]="switchModel">
<input type="radio" name="switch_Activate" [value]="1" [(ngModel)]="switchModel">