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>
Related
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>
Within my application I have a 3 steps registration form. In part one someone has
to select a package (member ship).
Here I need one group of radio buttons but because I am handeling 3 packages with each
2 options, with a lot of html between each 2 radio buttons I need to separate the
radio buttons and getting them one by one. the separate option for this is probably not
enough because it's not consistent with html and there can be a lot of html between.
Thanks! =)
You can do this using js hide-show
<script>
$(function(){
$("#package1").on(click,function(){
$("#p1").show();
});
$("#package2").on(click,function(){
$("#p2").show();
});
$("#package3").on(click,function(){
$("#p3").show();
});
});
</script>
<style>
.hidden {
display: none;
}
</style>
<input type="radio" name="package" id="package1" value="Package1">
<input type="radio" name="package" id="package2" value="Package2">
<input type="radio" name="package" id="package3" value="Package3">
<input class="hidden" type="radio" id="p1" name="p1option" value="P1 Option1">
<input class="hidden" type="radio" id="p1" name="p1option" value="P1 Option2">
<input class="hidden" type="radio" id="p2" name="p3option" value="P2 Option1">
<input class="hidden" type="radio" id="p2" name="p2option" value="P2 Option2">
<input class="hidden" type="radio" id="p3" name="p1option" value="P2 Option1">
<input class="hidden" type="radio" id="p3" name="p3option" value="P2 Option2">
I have form that has 2 radio buttons(Yes and No) and a text box. If the user clicks Yes it enables the text box you can input information and it is uploaded to the database including the value from the radio buttons. If you click no it disables the text box and suppose to upload the value of the radio box only to the database. But I am not getting that.
<input type="radio" name="TermLease" value="No" onclick="TermLeaseMonths.disabled=true">No
<input type="radio" name="TermLease" value="Yes" onclick="TermLeaseMonths.disabled=false">Yes |
How many months:<input type="hidden" name="TermLeaseMonths" value="0" />
<input type="text" name="TermLeaseMonths" id="TermLeaseMonths" size="1" disabled="true">
I have a hidden input type that uploads the value. But when I click yes it does not disable the text box. Not sure where I am going wrong.
You forgot give id for the text field. Try this
<input type="radio" name="TermLease" value="No" onclick="TermLeaseMonths.disabled=true">No
<input type="radio" name="TermLease" value="Yes" onclick="TermLeaseMonths.disabled=false">Yes |
How many months:<input type="hidden" name="TermLeaseMonths" value="0" />
<input type="text" name="TermLeaseMonths" id="TermLeaseMonths" size="1" disabled="true">
Try this on click of radio button we can do by this way
$('#radio').click(function () {
if (("#radio").val() == "") {
$('class_name_oftextBox').attr("disabled", true);
} else {
$('class_name_oftextBox').removeAttr("disabled");
}
});
Or you can do this as
$('#enable').click(function () {
$('#textBox').removeAttr("disabled")
});
$('#disable').click(function () {
$('#textBox').attr("disabled", "disabled");
});
Demo jsFiddle
HTML
<form>
<span style="float: left;">
<label><input type="radio" name="TermLease" value="No" onclick="ShowHideTextbox('leaseMonths', false)" />No</label>
<label><input type="radio" name="TermLease" value="Yes" onclick="ShowHideTextbox('leaseMonths', true)"/>Yes</label>
</span>
<span id="leaseMonths" style="display: none; float: left;">
<span> | </span> <span>How many months: </span>
<input type="text" name="TermLeaseMonths" id="TermLeaseMonths" size="1" />
</span>
</form>
JS
var previousNumberOfMonths = "0";
function ShowHideTextbox(elementId, show) {
var link = document.getElementById(elementId);
var textbox = document.getElementById("TermLeaseMonths");
if (show){
textbox.value = previousNumberOfMonths;
link.style.display = 'block';
}
else {
link.style.display = 'none';
previousNumberOfMonths = textbox.value;
document.getElementById("TermLeaseMonths").value = "0";
}
}
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.
This is my code.
<?php
$qry5=mysql_query("SELECT * FROM `questions` WHERE `questnTime`=curdate()");
$quest=mysql_fetch_array($qry5);
?>
<form id="form" name="form" action="">
<textarea name="questn" id="questn" readonly="readonly" cols="45" rows="5">
<?php echo $quest['questnId']; ?>. 
<?php echo $quest['question'];?>
</textarea>
<input type="submit" class="myButton" name="option"
onclick="handleSubmit(this)" value="<?php echo $quest['optiona'];?>"/>
<input type="submit" class="myButton" name="option"
onclick="handleSubmit(this)" value="<?php echo $quest['optionb'];?>"/>
<input type="submit" class="myButton" name="option"
onclick="handleSubmit(this)" value="<?php echo $quest['optionc'];?>"/>
<input type="submit" class="myButton" name="option"
onclick="handleSubmit(this)" value="<?php echo $quest['optiond'];?>"/>
</form>
<?php
if($quest['answer']==$_GET['option']){
$option=$_GET['option'];
}
Javascript code:
<script type="text/javascript">
function handleSubmit(current){
var list = document.getElementsByName('option');
for(var i=0;i<list.length;i++){
if(list[i]!=current)
list[i].disabled=true;
}
alert('all disabled');
}
</script>
CSS:
<style>
input.myButton{
background-image: url('option.png');
background-color:#FFF;
height:32;
width:32;
border-style:hidden;
color: #FFFFFF;
}
</style>
What I require is when user clicks on an option all other options must be disabled. When an option is clicked, I want to get the value. Also I dont want the page to be refreshed. How to do this? The following code dosenot disable the options. Please help me!!!
In this case not make multiple submits put them as a button and when clicked then make all disable except clicked one and change input type as submit.