We Keep Coding

Prestashop Module Form creation

I want to add 21 checkboxes and a text field(Name) in a good design way. Also there must be "check all button" to check all the checkboxes, how to do it in module PHP page in prestashop.
Since I am new to prestashop I don't know about the form submission, I have to save these two fields together as a json array in database.
Is that possible in prestashop? please help me regarding this.
prestashop version = 1.6
Thanks in advance
Sample code
protected function getConfigForm()
{
return array(
'form' => array(
'legend' => array(
'title' => $this->l( 'Generate Export Order Settings' ),
'icon' => 'icon-cogs'
),
'input' => array(
array(
'type' => 'checkbox',
'name' => 'display',
'values' => array(
'query' => array(
array(
'id' => 'all_fields',
'name' => $this->l('All Fields'),
'val' => '1'
),
),
'id' => 'id',
'name' => 'name'
)
),
),
'submit' => array(
'title' => $this->l( 'Save Export Settings' ),
'class' => 'button pull-right',
'name' => 'save-main-display-settings',
)
),
);
}
I don't know how to add check box in 3 columns and 7 rows and select all button to select all the checkbox.

You can use the following JS code to add check all functionality:
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
});
Fiddle here: http://jsfiddle.net/HBGzy/

How to combine the functionality of a list with a textbox

Right now I have a form that I created in cakephp and it works fine but the problem I am running into is that we run queries off of the type in the database and there have been some user errors with spelling so I would like to have a list with the most common types that you can select from but if it is not in the list you can still type in something different.
I found this jquery autocomplete combobox that works great but I am not able to enter something that is not in the list. http://jqueryui.com/autocomplete/#combobox
I don't know if you need to see my form or not but I will post it anyway
<?php
echo $this->Form->create( 'Credential', array( 'class' => 'popup_form' ) );
echo $this->Form->hidden( 'account_id', array( 'value' => $account_id ) );
echo $this->Form->hidden( 'user_id', array( 'value' => $currentUser['User']['id'] ) );
echo $this->Form->hidden( 'created', array( 'value' => date("Y-m-d H:i:s") ) );
echo $this->Form->hidden( 'modified', array( 'value' => date("Y-m-d H:i:s") ) );
echo '<br/><br/>';
echo $this->Form->input( 'type', array( 'div' => false, 'label' => false, 'placeholder' => 'Account Type' ) );
echo '<br/><br/>';
echo $this->Form->input( 'url', array( 'div' => false, 'label' => false, 'placeholder' => 'URL' ) );
echo '<br/><br/>';
echo $this->Form->input( 'username', array( 'div' => false, 'label' => false, 'placeholder' => 'Username' ) );
echo '<br/><br/>';
echo $this->Form->input( 'password', array( 'div' => false, 'label' => false, 'placeholder' => 'Password' ) );
echo '<br/><br/>';
echo $this->Js->submit( 'Create Credential', array( 'div' => false, 'class' => 'button white medium', 'before' => 'return submitForm();', 'success' => "$('#qtip-add_account_credential').hide();", 'complete' => 'loadTasks();' ) );
echo '<br/><br/>';
echo $this->Form->end();
?>
<script type="text/javascript">
function submitForm(){
var x = document.getElementById("CredentialType").value;
if (x == null || x == "") {
alert("Account Type must be filled out");
return false;
}
else {
return true;
}
}
</script>
I am a backend developer and would love any help I could get on the front end. Thanks.

What you are searching for is a datalist (new in HTML5):
http://www.w3schools.com/tags/tag_datalist.asp
It provides an form input with a predefined list of options, which appears as soon as the user's input matches one of the entries.
BUT: it seems not to be supported in Safari
In your case it would look like that:
<input name="type" list="AccountTypes" placeholder="Account Type">
<datalist id="AccountTypes">
<option value="admin">
<option value="user">
<option value="something else">
</datalist>

Setting style property on table formed with PHP not working

I have a several tables delivered via PHP loop to my page. At the end of each PHP loop an if statement is run (which is evaluating true) like this:
if ($ssstatus[0] == 'F'){
echo "<script>";
//echo "alert('We are in this loop');";
echo "flagfinished(".$gameID.");";
echo "</script>";
}
My flagfinished function is this:
function flagfinished(tableid){
//alert("Made it to the function!");
var myid = "table"+tableid;
//alert(myid);
var testel = document.getElementById(myid);
testel.setAttribute("border-style","solid");
};
I'm not sure why this isn't working. I can say that my id attribute on the table is properly set and matches the variable myid. I've even tried just putting in the text of a single id attribute instead of myid and still no luck. I've also manually added the "border-style" attribute to my css and it works. Maybe I am going about this in the wrong way entirely. Or maybe I am overlooking something obvious. I've been working on this for hours! Thanks for any ideas or help!

testel.style.borderStyle = "solid";

The border-style that you are trying to define is not an element attribute. The attribute would be style. And border-style would be a value of the style attribute.
So, in your line of thinking:
var testel = document.getElementById(myid);
testel.setAttribute("style", "border-style: solid");
But, Javascript DOM already takes care of the style attribute for you, so you can go:
var testel = document.getElementById(myid);
testel.style.bordeStyle = "solid";
Follows MDN HtmlElement.style docs

Why are u trying to call flagFinished with javascript anyway? You could do the same with php. Add a css class to the table before sending it to the browser ( echoing / printing out ) and then let css do it's magic? Then you wouldn't have to send all these extra tags to client, which makes the page load faster, and would be a better solution to use.
you could do something like:
<?php
$tables = [
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'F'
],
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'S'
],
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'F'
]
];
foreach ($tables as $table) {
?>
<table id="<?= myUniqueTableIdGeneratorFunction() ?>"
class="<?= ($table['status']) == 'F' ? 'class-with-border' : null ?>" ><?php
foreach ($table['data'] as $row) {
?>
<tr>
<td><?= $row['id'] ?></td>
<td><?= $row['content'] ?></td>
</tr>
<?php
}
?></table><?php
}
?>
I havent test this, just wrote this from the top of my head quickly.

How to change img srs attr on hover in WordPress with jQuery

I have following code.
This code is from my theme-options.php file.
and I am still working on it and I develop this all.
function social_icons() {
$icons = array (
'facebook'=>__('Facebook','responsivetheme'),
'google'=>__('Google','responsivetheme'),
'instagram'=>__('Instagram','responsivetheme'),
'linkedin'=>__('Linkedin','responsivetheme'),
'pinterest'=>__('Pinterest','responsivetheme'),
'rss'=>__('RSS','responsivetheme'),
'stumbleupon'=>__('Stumbleupon','responsivetheme'),
'twitter'=>__('Twitter','responsivetheme'),
'vimeo'=>__('Vimeo',''),
'youtube'=>__('Youtube','responsivetheme')
);
$iconsHover = array (
'facebook-h'=>__('Facebook','responsivetheme'),
'google-blank-h'=>__('Google','responsivetheme'),
'instagram-blank-h'=>__('Instagram','responsivetheme'),
'linkedin-blank-h'=>__('Linkedin','responsivetheme'),
'pinterest-h'=>__('Pinterest','responsivetheme'),
'rss-h'=>__('RSS','responsivetheme'),
'stumbleupon-blank-h'=>__('Stumbleupon','responsivetheme'),
'twitter-h'=>__('Twitter','responsivetheme'),
'vimeo-blank-h'=>__('Vimeo',''),
'youtube-h'=>__('Youtube','responsivetheme')
);
?>
<?php
$theme_options = get_option('new_theme_options',false);
$theme_values = unserialize($theme_options);
$icons_options = get_option('social_settings_responsivetheme_options');
$icons_values = unserialize($icons_options);
?>
<?php
foreach( $icons as $key => $value ) :
if (!empty ($theme_values[$key])) :
?>
<img class="" src="<?php echo template_dir('/icons/'.esc_attr( $key ).'.png');?>" alt="<?php echo esc_html( $value )?>" width="<?php echo $icons_values['width'];?>" height="<?php echo $icons_values['height'];?>" />
<?php endif;//END !empty ($theme_values) ?>
<?php foreach ($iconsHover as $key2 => $value2 ): ?>
<script type="text/javascript">
$(document).ready(function(){
var templateDirectory = "<?php echo get_template_directory_uri(); ?>";
$('.social_icons .<?php echo esc_html($value2); ?> img').hover(
function (){
$(this).attr('src', templateDirectory + '/icons/<?php echo esc_attr($key2); ?>.png');
},
function () {
$(this).attr('src', templateDirectory + '/icons/<?php echo esc_attr($key); ?>.png');
});
});//END document
</script>
<?php endforeach;//END foreach $iconsHover?>
<?php endforeach;//END foreach ?>
<?php
}//END social_icons()?>
The problem is when I hover on icons the hover img works but when on mouse out the normal img should still remains, it doesn't.
It replaces all imgs to 'youtube-h' .
How to do that?

Sorry my comment wasn't clear enough.
By putting them in nested loops, you're outputting every possible combination ('facebook', 'facebook-h'), ('facebook', 'google-blank-h'), ('facebook', 'instagram-blank-h')... ('youtube', 'vimeo-blank-h'), ('youtube', 'youtube-h').
What I meant by putting them all in one array was something like this:
$icons = array (
array(
'off' => 'facebook',
'hover' => 'facebook-h',
'label' =>__('Facebook','responsivetheme')
),
array(
'off' => 'google',
'hover' => 'google-blank-h',
'label' =>__('Google','responsivetheme')
),
array(
'off' => 'instagram',
'hover' => 'instagram-blank-h',
'label' =>__('Instagram','responsivetheme')
),
array(
'off' => 'linkedin',
'hover' => 'linkedin-blank-h',
'label' =>__('Linkedin','responsivetheme')
),
array(
'off' => 'pinterest',
'hover' => 'pinterest-h',
'label' =>__('Pinterest','responsivetheme')
),
array(
'off' => 'rss',
'hover' => 'rss-h',
'label' =>__('RSS','responsivetheme')
),
array(
'off' => 'stumbleupon',
'hover' => 'stumbleupon-blank-h',
'label' =>__('Stumbleupon','responsivetheme')
),
array(
'off' => 'twitter',
'hover' => 'twitter-h',
'label' =>__('Twitter','responsivetheme')
),
array(
'off' => 'vimeo',
'hover' => 'vimeo-blank-h',
'label' =>__('Vimeo','responsivetheme')
),
array(
'off' => 'youtube',
'hover' => 'youtube-h',
'label' =>__('Youtube','responsivetheme')
)
);
Then you only need one loop, something like this:
foreach ($icons as $icon) {
}
and you can use $icon['off'], $icon['hover'], and $icon['label'] as appropriate inside that.

three selects each based on previous jquery

I'm trying to do 3 selects in cakePhp + jQuery first one with provinces, second - localities, third - schools in that place. Here is my cake code (so far):
echo $this->Form->input('proviences', array(
'type' => 'select',
'empty' => true,
'options' => $proviences,
'label' => 'Province',
'class' => 'proviences',
'before' => '<div style="float:left;width:180px"',
'after' => "</div>"
));
echo $this->Form->input('localities', array(
'type' => 'select',
'empty' => true,
'options' => $localities,
'label' => 'City',
'class' => 'localities',
'before' => '<div style="float:left;width:180px"',
'after' => "</div>"
));
$schoolList = array();
foreach($schools as $value) {
$schoolsList[]=$value['name'];
}
echo $this->Form->input('school_id', array(
'label' => 'Szkoła',
'options' => $schoolsList,
'empty' => true,
'before' => '<div style="float:left;width:240px"',
'after' => "</div>",
'onchange' => "submit();",
));
In $schools i have a list looking this way
array(
id1 => array(
'name' => 'some_name',
'province' => 'some_province',
'locality' => 'some_city'
)
)
and using this to get lists of provinces,localities and school names
I was trying to use this but couldn't get it working ;/
Filter three select boxes based on previous selections
Is there a way of doing it in jQuery without ajax?

you can do it without using ajax, but for that you would need the schools array on client side, and create/edit options based on that on the client side, too.
here is a working fiddle. (hastily thrown together, but you get the idea). You need to get the schools array into js, though. you could either use AJAX for that or, pass it as json on the page:
echo 'var schools = JSON.parse('.json_encode($schools).');
You have to think about where to place that, too, so that the variable doesn't leak into the global scope. you could put it in the jQuery closure, for example:
echo '(function($){';
echo 'var schools = JSON.parse('.json_encode($schools).');
// now the javascript from the fiddle...
echo '}(jQuery))';