We Keep Coding

Using isset from a name of an input

I am not sure if I am going about this correctly. I have a set of checkbox inputs. If someone selects the last check box all_users_check, I want a new form to appear where I will be listing all of the users in a drop down (haven't added the drop down yet). I thought I could do this by using the name of the input, but I am mistaken apparently as I am getting this error..
How else could I structure what I am doing so that if someone checks that option the new form displays?
<div class="user_dropdown">
<form action="">
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value="" checked> Team Members<br>
<input type="checkbox" name="commissioner_check" value="" checked> Commissioner(s)<br>
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value="" checked> Individual User<br>
</label>
</form>
</div>
<script>
$(".user_dropdown").hide();
$(".all_users_check").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>
This is how the page looks on load. Those fields are already checked for some reason.

Issues in your code.
.all_users_check that is looking for a class. Your element doesn't have a class so this isn't found. You can use a different selector to use the name attribute, https://api.jquery.com/attribute-equals-selector/.
This $(".user_dropdown").hide(); hides your whole form. You might want to move around your divs, or remove that altogether.
The checked attribute checks the field it is on. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
Use the checked attribute to indicate whether this item is selected
<div class="user_dropdown">
<form>
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value=""> Team Members<br>
<input type="checkbox" name="commissioner_check" value=""> Commissioner(s)<br>
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value=""> Individual User<br>
</label>
</form>
</div>
<script>
//$(".user_dropdown").hide();
$("input[name='all_users_check']").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>

isset is a language construct and can't accept anything other than a variable as indicated by this warning on the linked to manual page:
Warning isset() only works with variables as passing anything else will result in a parse error.
You are not passing in a variable to the isset function, you are passing in a constant value, basically an array with a single string all_users_check. This is not a variable because you are not assigning it to a variable name. Try this instead:
if(isset($_POST['all_users_check']))
Here the variable being passed in is the superglobal $_POST, and you are checking to see if the index all_users_check is set inside of that array.
Update
To check if an input is empty or not via javascript, take a look at this question.

Try using this script, you have set the state of check boxes as checked by default.
<div class="user_dropdown">
<form action="">
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value=""> Team Members<br><!-- removed 'checked' from this line -->
<input type="checkbox" name="commissioner_check" value=""> Commissioner(s)<br><!-- removed 'checked' from this line -->
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value="" > Individual User<br> <!-- removed 'checked' from this line -->
</label>
</form>
</div>
<script>
$(".user_dropdown").hide();
$(".all_users_check").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>
For the other issue of showing the hidden section again, try whether class all_users_check is visible to click.

Creating an Associative Array using JQuery

I am trying to create an associative array using JQuery. I would like it to be filled with the values of the checkboxes a user has selected from the UI.
I was creating the array like this at first:
$contentArray = [];
$('.content-filter :checked').each(function(){
$contentArray.push(this.value);
})
but the problem with this is that when I pass it to a php script via Ajax it was making it very difficult to get values from it. I'd rather be able to get the values from the array based on the key associated with it.
So I decided to modify my code to this:
$contentArray = new Array(); //Hold checked "content" filters
//Content Filter - cycle through each filter and add value of checked ones to array
$('.content-filter :checked').each(function(){
$contentArray[this.value] = this.value;
})
however now when I perform console.log I am being told the contents of my array contains nothing.
Can anyone advise me on how to fix this issue and show me where I am going wrong?

Your filter is wrong - you need to remove the space before :checked, otherwise it will look for an element inside the checkbox which is checked, which obviously doesn't exist:
$contentArray = new Array(); //Hold checked "content" filters
//Content Filter - cycle through each filter and add value of checked ones to array
$('.content-filter:checked').each(function(){
$contentArray[this.value] = this.value;
})
console.log($contentArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="content-filter" value="1" />
<input type="checkbox" class="content-filter" value="2" checked="checked" />
<input type="checkbox" class="content-filter" value="3" checked="checked" />
<input type="checkbox" class="content-filter" value="4" />
<input type="checkbox" class="content-filter" value="5" />
However, as mentioned, this just creates a fragmented array. If you want truly associative keys, you should create an object (tho I don't see this being easier to process in php):
$contentObject = {}; //Hold checked "content" filters
//Content Filter - cycle through each filter and add value of checked ones to array
$('.content-filter:checked').each(function(){
$contentObject[this.value] = this.value;
})
console.log($contentObject);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="content-filter" value="1" />
<input type="checkbox" class="content-filter" value="2" checked="checked" />
<input type="checkbox" class="content-filter" value="3" checked="checked" />
<input type="checkbox" class="content-filter" value="4" />
<input type="checkbox" class="content-filter" value="5" />

Displaying particular values on radio select

I'm trying to display particular forms on the selection of particular radio buttons.
Here are the radio buttons :-
<input type="radio" name="condition" value="working" id="condition">
<input type="radio" name="condition" value="workingdamaged" id="condition">
<input type="radio" name="condition" value="notworking" id="condition">
When we select the working radio, a different form needs to be opened up. When we select nonworking a different form needs to be there.
Originally, I was doing it via document.getElementById("demo").innerHTML , but, I was suggested that using too much forms within the innerHTML is not a good idea.
Then what is the best way by which I complete this task?
Any suggestions are welcome.

The simplest way I can think of is using data attributes for referring to the corresponding form elements from the radio button selected.
All we have to do is map a radio button with 'data-form="working"' to a particular form with id 'working'
The sample code looks like:
$("form").hide();
$("input:radio").on("change", function() {
$("form").hide();
$("#" + $(this).attr("data-form") ).show();
});
The html markup should look like:
<input type="radio" data-form="working" value="working" name="condition">
<input type="radio" data-form="workingdamaged" value="workingdamaged" name="condition">
<input type="radio" data-form="notworking" value="notworking" name="condition">
<form id="working">
<h2>working form</h2>
</form>
<form id="workingdamaged">
<h2>workingdamaged form</h2>
</form>
<form id="notworking">
<h2>notworking form</h2>
</form>
Fiddle Demo

Your solution is fine and I don't see any major problems with it.
You can also add all forms to DOM, and switch their visibility.
For instance:
<form id="form-working" style="display: none"></form>
<form id="form-workingdamaged" style="display: none"></form>
<form id="form-notworking" style="display: none"></form>
<input type="radio" name="condition" value="working" id="condition-working">
<input type="radio" name="condition" value="workingdamaged" id="condition-workingdamaged">
<input type="radio" name="condition" value="notworking" id="condition-notworking">
<script>
var forms = ['working', 'workingdamaged', 'notworking'];
function switch(form) {
for (var k in forms) {
forms[k].style.display = 'none';
}
document.getElementById('form-' + name).style.display = 'block';
}
var elements = document.getElementsByName('condition');
for (var k in elements) {
elements[k].onclick = function() {
if (this.cheked) {
switch(this.getAttribute('value'));
}
}
}
</script>
EDIT: you have to change IDs of the elements. ID must be unique
Also you may consider using or external libraries for templating.

You may take a look at this question. It might serves your purpose.
Show form on radio button select

<input type="radio" name="condition" class="selectradio" value="working" selection="select1">
<input type="radio" name="condition" class="selectradio" value="workingdamaged" selection="select2">
<input type="radio" name="condition" class="selectradio" value="notworking" selection="select3">
give them different ids this
create a model like this .
<div class=content>
<div class="subcontent" style="display:none" id="select1">//content</div>
<div class="subcontent" style="display:none" id="select2">//content</div>
<div class="subcontent" style="display:none" id="select3">//content</div>
</div>
<script>
$(function(){
$('.selectradio').change(
function(){
var sourced=$(this).attr("selection") ;
$(".subcontent").hide();
$("#"+sourced).show();
}
);
});
</script>
you have to include jquery library .

function cal() with radio input

i created a form with cal() but im not able to make it work with radio input.
It worked with select and option, but now the value isnt taken.
here the code
<script>
function cal()
{
var pl=document.form1.template.value;
var resultat=pl;
document.form1.tresultat.value=resultat;
document.formfin.tresultatfin.value = calfin();
}
</script>
<form name="form1">
<label for="Template">Option 1 : Template</label>
<ul>
<li id="template"><label for="logo+texte">Logo et texte</label>
<input type="radio" id="test" name="template" value="500" onclick="cal()"></li>
<li><label for="base">Base</label>
<input type="radio" id="test" name="template" value="800" onclick="cal()"></li>
<li><label for="perso">Sur-Mesure</label>
<input type="radio" id="test" name="template" value="2900" onclick="cal()"></li></ul>
<input type="text" value="0" name="tresultat">
</form>
any idea to get the value in the text input when selected ?
thanks

Radio buttons are weird because there's a list of separate elements instead of just one. The simplest thing to do is to pass the element itself as a parameter:
function cal( button )
{
var pl = button.value;
var resultat=pl;
document.form1.tresultat.value=resultat;
document.formfin.tresultatfin.value = calfin();
}
and then change the radio buttons:
<input type="radio" id="test" name="template" value="800" onclick="cal( this )"></li>
passing this to the function.

Pass values from checkboxes using Javascript

Im building a simple form where im trying to pass values from check boxes...
<div class="checkboxclass">
<input name="form[paperdesign][]" value="150" id="paperdesign0" type="checkbox">
<label for="paperdesign0">text 1</label>
<input name="form[paperdesign][]" value="100" id="paperdesign1" type="checkbox">
<label for="paperdesign1">text 2</label>
<input name="form[paperdesign][]" value="50" id="paperdesign2" type="checkbox">
<label for="paperdesign2">text 3</label>
<input name="form[paperdesign][]" value="50" id="paperdesign3" type="checkbox">
<label for="paperdesign3">text 4</label>
</div>
...using this function:
function calculate(){
var sela=document.querySelectorAll("div.checkboxclass input");
resultsel.value=0;
resultsel.value=parseInt(resultsel.value);
for(i=0;i<sela.length;i++)
resultsel.value=parseInt(resultsel.value)+parseInt(sela[i].value);
}
And it works OK apart from the fact that it's passing this all the values at this same time.
Could comeone please help me out on this one?
many Thanks in advance
Dom

If I understand the question, you mean that you only want to include the values for the checked items. In this case, you should be able to use the :checked selector:
var sela=document.querySelectorAll("div.checkboxclass input:checked");

I think you want it to only calculate selected checkboxes.
You have to check for checkbox selection:
function calculate(){
var sela=document.querySelectorAll("div.checkboxclass input");
var total = 0;
for(i=0;i<sela.length;i++) {
if(sela[i].checked)
total += parseInt(sela[i].value);
}
resultsel.value = total;
}