My PHP not processing input from radio buttons

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>

JavaScript
​x
 
    <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 ."'";
    }
}
?>

JavaScript
 
<?phpwhile (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"];

JavaScript
 
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!

Answer

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>

JavaScript
 
<!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>

Advertisement

Answer