put focus to a textfield in popup - php

I am using a popup box for adding a category.
script for that is
<script>
function changeMenu(id)
{
if (id=='other')
{ //Getting the variable's value from a link
var loginBox = 'login-box';
$('#login-box').fadeIn(300);
var popMargTop = ($('#login-box').height() + 24) / 2;
var popMargLeft = ($('#login-box').width() + 24) / 2;
$('#login-box').css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="mask"></div>');
return false;
}
}
</script>
html for popup is
<div id="login-box" class="login-popup">
<script>
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
</script>
<img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<form method="post" class="signin" action="#" name="catform" id="catform">
<table align="center" width="500" height="200" class="border2">
<tbody><tr>
<td bgcolor="#cccccc" align="center" class="txt_users">
Add</td></tr>
<tr bgcolor="#ffffff">
<td align="center" colspan="2"><font color="#ff0000">
</font>
</td></tr>
<tr bgcolor="#eeeee1">
<td align="center"><span class="txt_sitedetails">
Name</span>
<input type="text" style="width: 300px;" value="" name="cat" id="cat" class="cat">
<input type="hidden" value="1" name="cate">
<input type="hidden" value="" name="mode">
<input type="hidden" value="" name="id">
<br><br><input type="submit" onclick="return val();" class="button" value="Submit" name="add">
</td></tr>
</tbody></table>
</form>
</div>
I have to Put focus on name textfield in popup.I tried the below script
<script type="text/javascript" language="JavaScript">
document.forms['catform'].elements['cat'].focus();
</script>
<script language="Javascript">
document.catform.cat.focus()
</script>
<script language="javascript">
$(function() {
$('input.cat').focus();
});
</script>
But none of them works

Use id attribute to set focus on textfield.
$(document).ready(function(){
$('#cat').focus();
});
Call this function in your popup page, when page load it will set focus on cat.

Related

How to send Data to PHP URL using Jquery / Ajax

I am very new to this.
How do I post data to a PHP file? I am really having problems with this. Its supposed to call the PHP file but rather than call the PHP file, its just very static and does not behave like i clicked a thing.
The first button on the div transfers the data from the first page, and moves it to the second page. then the second button is supposed to call the php URL and send the data to the php file which in turn saves the data to DB or write to the text file.
the html file with the Jquery is looking like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my_form").submit(function(){
event.preventDefault();
var username = $(this).find('#u').val();
var password = $(this).find('#p').val();
if(username == '' || password ==''){
alert('Please Enter all Data Correctly');
return false;
}
$.ajax({
type: "POST",
url : "savedata.php",
data : {
username : username,
password : password
},
cache: false,
success : function(data){
alert(data);
},
error: function(xhr,status,error){
console.error(xhr);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#loginU").toggle();
$("#loginP").toggle();
});
});
</script>
<script type="text/javascript">
function sendData(){
var username = document.getElementById('u').value;
document.getElementById('outdata').innerHTML = username;
document.getElementById('hiddenEmail').value = username;
}
</script>
<style>
.hide{
display:none;
}
.loginTable
{
margin-top: 15px;
float: right;
background-color: white;
position:absolute;
overflow:hidden;
left:906px;
top:100px;
width:365px;
height:581px;
}
.logoArea
{
margin-top: 35px;
}
.signInheader___{
position:absolute;
overflow:hidden;
left:1040px;
top:198px;
width:63px;
height:35px;
}
</style>
<link rel="stylesheet" href="styles.css">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AOL</title>
</head>
<body>
<div align="center">
<table border="0" width="100%">
<tr>
<td height="57">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </td>
</tr>
<div class="loginTable">
<form id="my_form" method="post">
<div id="loginU">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>
<input type="text" id="u" name="u" placeholder=" Username, email, or phone" oninput="sendData();" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
<div id="loginP" class="hide">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<div id="outdata" style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal; margin-top:10px;"></div>
<input type="hidden" id="hiddenEmail" />
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>
<input type="password" id="p" name="p" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" id="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
</form>
</div>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
And the PHP to save to textfile (at first) is Looking like this
<?php
$username = $_POST['u'];
$password = $_POST['p'];
$txt = "Data: \n User : $username\n Password : $password\n";
$file = fopen('servers.txt','a+');
fwrite($file,$txt);
fclose($file);
?>
How Can I get this to work? I am very new to this. Rather than send the data, its just Very static and does not do anything like calling the PHP file. Why is this so?
Edit
Edits Now Looks like this :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my_form").submit(function(){
event.preventDefault();
var u = $(this).find('#u').val();
var p = $(this).find('#p').val();
if(u == '' || p ==''){
alert('Please Enter all Data Correctly');
return false;
}
$.ajax({
type: "POST",
url : "login.php",
data : {
u : u,
p : p
},
cache: false,
success : function(data){
alert(data);
},
error: function(xhr,status,error){
console.error(xhr);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#loginU").toggle();
$("#loginP").toggle();
});
});
</script>
<script type="text/javascript">
function sendData(){
var username = document.getElementById('u').value;
document.getElementById('outdata').innerHTML = username;
document.getElementById('hiddenEmail').value = username;
}
</script>
<style>
.hide{
display:none;
}
.loginTable
{
margin-top: 15px;
float: right;
background-color: white;
position:absolute;
overflow:hidden;
left:906px;
top:100px;
width:365px;
height:581px;
}
.logoArea
{
margin-top: 35px;
}
.signInheader___{
position:absolute;
overflow:hidden;
left:1040px;
top:198px;
width:63px;
height:35px;
}
</style>
<link rel="stylesheet" href="styles.css">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AOL</title>
</head>
<body>
<div align="center">
<table border="0" width="100%">
<tr>
<td height="57">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </td>
</tr>
<div class="loginTable">
<form id="my_form" method="post">
<div id="loginU">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>
<input type="text" id="u" name="u" placeholder=" Username, email, or phone" oninput="sendData();" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
<div id="loginP" class="hide">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<div id="outdata" style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal; margin-top:10px;"></div>
<input type="hidden" id="hiddenEmail" />
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>
<input type="password" id="p" name="p" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" id="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
</form>
</div>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Your form is very complex at the moment, it seems like you have not tested the code before implementing anything.
To break it down, you can use a simple form two input fields, email and password. You can begin with two fields just.
Just like below:
<form id="myform">
<label for="email">Email</label>
<input id="email" name="email" type="email" value="" />
<label for="password">password</label>
<input id="password" name="password" type="password" value="" />
<input type="submit" value="Send" />
</form>
Then you can use the below mentioned jQuery code to check and take field values when form is submitted. also you can print the request to see if the form data has been serialized correctly.
jQuery( document ).ready(function($) {
var request;
//get form fields
$("form#getField").submit(function(event){
//preventDefault action
event.preventDefault();
if (request) {
request.abort();
}
var $sucess = false;
var $form = $(this);
//Take input fields all together, instead of taking individual values
var $inputs = $form.find("input");
//serialize() method creates a text string in standard URL-encoded notation
var serializedData = $form.serialize();
console.log(serializedData);
$inputs.prop("disabled", true);
//Ajax request
request = $.ajax({
url: "login.php",
type: "POST",
data: serializedData
});
// Load content which you wanna display after the form is submitted
request.done(function (response, textStatus, jqXHR){
$("#result").html('Submitted successfully');
$sucess=true;
});
//If request fails
request.fail(function (jqXHR, textStatus, errorThrown){
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
$("#result").html('Request Failed');
});
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
if($sucess){
$(this).submit();
}
});
});
After this has submitted you can check in the login.php submit with isset($_POST['email']) method like below:
if(isset($_POST['email']) && isset($_POST['password']) ){
//taken from form field
$data['email'] = $_POST['email'];
$data['password'] = $_POST['password'];
//authenticate the rquest and send the data to DB or write to text file
}
Then either write the data in DB or write in the text file.
Hopefully that helps. Always start slow and small.

Submit only works on second click

I have a form with a verification through Google reCaptcha. But now I have to click the submit button twice. I can't find the reason.
My form is build like this (Smarty):
<form method="post" id="form">
<input type="hidden" name="action" value="misdaden">
<table>
{foreach from=$misdaden item=item}
<tr>
<td class="coll">{$item['id']}</td>
<td class="coll">{$item['name']}</td>
<td class="coll">{$item['minmoney']}</td>
<td class="coll">{$item['maxmoney']}</td>
<td class="coll">{$item['difficulty']}</td>
<td class="coll">{$item['percentage']}%</td>
<td class="coll"><input type="radio" style="width:20px;" name="value" value={$item['id']} /></td>
</tr>
{/foreach}
</table>
<input type="submit" value="Misdaad plegen!" name="submit" class="submit" />
<!--input class="button good large" name="submit" type="submit" value="Pleeg misdaad!"-->
</form>
My script is (JQuery):
$('#form').submit(function(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('6LesiMAUAAAAAAJ8G94kKbXxJj62_U2ajn-dzJzF', {action:'misdaden'})
.then(function(token) {
$('#form').prepend('<input type="hidden" name="token" value="'+ token +'">');
$('#form').unbind('submit').submit();
});
});
});
I'm probably missing something obvious, but what?
In the jquery script, you are unbinding the submit event handler for form on execution of captcha which is not required.
Just submit the form, see below
$(document).ready(function() {
grecaptcha.ready(function() {
grecaptcha.execute('6LesiMAUAAAAAAJ8G94kKbXxJj62_U2ajn-dzJzF', {action:'misdaden'})
.then(function(token) {
$('#form').prepend('<input type="hidden" name="token" value="'+ token +'">');
$('#form').submit();
});
});
});

PHP+AJAX+MYSQL Last form entry creates a new column in MySql

Live site now
I want to create a form where the user gets to add a new question that the next user will have to answer.
I want to use the function ALTER TABLE but I'm not sure how to call that in $_Post and how to dynamically $_Get more and more columns. Any advice? I stuck and would love to have someone point me into the right direction.
Also, I'm using bootstrap if that even makes a difference.
<body>
<div class="container">
<br />
<br />
<h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<input type="text" name="question[]" placeholder="Ask a question" class="form-control" />
</td>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var i=1;
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
1st: you need to use e.preventDefault(); to prevent the page reload.
2nd: good to use $('#add_name').on('submit') instead of
$('#submit').click.
3rd: your code should looks like:
<script>
$(document).ready(function(){
var i=1;
$('#add_name').on('submit' , function(e){ // <<<<<<<<<<<<<<<<<<< 2
e.preventDefault(); //<<<<<<<<<<<<<<<<<<<< 1
$.ajax({
url:"name.php",
method:"POST",
data:$(this).serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
in name.php
<?php
print_r($_POST);
// reset of php code here
?>
you also can take a look at
Retrieving serialize data in a php file called using ajax
and
jQuery AJAX form data serialize using PHP
Your js file order should be like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="scripts/main.js"></script>

creating textbox Via js

my code was working and taking my text from textbox to next page + my Input control to next page via js but suddenly there seems to be a blunder whats wrong in following code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
function AddTextbox(){
container.innerHTML=container.innerHTML+'<input type="text" name="'+ i + '">';
i++;
}
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" onClick="AddTextbox" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<div id="targetTag"></div>
<input type="button" onClick="addElement('INPUT','targetTag',{id:'my_input_tag', name:'my_input_tag', type:'text', size:'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
Note If you bother to check the DOM after executing this in IE, you'll see that the name field is not available to you. IE declares this field to be read-only which is why you don't see it. The field will be properly submitted, however, as shown in this test code:
<?php
if (isset($_POST)) {
print '<pre>'.print_r($_POST,true).'</pre>';
}
?>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<form method="post">
<div id="targetTag"></div>
<input type="submit" value="Check"/>
</form>
<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'size':'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
$(document).ready(function() {
$('#button').click(function(){
$('#container').append('<input type="text" name="'+ i + '"><br/>')
i++;
});
});
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" id="button" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
use click function. is this you need?

Jquery UI Checkboxes - Check category only if all subcategories are checked

I have the following code. I need help fixing it such that the "Category" checkbox for each category should be checked only if all the items under that are checked.
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script language="JavaScript">
function toggleTableRows()
{
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(
function() {
$(this).attr("title","Click to Collapse")
$(this).attr("src","arrow_expanded.gif");
$('tr').siblings('#child-'+this.id).toggle();
},
function() {
$(this).attr("title","Click to Expand");
$(this).attr("src","arrow_collapsed.gif");
$('tr').siblings('#child-'+this.id).toggle();
}
);
initCheckBoxes();
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" :checkbox[name^='"+ field +"[']")
.attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length ==
$("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
.attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" :checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script language="JavaScript">toggleTableRows();</script>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
<td><img class="parent" id="0" src="arrow_collapsed.gif"
title="Click to Expand">Category - Fruits</td>
<td><input type="checkbox" name="chk0"
onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td>Apple</td>
<td><input type="checkbox" value="0" name="chk0[1]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td>Banana</td>
<td><input type="checkbox" checked value="0" name="chk0[2]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td>Orange</td>
<td><input type="checkbox" checked value="0" name="chk0[5]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
<td><img class="parent" id="1" src="arrow_collapsed.gif"
title="Click to Expand">Category - Vegetables</td>
<td><input type="checkbox" name="chk1"
onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr style="display: none;" id=child-1>
<td>Cabbage</td>
<td><input type="checkbox" checked value="0" name="chk1[21]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id=child-1>
<td>Tomatoes</td>
<td><input type="checkbox" value="0" name="chk1[26]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id=child-1>
<td>Green Peppers</td>
<td><input type="checkbox" checked value="0" name="chk1[29]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>
your html is still a mess but here is the solution
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.toggle_subcheckbox').click(function(){
$('.subcheckbox', $(this).parents('div')).toggle();
});
$('.subcheckbox input').change(function(){
$this = $(this);
var checker = true;
$('input', $this.parents('.subcheckbox')).each(function(){
if( ! $(this).is(':checked')){
checker = false
}
else {
$('.maincheckbox', $this.parents('div')).attr('checked', false);
}
});
if(checker){
$('.maincheckbox', $this.parents('div')).attr('checked', true);
}
});
$('.maincheckbox').change(function(){
var state = $(this).is(':checked');
$('.subcheckbox input', $(this).parents('div')).each(function(){
$(this).attr('checked', state);
});
});
});
</script>
<style type="text/css" media="screen">
.subcheckbox {
display: none;
}
</style>
</head>
<body>
<form id="frmDinnerMenu" method="post" action="">
<div>
<label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Fruits</label>
<input class="maincheckbox" type="checkbox" name="chk0" />
<div class="subcheckbox">
<div>
<label>Apple</label>
<input type="checkbox" value="0" name="chk0[1]" />
</div>
<div>
<label>Banana</label>
<input type="checkbox" value="0" name="chk0[2]" />
</div>
<div>
<label>Orange</label>
<input type="checkbox" value="0" name="chk0[5]" />
</div>
</div>
</div>
<div>
<label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Vegetables</label>
<input class="maincheckbox" type="checkbox" name="chk0" />
<div class="subcheckbox">
<div>
<label>Cabbage</label>
<input type="checkbox" value="0" name="chk1[21]" />
</div>
<div>
<label>Tomatoes</label>
<input type="checkbox" value="0" name="chk1[26]" />
</div>
<div>
<label>Green Peppers</label>
<input type="checkbox" value="0" name="chk1[29]" />
</div>
</div>
</div>
</form>
</body>
</html>
Add something to your inputs to distinguish them as a member of a group like a class or something ala 'class="chbVegetables"' and then use the :checked selector
$(:checkbox[name='chk1']).checked=$('.chbVegetables:not(:checked)').length == 0
Inside function toggleParentCheckboxes, try:
if ($("#"+ form +" :checkbox[name='"+ current.name +"']").length == $("#"+ form +" :checkbox[name='"+ current.name +"[]']:checked").length){
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']").attr("checked", true);
}
However, as czarchiac said, it's a little unclear what you're trying to accomplish

Categories