Showing html radio buttons using Perl? - html

I want to show 2 radio buttons used to select the gender of a student. When I try to set a variable using the CGI Perl module to produce html code for these radio buttons, only the radio selection text is showing, not the buttons:
$cInput_form .= $q->div({-class => 'control-group'},
$q->label({-class => 'control-label', -for => 'gender'}, "Gender:"),
$q->div({class => 'controls'},
$q->span({class => 'span12'},
$q->label({-class => 'blue'},
$q->radio_group({-id => 'gender',name => 'gender', -values => ['M','F'], -labels => \%labels, -default => $cGender, 'true'}), $q->span({-class => 'lbl'})))));
When I use the "Insepect element" tool in my web browser the html I see is:
<div class="control-group">
<label class="control-label" for="gender">Gender:</label>
<div class="controls">
<span class="span12">
<label class="blue">
<label>
<input type="radio" name="gender" value="M" checked="checked" id="gender" true="">
Male
</label>
<label>
<input type="radio" name="gender" value="F" id="gender" true="">
Female
</label>
<span class="lbl"></span>
</label>
</span>
</div>
</div>
I think the problem is that <span class = 'lbl'> is not in the right place, but I don't know where else it should be. Please help me.

I think the issue might be that you are grouping the radio_group within unnecessary label groups. This page shows code similar to your situation for wanting to create a gender selection radio button group.
Try changing your code to(reformatted to make it a little more readable):
$cInput_form .= $q->div({-class => 'control-group'},
$q->label({-class => 'control-label',
-for => 'gender'}, Gender:"),
$q->radio_group({-id => 'gender',
name => 'gender',
-values => ['M','F'],
-labels => \%labels,
-default => $cGender,
'true'}),
);
This is untested but I think gets across the point, just be careful when grouping 1 section inside another. Hope it helps!

Related

typeahead with restrictions using angular

i have created a typeahead with some names and i want to remove all already used name.
TS:
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
filter(term => term.length >=1),
map(term => this.coathangers.filter(coathangers => new RegExp(term, 'mi').test(coathangers.name)).slice(0, 20)),
)
HTML:
<label class="control-label" for="typeahead-basic">Kleiderbügel:
<input id="typeahead-basic" type="text" class="form-control" style="text-transform: capitalize"
[(ngModel)]="coathanger" [ngModelOptions]="{standalone: true}" [ngbTypeahead]="search"
[inputFormatter]="formatter" [resultFormatter]="formatter"
[editable]='false' class="field"/>
</label>
i want to remove or disabled all names that have already a borrower. with something like that if(user.hanher.name=== coathangers.name) then disavled or whatever. but i don't how i can do it or how i can include a if-condition in search =... or direct in the html
Do someone have any idea?

Html.CheckboxFor with clickable label not working

I am trying to implement a checkbox that has a clickable label with the Html.CheckboxFor syntax. However, I am running into an issue where my checkbox is not allowing me to click it to toggle its state and is not being set properly when the page is loaded even thought the checked attribute is correct.
From what I have been reading, it seems that this is do to the extra hidden input field that gets generated to pass back false values to the controller on a form submittal. However, I still need to figure out a way around this and I feel like I am not the first one to be looking for a solution.
Here is my HTML:
<div class="form-check">
#Html.CheckBoxFor(x => x.ProfilePublicViewable, new { #class = "form-check-input", #id = "val1", #value = "val1", #checked = "checked" })
<label class="form-check-label" for="val1">Profile Public Viewable</label>
</div>
And here is what gets rendered to the DOM:
<div class="form-check">
<input checked="checked" class="form-check-input" id="val1" name="val1" type="checkbox" value="val1">
<input name="ProfilePublicViewable" type="hidden" value="false">
<label class="form-check-label" for="val1">Profile Public Viewable</label>
</div>
I have been looking around for examples on how to achieve this design, but seem to be coming up empty handed. Does anyone have any ideas as to where i am going wrong?

Cakephp 3 form input div in div

I recently start a new project using cakephp 3. I have to generate a particular form for input box, as I am using AdminLTE V2.
Admin LTE required HTML is as following
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" id="inputEmail3" placeholder="Email" type="email">
</div>
</div>
I have generate it as following
<div class="form-group input text required">
<label class="col-sm-3 control-label" for="full-name">Full Name</label>
<input type="text" name="full_name" class="form-control" required="required" maxlength="100" id="full-name">
</div>
I need to generate the inner <div>. How I can do this? Please help.
For this CakePhp provide Customizing the Templates FormHelper. Like many helpers in CakePHP, FormHelper uses string templates to format the HTML it creates. While the default templates are intended to be a reasonable set of defaults. You may need to customize the templates to suit your application.
Below i have customize the input field according to AdminLTE.
echo $this->Form->input('email', [
'label' => ['text' => 'Email','class' => 'col-sm-2'],
'templates' => [
'label' => '<label{{attrs}}>{{text}}</label>',
'input' => '<div class="col-sm-10"><input type="{{type}}" name="{{name}}" {{attrs}}/></div>',
'inputContainer' => '<div class="form-group {{type}}{{required}}">{{content}}</div>',
'inputContainerError' => '<div class="form-group {{type}}{{required}} has-error">{{content}}{{error}}</div>',
],
]);
The output of this in AdminLTE theme is following.
<div class="form-group text">
<label class="col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="text" name="email" placeholder="Email" id="first-name">
</div>
</div>
Use the friends of cake bootstrap plugin available at https://github.com/friendsofcake/bootstrap-ui
It already includes full support for bootstrap based themes.
You can just use plain html, as #Manohar said. But if you really prefer cakephp's syntax, I use this type of syntax in my projects (same theme):
<div class="form-group">
<?php echo $this->Form->label('descricao', 'Descrição'); ?>
<div class="col-sm-10">
<?php echo $this->Form->input('descricao', ['label' => false, 'class' => 'form-control', 'placeholder' => "myPlaceHolder"]); ?>
</div>
</div>
You might need some additional parameters to do exactly what is written in the pure html version of your code. You can check out other options for cakephp's forms in it's documentation: http://book.cakephp.org/3.0/en/views/helpers/form.html#creating-form-inputs

Is it possible to allow checkboxes to be checked by clicking on the label when it has a hidden field on top of it?

I have a label with a checkbox and a hidden input in it.
Without the hidden input, I was able to click on the label to check the checkbox, but with the hidden input on top of it, I can't (Except on Chrome).
Is there anyway around this without moving the hidden input (It is crucial that the hidden input is inside the label and on top of the checkbox)?
My JsBin: http://jsbin.com/kovipaxu/7/edit
Why is it crucial that the hidden field has to be inside the label and on top of the checkbox?
This is because I'm using CakePHP's form helper.
Input Options
$checkbox_options = array(
'label' => false,
'div' => false,
'type' => 'checkbox',
'class' => false,
'hiddenField' => true
);
Form:
<div class="checkbox">
<label>
<?php echo $this->Form->input('field', $checkbox_options); ?>
My Label Here
</label>
</div>
The above form will output:
<div class="checkbox">
<label>
<input name="data[FakeModel][field]" value="0" type="hidden">
<input name="data[FakeModel][field]" value="1" checked="checked" type="checkbox">
My Label Here
</label>
</div>
If there is a way to move the hidden input below the checkbox using CakePhp's form helper that would be great! But unfortunately I don't think that's possible, I went through the document and couldn't find a way.
Wow about this. Its working on Firefox
$checkbox_options = array(
'label' => 'My level here',
'div' => false,
'type' => 'checkbox',
'class' => false,
'hiddenField' => true
);

Passing checkbox values to mysql database using Codeigniter

I'm using CodeIgniter and mySQL to build a checkbox form. The form contains 4 options; each option has only one checkbox; users can select any combination of the options. I want to do the following:
1 - For each checkbox, use a value of 1 (if unchecked) or 2 (if checked) and pass those values through to the database (each checkbox has its own field). Right now, whether checked or unchecked, the checkboxes are sending a value of 0 through to the database.
2 - Once users update their checkboxes, I'd like to update the database to reflect the new values. Right now, a new row is added for each update to the checkboxes.
What I've got so far is a form that submits the checkbox values to the database, a controller, and a model):
Form
<?php echo form_open('addFoo'); ?>
<input type="checkbox" name="foo1" value="" />
<input type="checkbox" name="foo2" value="" />
<input type="checkbox" name="foo3" value="" />
<input type="checkbox" name="foo4" value="" />
<?php echo form_submit('submit', 'Save Changes'); ?>
<?php echo form_close(); ?>
Controller
function addFoo()
{
if ($this->input->post('submit')) {
$id = $this->input->post('id');
$foo1 = $this->input->post('foo1');
$foo2 = $this->input->post('foo2');
$foo3 = $this->input->post('foo3');
$foo4 = $this->input->post ('foo4');
$this->load->model('foo_model');
$this->foo_model->addFoo($id, $foo1, $foo2, $foo3, $foo4);
}
}
Model
function addFoo($id, $foo1, $foo2, $foo3, $foo4) {
$data = array(
'id' => $id,
'foo1' => $foo1,
'foo2' => $foo2,
'foo3' => $foo3,
'foo4' => $foo4
);
$this->db->insert('foo_table', $data);
}
At your Controller :
if you want to insert new entry for all selected checkbox:
foreach($this->input->post('foo') as $r)
{
$data['fieldname']=$r;
$this->model_name->insert($data);
}
if you want to insert all selected checkbox values in different fields within single entry then,
foreach($this->input->post('foo') as $key=>$val)
{
$data['field'.$key]=$val;
}
$this->model_name->insert($data);
Well in reference to setting the values, a checkbox doesn't send anything if unchecked. To achieve what you want, you have to do this:
<input type="checkbox" name="foo[]" value="1" />
<input type="checkbox" name="foo[]" value="2" />
This will send a value regardless of whether the checkbox is checked or not.
use the different values for each checkbox and get the value of checkbox array and use this in your controller print_r($this->input->post('foo')); it will print the values that are selected by user
use like this
<?php
if (isset($_POST['submit'])){
print_r($_POST['foo']);
}
?>
<form action="" method="POST">
<input type="checkbox" name="foo[]" value="1">1<br>
<input type="checkbox" name="foo[]" value="2">2<br>
<input type="checkbox" name="foo[]" value="3">3<br>
<input type="checkbox" name="foo[]" value="4">4<br>
<input type="submit" value="submit" name="submit">
</form>