This is a truly bizarre issue.
When submitting a PHP form, I keep getting the “undefined array key” error. This is happening because the radio button, although you can visually see it is checked, the input / value is not being passed during form submission.
I’ve tried:
- forcing the button to be checked with Jquery
- forcing the attribute “checked” on click with Jquery
- MANUALLY marking the radio as checked by adding it to the HTML input
<input type="radio" value="something" checked="checked">
I triple checked to make sure the input name matches what PHP is expecting, and also looked in the console under the Network tab and viewed the payload. No matter what I try, the radio input, even when marked checked visually and semantically, it is not being passed along with the rest of the form data.
Here is the form code in it’s entirety (using Twig for template engine):
<form id="bibleStudyQuiz" method="post" action="{{ base_url }}study/quiz_results/">
{% for i in 1..total_records %}
<input id="answer-{{ i }}" name="answer-{{ i }}" type="hidden" value="{{ results[i-1]['answer']|replace({''': "'"})|raw }}">
<input id="questionText-{{ i }}" name="questionText-{{ i }}" type="hidden" value="{{ results[i-1]['question'] }}">
{% endfor %}
<input type="hidden" name="totalrecords" value="{{ total_records }}">
{% for key,question in results %}
<div class="aiia-wizard-step" id="quizQuestionnaire" data-id="1">
<h5 class="card-title">{{ question.question }}</h5>
<div class="step-content">
<p class="card-text">
<div class="row mb-2" style="text-align: left;">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-check">
<input name="question{{ key+1 }}" class="form-check-input" type="radio" value="{{ question.opt1 }}" id="{{ question.opt1 }}">
<label class="form-check-label" for="{{ question.opt1 }}"> {{ question.opt1 }} </label>
</div>
</div>
<div class="col-sm-4">
<div class="form-check">
<input name="question{{ key+1 }}" class="form-check-input" type="radio" value="{{ question.opt2 }}" id="{{ question.opt2 }}">
<label class="form-check-label" for="{{ question.opt2 }}"> {{ question.opt2 }} </label>
</div>
</div>
<div class="col-sm-2"></div>
</div>
<div class="row" style="text-align: left;">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-check">
<input name="question{{ key+1 }}" class="form-check-input" type="radio" value="{{ question.opt3 }}" id="{{ question.opt3 }}">
<label class="form-check-label" for="{{ question.opt3 }}"> {{ question.opt3 }} </label>
</div>
</div>
<div class="col-sm-4">
<div class="form-check">
<input name="question{{ key+1 }}" class="form-check-input" type="radio" value="{{ question.opt4 }}" id="{{ question.opt4 }}">
<label class="form-check-label" for="{{ question.opt4 }}"> {{ question.opt4 }} </label>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</p>
</div>
</div>
{% endfor %}
</form>
Here’s the PHP code that processes the form:
public function quiz_results()
{
if ( empty( $_POST ) )
{
$this->redirect( 'study/quiz/' );
exit;
}
$max = $_POST['totalrecords'];
$question = [];
$correct_answers = 0;
for ( $i = 1; $i <= $max; $i++ )
{
// Gather questions and answers to pass to twig
$question[$i]['text'] = $_POST["questionText-$i"];
$question[$i]['answergiven'] = $_POST["question{$i}"];
$question[$i]['correctanswer'] = $_POST["answer-{$i}"];
// Grade the responses
if ( $question[$i]['answergiven'] == $question[$i]['correctanswer'] )
{
$correct_answers = $correct_answers + 1;
}
}
$percent = ( $correct_answers / $_POST['totalrecords'] ) * 100;
$this->template->render( "studyquiz-results.html.twig",
[
'question' => $question,
'correct_answers' => $correct_answers,
'total_records' => $_POST['totalrecords'],
'percent' => (int) $percent,
]
);
}
Thank you in advance for any help!