Tree structure with Check boxes in JQuery Mobile - treeview

Is it possible to have a tree structure with check boxes in JQuery MObile. I did not find any thing in demos.
I wanted something similar this image: Is there any alternative way we can achieve this?

Well it's just a concept but I have a couple working examples:
http://jsfiddle.net/JYn53/2/
http://jsfiddle.net/JYn53/4/
HTML
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed="true">
<h3>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
</h3>
<p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1aa" id="checkbox-1aa" class="custom" />
<label for="checkbox-1aa">Cheetos</label>
<input type="checkbox" name="checkbox-2aa" id="checkbox-2aa" class="custom" />
<label for="checkbox-2aa">Doritos</label>
<input type="checkbox" name="checkbox-3aa" id="checkbox-3aa" class="custom" />
<label for="checkbox-3aa">Fritos</label>
<input type="checkbox" name="checkbox-4aa" id="checkbox-4aa" class="custom" />
<label for="checkbox-4aa">Sun Chips</label>
</fieldset>
</div>
</p>
</div>
</div>
</div>

Related

PrestaShop: Change order of two fields in registration form

I know this is not a Prestashop forum but I don't doubt that you have the solution I am looking for.
I want to change the order of two fields in the registration form in Prestashop 1.6. I also wanted to hide some unnecessary ones but that I have managed to do myself.
The field I want to move is the VAT field (moms in Swedish) as I have painted on the attached picture:
Because this field only is visible when the Company field is filled in I did not dare to touch it.
The field you can see on this image
MOMS field should go before web address field
The code I think is to be changed come here
<h3 class="page-subheading">{l s='Your company information'} </h3>
<p class="form-group">
<label for="">{l s='Company'}</label>
<input type="text" class="form-control" id="company" name="company" value="{if isset($smarty.post.company)}{$smarty.post.company} {/if}" />
</p>
<p class="form-group">
<label for="website">{l s='Website'}</label>
<input type="text" class="form-control" id="website" name="website" value="{if isset($smarty.post.website)}{$smarty.post.website} {/if}" />
</p>
</div>
{/if}
{if isset($PS_REGISTRATION_PROCESS_TYPE) && $PS_REGISTRATION_PROCESS_TYPE}
<div class="account_creation">
<h3 class="page-subheading">{l s='Your address'}</h3>
{foreach from=$dlv_all_fields item=field_name}
{if $field_name eq "company"}
{if !$b2b_enable}
<p class="form-group">
<label for="company">{l s='Company'}{if in_array($field_name, $required_fields)} <sup>*</sup>{/if}</label>
<input type="text" class="form-control" id="company" name="company" value="{if isset($smarty.post.company)} {$smarty.post.company}{/if}" />
</p>
{/if}
{elseif $field_name eq "vat_number"}
<div id="vat_number" style="display:none;">
<p class="form-group">
<label for="vat_number">{l s='VAT number'}{if in_array($field_name, $required_fields)} <sup>*</sup>{/if}</label>
<input type="text" class="form-control" id="vat_number" name="vat_number" value="{if isset($smarty.post.vat_number)} {$smarty.post.vat_number}{/if}" />
</p>
</div>
{elseif $field_name eq "firstname"}
<p class="required form-group">
<input type="hidden" class="form-control" id="firstname" name="firstname" value="{if isset($smarty.post.firstname)} {$smarty.post.firstname}{/if}" />
</p>
{elseif $field_name eq "lastname"}
<p class="required form-group">
<input type="hidden" class="form-control" id="lastname" name="lastname" value="{if isset($smarty.post.lastname)} {$smarty.post.lastname}{/if}" />
</p>
You have to move this field to the upper section:
<h3 class="page-subheading">{l s='Your company information'} </h3>
<p class="form-group">
<label for="">{l s='Company'}</label>
<input type="text" class="form-control" id="company" name="company" value="{if isset($smarty.post.company)}{$smarty.post.company} {/if}" />
</p>
<p class="form-group">
<label for="website">{l s='Website'}</label>
<input type="text" class="form-control" id="website" name="website" value="{if isset($smarty.post.website)}{$smarty.post.website} {/if}" />
</p>
{foreach from=$dlv_all_fields item=field_name}
{if $field_name eq "vat_number"}
<div id="vat_number" style="display:none;">
<p class="form-group">
<label for="vat_number">{l s='VAT number'}{if in_array($field_name, $required_fields)} <sup>*</sup>{/if}</label>
<input type="text" class="form-control" id="vat_number" name="vat_number" value="{if isset($smarty.post.vat_number)} {$smarty.post.vat_number}{/if}" />
</p>
</div>
{/if}
{/foreach}
</div>
{/if}
{if isset($PS_REGISTRATION_PROCESS_TYPE) && $PS_REGISTRATION_PROCESS_TYPE}
<div class="account_creation">
<h3 class="page-subheading">{l s='Your address'}</h3>
{foreach from=$dlv_all_fields item=field_name}
{if $field_name eq "company"}
{if !$b2b_enable}
<p class="form-group">
<label for="company">{l s='Company'}{if in_array($field_name, $required_fields)} <sup>*</sup>{/if}</label>
<input type="text" class="form-control" id="company" name="company" value="{if isset($smarty.post.company)} {$smarty.post.company}{/if}" />
</p>
{/if}
{elseif $field_name eq "firstname"}
<p class="required form-group">
<input type="hidden" class="form-control" id="firstname" name="firstname" value="{if isset($smarty.post.firstname)} {$smarty.post.firstname}{/if}" />
</p>
{elseif $field_name eq "lastname"}
<p class="required form-group">
<input type="hidden" class="form-control" id="lastname" name="lastname" value="{if isset($smarty.post.lastname)} {$smarty.post.lastname}{/if}" />
</p>

how to use multiple hidden fields with the same name

hi i'm trying to get the rate for a product i tried this :
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation" id="5" value="5"></span>
but it keeps give me only the value of 5 nothing else , how can i get each value as i want not only the last one ?
and here is the full form :
<form class="form-horizontal" action="{{action('onlyController#postIndex')}}" method="POST">
{!! csrf_field() !!}
#foreach($product as $pro)
<input type="hidden" name="product_id" value="{{$pro->id}}" />
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">الاسم </label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" id="inputName" placeholder="الاسم " required>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">الاميل </label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" id="inputEmail" placeholder="الاميل" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">نص التعليق </label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" name="comment" maxlength="1000" required></textarea>
</div>
</div>
<div class="reviews">
<ul>
<li>
<label class="col-sm-2 control-label">التقييم </label>
<span>ردئ</span>
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation[]" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation[]" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation[]" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation[]" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation[]" id="5" value="5"></span>
</div>
<span>ممتاز</span>
</li>
</ul>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn ">ارسال </button>
</div>
</div>
#endforeach
</form>
how can i do it ?
use 'evaluation[]'
but evaluation will be an array on server
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation[]" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation[]" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation[]" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation[]" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation[]" id="5" value="5"></span>
$_POST['evaluation'] is going to be an array
$evaluation = $_POST['evaluation'];
foreach($evaluation as $val){
//do something with the values here
}
ok, well all seems to be working for me
<?php
if($_POST)
print_r($_POST['email']);
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
hidden <input type="hidden" name="email[]" value='hjdfkhds' ><br>
hidden: <input type="hidden" name="email[]" value='iufd'><br>
hidden: <input type="hidden" name="email[]" value='78642di'><br>
hidden <input type="hidden" name="email[]" value='uidynsx' ><br>
hidden <input type="hidden" name="email[]" value='qsqaaa'><br>
<input type="submit">
</form>
after I clicked submit. This is what I got

Creating SharePoint Visual Webpart with Bootstrap

I am creating a responsive sharepoint visual webpart.
everything works fine and looks good but my mobile view is pretty much off.
the controls doesn't shrink to the lowest mobile size..
i tried many times but still i have the same issue..
<fieldset class="form-horizontal">
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Name:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:TextBox MaxLength="50" runat="server" ID="txtTitle" CssClass="form-control">
</asp:TextBox>
</div>
</div>
<div class="clearfix">
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Ano:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddYear" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Mes:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddMonth" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Tema de Salud:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddHealthTopic">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Unidad administrativa:(por sus siglas en ingles entre paréntesis)
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddOrgUnit">
</asp:DropDownList>
</div>
</div>
</fieldset>
<br />
<div class=" col-xs-10 col-md-10">
<div class="input-group" >
<span class="input-group-btn">
<asp:Button CssClass="btn btn-primary" ToolTip="Buscar" runat="server" ID="btnSubmit" Text="Buscar" OnClick="btnSubmit_Click" />
</span>
</div>
</div>
Your code seems to be fine ....
Try to add (If its no there)
<meta name="viewport" content="width=device-width, initial-scale=1">
head section of your master page

Angular form validation in IE

I'm trying to get Angular form validation working in ie8. Here is my code:
<form id="contact-form" name="cform" target="_blank" >
<div class="left">
<div>
<div class="group">
<label for="firstname">First Name <span class="asterisk">*</span></label><br />
<input type="text" name="firstname" id="firstname" data-ng-model="firstname" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
<div class="group">
<label for="lastname">Last Name <span class="asterisk">*</span></label><br />
<input type="text" name="lastname" id="lastname" data-ng-model="lastname" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
</div>
<div>
<div class="group">
<label for="email">Email Address <span class="asterisk">*</span></label><br />
<input type="email" id="email" name="email" data-ng-model="email" required />
<span class="error" data-ng-show="cform.email.$error.email">Required!</span>
</div>
</div>
<div>
<div class="group">
<label for="phone">Primary Phone Number <span class="asterisk">*</span></label><br />
<input type="text" name="phone" id="phone" data-ng-model="phone" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
<div class="group">
<label for="-secondary-phone">Secondary Phone Number</label><br />
<input type="text" name="secondary-phone" id="secondary-phone" />
</div>
</div>
</div>
<div class="right">
<div class="group">
<label for="message">Your Message</label><br />
<textarea id="message"></textarea>
</div><br />
<input type="submit" value="SEND MESSAGE" class="button">
</div>
</form>
This works in Firefox and Chrome, but in IE8 no validation errors are triggered. Anyone know what the issue might be?
Thanks.
UPDATE: This seems to be a problem in all versions of IE. {{cform.input.$error}} and {{cform.input}} don't show output in any browser.
<div class="group">
<label for="firstname">First Name <span class="asterisk">*</span></label><br />
<input type="text" name="firstname" id="firstname" data-ng-model="firstname" ng-required="true" />
<span class="error" data-ng-show="cform.firstname.$error.required && cform.firstname.$dirty">Required!</span>
</div>
Ie 8 does not support html 5 ,Angular is using html 5 , Do the work around to get angular working on IE and then use the pattern because you cant use the html 5 element

use the hidden form value in virtuemart joomla

i want to use the hidden form value "virtuemart_product_price" a administrator\components\com_virtuemart\helpers\calculationh.php
this form is added in components\com_virtuemart\views\cart\tmpl\default.php ..
<form method="post" class="product js-recalculate" action="/ecomm/index.php/component/virtuemart/">
<div class="addtocart-bar">
<!-- <label for="quantity229" class="quantity_box">Quantity: </label> -->
<span class="quantity-box">
<input type="hidden" class="quantity-input js-recalculate" name="quantity[]" value="1"/>
</span>
<span class="addtocart-button">
<input type="submit" name="addtocart" class="addtocart-button" value="Pick free" title="Pick free" /> </span>
<div class="clear"></div>
</div>
<input type="hidden" name="virtuemart_product_price" value="5" />
<input type="hidden" class="pname" value="Custom Item"/>
<input type="hidden" name="option" value="com_virtuemart"/>
<input type="hidden" name="view" value="cart"/>
<noscript><input type="hidden" name="task" value="add"/></noscript>
<input type="hidden" name="virtuemart_product_id[]" value="<?php echo virtuemart_product_id;?>"/>
</form>
i tried to get but i can't find a solution.

Resources