using a div element as a checkbox - javascript

I am currently building a site where I prefered to use a div element as a checkbox.
If selected the checkbox class is toggled using javascript.
Heres the html.
<div class='col span_1_of_6 menuGroup'>
<div class="circl3" style="background-image:url(images/icons/'.$icon.') background-repeat:no-repeat;"></div>
<p class='menuGroupName'>$items</p>
</div>
$icon (an icon for the item) & $items (item name) are php to fetch from mysqli db. I originally used entire html in php echo. But, for better reading I posted like that.
Here's the javascript.
$(".menuGroup").click(function() {
$(this).toggleClass("btnOn");
});
Here is the div element in 2 states. Selected and Not Selected.
http://postimg.org/image/5sk0z4tgj/
WHAT I WANT is the <p> element name to be submited to the next page when i click the Submit Button
And is there is a better alternative to this method?

Make hidden checkbox and add onchange handler to change state of your pseudo checkbox.
Hidden checkbox will submit to the next page.
OR
See the CSS3 only examples how to make it with out javascript.

You can see every element and pick up the selected ones and send the response
$('.menuGroup').each(function() {
if ($(this).hasClass('btnOn')) {
// Save element to send
}
});

Related

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

Change selectbox depending on radio button checked

I want to change the content of a selectbox based on a radio button.
I'm using AngularJS. So, my select box looks like this:
<select ng-controller="MyController">
<option ng-repeat="o in array_of_values" value="{{o.id}}">{{o.value}}</option>
</select>
Now, depending on wether my radio button is checked or not, I want a different set of values loaded in the select box.
I don't have much experience with Angular, but I suspect I could dynamically change $scope.array_of_values in MyController. Something similar to this example (official documentation)
I've seen another example, where you can change the content of a div based on a radio button, just using ng-model + ng-show
EDITED: But I have another difficulty: I really have several pairs radio button / select box, as table's rows, and they are dynamically generated. I could use plain jQuery plus a javascript function to get the id of each radio button and just change a specific select box based on the onClick event of the radio button. But I tend to think there is a more elegant way to do this, using AngularJS. Am I right?
Any clues? What approach should I follow?
Many thanks in advance
You should start by reading the doc and pick the right components.
Select angular way: https://docs.angularjs.org/api/ng/directive/ngOptions
Radio: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
$watch the radio models and change the array_of_values values. Prefer use object agains values ({id:0, value:"value0"}).
$scope.radio = {name:"Radio1"};
$scope.$watch('radio', function(newVal, lastVal){
if(newVal.name === 'radio2')
$scope.array_of_values = values2
};
});

jQuery .prop("disabled",true) not working

I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...

DJANGO HTML TEMPLATES : How to know Selected item in drop Down and display In the html page without any action

I want to display the selected item info which is selected From the drop down in, the same html page without dong any action.How to know which item is selected and how to assign that selected value in a variable in html.
You can use jQuery's onchange event handler to detect when choice is changed and also get the value. There is good example on the .change() api page.

How do I create a clickable grid of hours in a week, saving clicks to MySQL?

Just wondering if there is a system out there that will basically allow for the following :
Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitted it will send the blocks off to MySQL to store.
Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.
You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.
The html would look like:
<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>
The css would look like:
.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}
And the javascript:
$('.unselected_td').click(function(){
var cell = this.id;
$.ajax({
type:'post',
url:'path/file.php',
data:"cell="+cell+"&checked=1",
success:function(){
$(this).removeClass('unselected_td').addClass('selected_td');
}
});
});
And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work
I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.
Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.

Categories