Hide Elements So they will no Post Data - javascript

I have a form with several tables with many input fields in each.
Above each Table I have an <h2> where I do this:
$retVal .= "<h2><input value='{$category}' type='checkbox' name='Categories[]' onclick='CheckboxCategory($category);' checked='checked' /> " . $MSCategories[$i] ."</h2>";
// below this is table
$retVal .= "<table id=\"tableId{$category}\" class=\"search_table\" style='border-spacing: 0px;'>\n";
// edited out
$retVal .= "</table>";
The idea is, if they check this box (in <h2>), it runs this script:
function CheckboxCategory(catUniqueKey) {
// jQuery
if ($("#tableId" + catUniqueKey).is(":visible")) {
$("#tableId" + catUniqueKey).hide();
} else {
$("#tableId" + catUniqueKey).show();
}
}
I want to hide this specific table so that it doesn't post any values from it (rather than user going down and unchecking a few dozen boxes). This top checkbox I'd like to take care of that.
But apparently, if a checkbox is checked, when the table is hidden, it still posts that value.
Is there something else I can do besides hide that actually removes any traces of this part of the form?

The hidden elements will be posted to the server but the disabled will not be posted so you have to disable the elements
try this
function CheckboxCategory(catUniqueKey) {
// jQuery
if ($("#tableId" + catUniqueKey).is(":visible")) {
$("#tableId" + catUniqueKey).hide();
$("#tableId" + catUniqueKey).prop('disabled',true);
} else {
$("#tableId" + catUniqueKey).show();
$("#tableId" + catUniqueKey).prop('disabled',false);
}
}

I think if you disablethe element along side with hiding it will do it.

Related

Check multiple Checkbox jQuery

I have this code to get back a json string:
$.getJSON("<?php echo BASE_URL; ?>/editTask.php?ID="+tid,function(result){
$.each(result.staff, function() {
$("#checkbox[value=" + this + "]").prop('checked');
});
});
The json looks like this
{"staff":[13,17,15]}
I have a PHP snippet like this
<div id="checkbox" class="checkbox" style="max-height:150px;overflow:auto;">
<?php
for ($i = 0; $i < count($user_list); ++$i) {
echo '<label>'
.'<input type="checkbox" name="tasksUser[]"
value="'.$user_list[$i]['uid'].'">'
.$user_list[$i]['surname'].', '.$user_list[$i]['forename']
.'</label><br />';
}
?>
</div>
I want that every checkbox that has the value that is in result.staff be checked. But I think I have an error in my each part. But in the Firefox console is no error showing.
Could you help me?
Yes there is an issue in your $.each function.
$.each(result.staff,
function() {
$("#checkbox[value=" + this + "]").prop('checked');
^
Here is the issue.
});
});
As you don't have any id or class associated with element you can access it using element name/+type
You must replace your code with
$("input[type='checkbox'][value=" + this + "]").prop("checked", true);
Here I am accessing all checkboxes with values available and setting checked as true.
You're using this selector to look for checkboxes:
$("#checkbox[value...]")
However, the # symbol in a selector looks for an element with that ID.
The checkboxes in your PHP loop do not have a specified ID or class, so you could select them with:
#(":checkbox[value...]")

How to get a count of checkboxes checked on pagination Jquery dataTables

Below is my code, I want to get the count of checked checkboxes of all pages in my DataTable. Please advice how to proceed
<td align="center"><input type="checkbox" align="center" id="all" class="groupCheckBox" name="emails[]" value=' . $user['id'] . '></td>
Below code I used for get the values of checked boxes in all pages on button click
$('#merge_button').click(function () {
var id = "";
var oTable = $("#userTable").dataTable();
$(".groupCheckBox:checked", oTable.fnGetNodes()).each(function () {
if (id != "") {
id = id + "," + $(this).val();
} else {
id = $(this).val();
}
document.getElementById("email").value = id;
});
});
but now I want to count the checkedboxes without button click function whenever user clicked on checkboxes and deduct count when unchecking boxes . pls advice
var table = $("#userTable").DataTable();
var countchecked = table
.rows()
.nodes()
.to$() // Convert to a jQuery object
.find('input[type="checkbox"].groupCheckBox:checked').length;
Uses the most recent API
"...please be aware that using deferRender will cause some nodes to be created only when they are required for display, so they might not be immediately available when this method is called." from https://datatables.net/reference/api/rows().nodes()
Quite easy.
$("td input[type='checkbox']:checked").length;

2-step dynamical echo of a php in innerHTML

step 1: I have a form where input fields will be generated dynamically by innerHTML.
var d = document.getElementById("d1p_1");
d.innerHTML += "<input class='add' name='field_" + i + "' type='text'>";
step 2: now I would like to echo a php variable of each value to each dynamically generated input field. Something like:
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='"<?php echo $field_" + i + "; ?>" + "'>
How can I archieve that?
Thanks in advance.
To give further information:
This is for a form where an user can add fields, depending from how many fields he needs and will be adding. Now it could be that an user adds more fields than he usually needs and enters data somewhere between field_1 and field_280. To catch the field_x where he entered data I need to echo the value of that input field.
$field_1 = value of field_1 if given;
...
$field_280 = value of field_280 if given;
The innerHTML will add the input fields dynamically by a counter for i. So I dont know what input will be given on which field. Thats why I need to generate the PHP echo part dynamical as well. Like:
<?php echo $field_" + i + "; ?>
The whole process:
form -> contains first just one input field (user will make some inputs) -> by clicking a button there will be added further input fields (1 click 1 field and user does not need to fill in data before he can add another fields) -> now imagine that a user will add 3 fields and has given input on first and third input field -> name="field_1" and name="field_3" ->
the name of each input field is generated by i++ -> the value is empty otherwise the form will be posted -> now the user will submit the form.
this means the value to echo would be $field_3 = (isset($_POST['field_3'])) ? $_POST['field_3']; : ''; -> this variable exist for all i so each variable is set in the php part before BUT to catch the right input name="field_i" with $field_i and to echo this match is the problem.
So by clicking submit the page would be reloaded and instead of only just one input field like from before now would be there 2 input fields. first would be name="field_1" and the second would be name="field_3" because user has left out input name="field_2" before. So name="field_3" needs to echo the right value depending from a dynamically generated name="field_"+ i +"what means that when the name tag is generated dynamically the php tag needs also to be generated dynamically to match each other.
i is a JavaScript variable so including it in a php declaration is giving you problems
You may implement your string concatenation out of the php code as follows
<?php
$field_="stavo";
?>
<script type="text/javascript">
var i=10;
var d = document.getElementById("d1p_1");
d.innerHTML+= "<input class='add' name='field_" + i + "' type='text'>";
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='<?php echo $field_; ?>"+i+"'>";
</script>
Of course you must be having this in your Html
<div id="d1p_1"></div>

Use jQuery to select all labels of radio button group

I am trying to write a function that will be called if any of the labels for a group of radio buttons are clicked. So I'd like a way to refer to all the labels of the radio button group.
From another thread (this one) I read that I could do
$('#[radio_name] label').click(function(){
...
});
where [radio_name] is the name of the group of radio buttons. In fact, I'm just trying to implement the code in the referenced thread. Unfortunately it doesn't work for me, don't know why.
Some other threads suggested you could select a specific label with $('label[for=[radio_option_id]]'), where [radio_option_id] is the id of the radio button to which the label applies. However, that only works to select a single label. I need to select all the labels in the group, which have different ids.
EDIT: here is the more complete context as requested below.
var content = "<form id='question_form' name='question_form' action=''>" + page.text;
content += "<div id='radio_options'>";
for ( var i=0; i<page.answers.length; i++ ) {
content += "<input type='radio' name='radio_option' id='radio_option_" + i.toString() + "' value='" + i.toString() + "'><label for='radio_option_" + i.toString() + "'>" + page.answers[i] + "</label><br>";
}
content += "</div>";
content += "<p><input type='submit' id='submit_button' name='submit_button' value='Submit'></p></form>";
display_loc.html( content );
Use the ATTR contains selector
$('label[for*="radio"]').click(function(){
...
});
This would work for and label that contains radio within the for attribute
Eq.
<input type="radio" name="emotion" id="radio_sad" />
<label for="radio_sad">Sad</label>
<input type="radio" name="emotion" id="radio_happy" />
<label for="radio_happy">Happy</label>
Update
For you html code you can do the following.
$('#radio_options label').click(function(){
});
It sounds to me that you just need to apply a class to your different labels and access them that way. That way you can group the labels by class.
$('label.className').click(function(){
...
});

Javascript - Checkbox onclick-+ operations

i'm working on a project and try to do something with checkboxes.
when a user click to a checked checkbox total value is - reverse is +
this is my code. i use recal function to do that check box is checked and send it to js as true
echo "<td><input type=checkbox name='check1' value='".$info['eventCategory']."' onclick='recal(" . $info['totalEvents'] . ",true)' checked></td><td>" . $info['id'] . " " . $info['name'] . "</td>";
function recal(val,sum)
{
if(sum)
{
var total = document.getElementById("total").innerHTML;
total+=val;
document.getElementById("total").innerHTML=total;
}
}
</script>
when sum is come as true it doesnt not sum the value :S
looks to me like a type casting problem - change this line:
var total = document.getElementById("total").innerHTML;
to this:
var total = parseInt(document.getElementById("total").innerHTML, 10);
Also try looking at this example it should give You more overview what could've go wrong.

Categories