I was working on creating checkbox inside checkbox which all should appear inside a dropdownlist box. I was succeeded in creating a couple of checkboxes inside a dropdownlist box. follow the link http://vignesh.gvignesh.org/metroplots/drp/drpcheck.php
Now i am trying to create a checkbox which should appear once user clicks one checkbox. For instance if user checks documents then a couple of checkbox should appear below that checkbox.
Eg. []Documents (if user checks main, the sub checkboxes should appear)
[]Doc 1
[]Doc 2
[]Doc 3
[]Phots (if user checks)
[]photo 1
[]photo 2
[]photo 3
How to attain this through javascript or jquery.
Thanks in Advance. !!
There are different ways to do this. This is what I have done:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.team').on('click',function(){
if($(this).is(':checked')){
$(this).next().next().show();
}else{
$(this).next().next().hide();
}
});
});
</script>
</head>
<body>
<form name="FootballClubs">
<input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br />
<input type="checkbox" class="player" value="SA"/>Shabi Alanso<br />
<input type="checkbox" class="player" value="IC"/>Iker Casillias<br />
</div>
<input type="checkbox" class="team" value="ManCity"/>Man City<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="SA"/>Sergio Aguero<br />
<input type="checkbox" class="player" value="SM"/>Super Mario<br />
</div>
</form>
</body>
</html>
This is fully working example. Also, you can unchecked the checked elements, when they are hidden again.
Related
EDIT:
Some more searching on the wide web led me to this... Later on, in my form, I disable these radio buttons to prevent users from changing their previous answers after some time... Is it possible that the PHP is not reading the diasabled buttons?
How should I then prevent the change of radio button states AND still have readable radios?
I've been searching through related questions but it seems none of them covers the same problem I'm dealing with...
First, a short snippet of my form:
<form id="matkut" method="post" action="/beirm.php">
<input type="submit" value="TESZT BEADÁSA" />
<select id="gender" name="SQL_kernev2" size="2" required>
<option value="nemL">lány</option>
<option value="nemF">fiú</option>
<option value="nemX">egyéb / nem adom meg</option>
</select>
<div class="radioArea">
<input type="radio" class="TestQans" name="SQL_aprogram" value="-" checked />
<input type="radio" id="aTQ1" class="TestQans" name="SQL_aprogram" value="A" />
<label for="aTQ1">A</label>
<input type="radio" id="bTQ1" class="TestQans" name="SQL_aprogram" value="B" />
<label for="bTQ1">B</label>
<input type="radio" id="cTQ1" class="TestQans" name="SQL_aprogram" value="C" />
<label for="cTQ1">C</label>
<input type="radio" id="dTQ1" class="TestQans" name="SQL_aprogram" value="D" />
<label for="dTQ1">D</label><br />
<input type="radio" id="xTQ1" class="TestQans" name="SQL_aprogram" value="x" />
<label for="xTQ1">random label here</label>
</div>
</form>
I'd like to precess the data with this PHP below:
<?php
while (list($valtozo, $ertek) = each($_POST)) {
if(substr($valtozo,0,4)=="SQL_"){
if(strlen($fieldstring)>0){
$fieldstring= "$fieldstring," ;}
$fieldstring= $fieldstring. " " . substr($valtozo,4);
if(strlen($valuestring)>0){
$valuestring="$valuestring," ;}
$valuestring="$valuestring '". $ertek ."'";
}
}
?>
The problem is that this code is perfectly processing the <select> field (many of them, actually; plus some text fields) BUT fails to even read any (neither the pre-checked nor any other clickable) input from the <input type="radio">
echo $_POST["SQL_kernev2"];
echo $_POST["SQL_aprogram"];
The first echo perfectly displays the selected value but the second one does not return a thing no matter wat I click, or change on checked / not checked options in the HTML above.
Any good advices?
What am I missing? What should I change? How to get this radio-reading-PHP fixed?
Many thanks!
Just setting the radio buttons to readOnly might be enough for your purposes, but if you need to disable the buttons then you can still read the checked status in JavaScript. If you do that you can assemble the form data in a FormData object and send it with AJAX instead of using the browser's submit.
Here's a proof of concept based on your question and comments above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit Disabled buttons</title>
<style>
#container {
width:400px;
margin: 100px auto;
position:relative;
padding:10px;
border:2px solid darkblue;
border-radius: 20px;
}
#countdown {
position:absolute;
top:10px;
right:10px;
border:1px solid grey;
min-width: 100px;
text-align: right;
padding:3px;
}
</style>
</head>
<body>
<div id="container">
<div id="countdown"></div>
<form id="myForm">
<label for="sel1">Select One:</label>
<select name="sel1" id="sel1">
<option value="s1">Option 1</option>
<option value="s2">Option 2</option>
<option value="s3">Option 3</option>
<option value="s4">Option 4</option>
</select>
<br>
<br>
<input type="radio" name="rd1" value="1" id="rd1" checked>
<label for="rd1">A</label>
<input type="radio" name="rd1" value="2" id="rd2">
<label for="rd2">B</label>
<input type="radio" name="rd1" value="3" id="rd3">
<label for="rd3">C</label>
<input type="radio" name="rd1" value="4" id="rd4">
<label for="rd4">D</label>
<input type="submit" value="Submit" name="submit" id="submit">
</form>
</div>
<script>
(function(){
"use strict;"
console.log("IIFE executing");
function sendData(e) {
// We don't want the browser's default submit
e.preventDefault();
console.log("sending data")
disableRadioButtons(); // Just so we don't append them twice
// Get the form data, except the radio buttons
let formData = new FormData(this);
// Get a list of radio buttons and add the checked ones to the form data
let radioList = this.querySelectorAll('input[type=radio]');
radioList.forEach(el=>{if (el.checked){
formData.append(el.name, el.value);
}});
// Now send the assembled data
fetch('myURL',{
method:'POST',
body:formData
});
}
// Disable radio buttons
function disableRadioButtons() {
document.querySelectorAll('input[type=radio]').forEach(el=>{el.disabled=true;})
}
// Set up a countdown timer
let countdown = document.getElementById('countdown');
countdown.innerText = 5;
let timeOut = setInterval( function(){
countdown.innerText = parseInt(countdown.innerText,10)-1;
// If countdown expires, disable the radio buttons
if (countdown.innerText == 0) {
console.log("disabling radio buttons")
clearInterval(timeOut);
countdown.innerText ="Time's up";
disableRadioButtons();
}
},1000)
// Add a handler for the form submit event.
document.getElementById('myForm').addEventListener('submit', sendData);
})();
</script>
</body>
</html>
<head>
<title>jQuery Add & Remove Dynamically Input Fields in PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>jQuery Add & Remove Dynamically Input Fields in PHP</h1>
<form method="post" action="">
<div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
<input type="checkbox" name="caf[]" class="checkbox-inline caf" />
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
<input type="checkbox" name="caf[]" class="checkbox-inline caf" />
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function() {
if ($('body').find('.fieldGroup').length < maxGroup) {
var fieldHTML = '<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
});
});
</script>
</body>
in the above code i get the check box values but not corresponding to the text field value
kindly help
i need out put as the data for eg
if i entered abcd then check one check box associated with it the the out i need is abcd-value of checkbox clicked
this will repetet up to the number of input group
I assume "cdrtxt" is in the same node as ".cdr"?
Use .parent() on ".cdr"
$(document).on('click', '.cdr', function() {
alert(1);
$(this).parent().find('.cdrtxt').val("1");
});
There are several issues with this one line of code:
$("this").find('.cdrtxt').val("1");
There is no such thing as $("this"). At least if you do not have a non-standard <this> tag in your HTML. When you want to refer to the node that received the event and wrap it in a jQuery object, you should use $(this) <-- no quotes.
There is no cdrtxt class in your HTML code.
The solution in your case is to search for the text input sibling of the clicked checkbox. Something like:
$(this).siblings('input[type=text]').val('something');
<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
You can not properly associate the text input field values and checkbox values, using this naming scheme.
Text fields always cause an entry in the form submission data set, even if they are empty - checkboxes don’t, they only create one if they actually where checked.
If you had the above combination of fields four times, but you only checked the first and third checkbox, then you would get $_POST['phno'] as an array of four text values, indexed from 0 to 3, and $_POST['cdr'] would contain only two checkbox values (you did not specify one here explicitly, so those checkboxes would submit the value on), indexed with 0 and 1.
Based on those indexes, it is impossible to tell now, which of those checkboxes where checked. If you had checked the third and fourth instead, you would still get those values under the indexes 0 and 1.
You need to specify the index upfront here:
<input type="text" name="phno[0]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[0]" class="checkbox-inline cdr" />
and that 0 needs to become 1 for the next set, and so on.
Then the checked checkboxes would get an index that corresponds to that of the text field.
There would still be “holes” in the indexes in $_POST['cdr'] - if you checked the first (index 0) and fourth (index 3) one, then $_POST['cdr'][0] and $_POST['cdr'][3] would be set afterwards.
But if you loop over $_POST['phno'], which contains all indexes from 0 to 3, then you can use that index value to check if the corresponding index in $_POST['cdr'] is set.
So you will have to modify your JavaScript part, that simply “clones” those existing rows, so that it sets the proper fields names, including the index.
The problem with checkbox is that if it is not checked then it is not posted with the form. If you check a checkbox and post a form you will get the value of the checkbox in the $_POST variable , if it's unchecked no value will be assigned to the $_POST variable. So as to know which checkbox is checked assign a distinct value to it.This code might solve your problem
<?php
if(isset($_POST['submit'])){
if(isset($_POST['checkbox'])){
echo 'Checkbox: ';
print_r($_POST['checkbox']);
}
if(isset($_POST['text'])){
$text=$_POST['text'];
echo 'Textbox: ';
print_r($text);
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" action="tests.php">
<input type="checkbox" name="checkbox[]" class="check" value="1">
<br>
<input type="checkbox" name="checkbox[]" class="check" value="2">
<br>
<input type="checkbox" name="checkbox[]" class="check" value="3">
<br>
<input type="text" name="text[]" class="text">
<br>
<br>
<input type="submit" name="submit">
</form>
<button id="add">ADD</button>
</body>
<script>
$(document).ready(function()
{
$('#add').on('click',function()
{
var breaks="<br>"
var checkbox="<br>";
var textbox="<br><input type='text' name='text[]' class='text'>";
var check_length=$('.check').length;
console.log(check_length);
for(var i=check_length+1;i<check_length+4;i++)
{
checkbox=checkbox+"<input type='checkbox' name='checkbox[]' class='check' value='" + i + "'><br>";
}
$('input[type="text"]').last().after(checkbox,textbox);
});
});
</script>
</html>
This question already has answers here:
Show and hide, enable and disable depending on radios and checkboxes
(4 answers)
Closed 7 years ago.
Reposting this question. I need to approach it from a different way than
Show and hide, enable and disable depending on radios and checkboxes
My old way below:
First I am not supposed to use the click function for radio buttons. I need to check if radio buttons are checked and then display the electronics div or cookware-items div accordingly. Also need to display both if the radio button option "both" is checked.
The textbox fields in electronics div and cookware items div for the user to input quantities should be displayed only when the checkbox for the respective electronics or cookware item is checked.
Any inputs ?
<html>
<head>
<script src="jquery-1.11.0.js"></script>
<style>
div{display:none}
</style>
</head>
<body>
<form>
<input type="radio" name="household" id ="electronics" value="electronics">Electronics<br>
<input type="radio" name="household" id="cookware" value="cookware">Cookware<br>
<input type="radio" name="household" id="both" value="both">Both<br>
</form>
<script>
$(document).ready(function(){
$(input[type="radio"]).click(function(){
$("#electronics").show;
});
});
</script>
<div id="electronics">
<input type="checkbox" value="radio" name="radio">Radio 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="phone" name="phone">Phone 2000 <input type="textbox" name="text2"><br>
<div id="cookware-items">
<input type="checkbox" value="grinder" name="grinder">Grinder 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="mixer" name="mixer">Mixer 2000 <input type="textbox" name="text2"><br>
</div>
</body>
</html>
Edit checkbox Cookware's value to cookware-items
Using jquery hide and show like this:
Live demo: http://code.freetuts.net/editor.html?id=241
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
div{display:none}
</style>
</head>
<body>
<form>
<input type="radio" name="household" value="electronics">Electronics<br>
<input type="radio" name="household" value="cookware-items">Cookware<br>
<input type="radio" name="household" value="both">Both<br>
</form>
<script>
$(document).ready(function() {
$('input[name="household"]').click(function()
{
// Hide 2 divs
$('#electronics').hide();
$('#cookware-items').hide();
// Show by current checkbox
var value = $(this).val();
if (value == 'both'){
$('#electronics').show();
$('#cookware-items').show();
}
else{
$('#'+value).show();
}
});
});
</script>
<div id="electronics">
<input type="checkbox" value="radio" name="radio">Radio 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="phone" name="phone">Phone 2000 <input type="textbox" name="text2"><br>
</div>
<div id="cookware-items">
<input type="checkbox" value="grinder" name="grinder">Grinder 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="mixer" name="mixer">Mixer 2000 <input type="textbox" name="text2"><br>
</div>
</body>
</html>
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script>
function c(){}
function test(){
if(document["f1"]["chkGuar"].checked){
document.getElementById("myrow").style.visibility="visible"
}
else{
document.getElementById("myrow").style.visibility="hidden"
}
}
</script>
</HEAD>
<BODY>
<FORM NAME="f1">
<input type="checkbox" name="chkGuar" value="ON" onclick = "c() ; test()">
<div id="myrow" style="visibility:hidden">
<input type = text name ='txtGRTNo' tabindex = 19 size="20"></div>
<div width="338" align="left" colspan="3" height="12"></div>
</FORM>
</BODY>
</HTML>
Here in this code, the text box opens in the same page but I want my text box to be displayed in another page (usually in the action page). I am working in a bus website, I want, when an user checks a checkbox (1 or more) to select a seat, I want that no of text boxes to be opened in the next page after the check boxes checked.
Here is the code you want. check it and let me know.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<FORM NAME="f1" action="next_page.php" method="post">
<input type="checkbox" name="chkGuar[]" value="mike"> Mike<br />
<input type="checkbox" name="chkGuar[]" value="joy"> Joy<br />
<input type="checkbox" name="chkGuar[]" value="harry"> harry<br />
<input type="checkbox" name="chkGuar[]" value="watson"> watson<br />
<input type="checkbox" name="chkGuar[]" value="george"> george<br />
<input type="checkbox" name="chkGuar[]" value="peter"> Peter<br />
<input type="submit" name="chksbmt" value="Send" />
<!-- <div id="myrow" style="visibility:hidden">
<input type = text name ='txtGRTNo' tabindex = 19 size="20">
</div>
<div width="338" align="left" colspan="3" height="12"></div> !-->
</FORM>
</BODY>
</HTML>
next_page.php
<?php
if(isset($_POST['chksbmt'])){
$counts = count($_POST['chkGuar']);
echo "this is the next page. you checked $counts checkbox <br /><br />";
for($i=1;$i<=$counts;$i++){
echo "<input type='text' style='border:1px solid #000;' value='your text box here'
/><br/><br/>";
}
}
Hi this is code like your requirement try it
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
function c(){
alert("Hi");
this.f1.submit();
}
function test(){
if(document["f1"]["chkGuar"].checked){
document.getElementById("myrow").style.visibility="visible"
}
else{
document.getElementById("myrow").style.visibility="hidden"
}
}
</script>
</HEAD>
<BODY>
<FORM NAME="f1" action="next_page.php" method="post">
<input type="checkbox" name="chkGuar" value="ON" onclick = "c() ; test()">
<!-- <div id="myrow" style="visibility:hidden">
<input type = text name ='txtGRTNo' tabindex = 19 size="20">
</div>
<div width="338" align="left" colspan="3" height="12"></div> !-->
</FORM>
</BODY>
</HTML>
next_page.php
<?php
if(isset($_POST['chkGuar'])){
echo "this is the next page. <br />";
echo "<input type='text' style='border:1px solid #000;' value='your text box here' />";
}
You have to create a second page that get the request.
On the first one, make your for to post to the second path (action and method attributs that are missing in your code).
And then display in the textbox in the second page the content you want from the first one, based on the checkbox checked.
This is the way I see.
Guys Here is the checkboxes, where it displays in tree structure. I need it to be displayed inside the dropdown.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.team').on('click',function(){
if($(this).is(':checked')){
$(this).next().next().show();
}else{
$(this).next().next().hide();
}
});
});
</script>
</head>
<body>
<form name="FootballClubs">
<input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br />
<input type="checkbox" class="player" value="SA"/>Shabi Alanso<br />
<input type="checkbox" class="player" value="IC"/>Iker Casillias<br />
</div>
<input type="checkbox" class="team" value="ManCity"/>Man City<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="SA"/>Sergio Aguero<br />
<input type="checkbox" class="player" value="SM"/>Super Mario<br />
</div>
</form>
</body>
</html>
I am trying to populate inside a dropdown. Help me.
Thanks in Advance.!!
Look at jquery UI widget and jSTree