PHP checkbox form - displaying values
Question
I have a checkbox in my contact form and I don't seem to be able to display the values in the email being sent via php. I know this is probably an isset problem, but I cannot fix it to show whether the user has clicked the checkbox or not.
Form:
<script>
function _(id){ return document.getElementById(id); }
function submitForm(){
_("mybtn").disabled = true;
_("status").innerHTML = 'please wait ...';
var formdata = new FormData();
formdata.append( "n", _("n").value );
formdata.append( "b", _("b").value );
formdata.append( "c", _("c").value );
formdata.append( "n", _("n").value );
formdata.append( "s", _("s").value );
formdata.append( "d", _("d").value );
formdata.append( "p", _("p").value );
formdata.append( "checkbox1", _("checkbox1").value );
formdata.append( "checkbox2", _("checkbox2").value );
formdata.append( "checkbox3", _("checkbox3").value );
var ajax = new XMLHttpRequest();
ajax.open( "POST", "example_parser.php" );
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
if(ajax.responseText == "success"){
_("my_form").innerHTML = '<h2>Thanks '+_("n").value+', your message has been sent.</h2>';
} else {
_("status").innerHTML = ajax.responseText;
_("mybtn").disabled = false;
}
}
}
ajax.send( formdata );
}
</script>
</head>
<body>
<form id="my_form" onsubmit="submitForm(); return false;">
<p><input id="n" placeholder="First name" required></p>
<p><input id="b" placeholder="Last name" required></p>
<p><input id="c" placeholder="C Number"></p>
<p><input id="n" placeholder="N Number"</p>
<p><input id="d" placeholder="Date of birth"></p>
<p><input id="p" placeholder="Postcode"></p>
<label for="sex">I am </label>
<select id="s" name="s">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="other">Other</option>
</select>
<label>
<p>
<br>
<input type="checkbox" name="checkbox1" value="1" id="checkbox1">
data1</label>
<br>
<label>
<input type="checkbox" name="checkbox2" value="1" id="checkbox2">
data2</label>
<br>
<label>
<input type="checkbox" name="checkbox3" value="1" id="checkbox3">
data3</label></p>
<br>
<p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>
example_parser.php:
<?php
if( isset($_POST['n']) && isset($_POST['b']) && isset($_POST['c']) && isset($_POST['n']) && isset($_POST['s']) || isset($_POST['d']) || isset($_POST['p']) && isset($_POST['checkbox1']) || isset($_POST['checkbox2']) || isset($_POST['checkbox3']) ){
$n = $_POST['n']; // HINT: use preg_replace() to filter the data
$b = $_POST['b'];
$c = $_POST['c'];
$n = $_POST['n'];
$s = $_POST['s'];
$s = $_POST['d'];
$s = $_POST['p'];
$z = $_POST['checkbox1'];
$y = $_POST['checkbox2'];
$x = $_POST['checkbox3'];
$to = "";
$from = "";
$subject = 'Please help';
$message = '<b>First Name:</b> '.$n.' <b>Last Name</b> '.$b.' <b>C Number</b> '.$c.' <b>N Number</b> '.$n.' <b>Date of Birth</d> '.$d.' <b>Postcode</b> '.$p.' <b>Sex</b> '.$s.' <b>Option1</b> '.$z.' <b>Option2</b> '.$y.' <b>Option3</b> '.$x.' <br><b>End of message, thank you</b> '.$n.' <p>'.$b.'</p>';
$headers = "From: $from\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
if( mail($to, $subject, $message, $headers) ){
echo "success";
} else {
echo "The server failed to send the message. Please try again later.";
}
}
?>
2 answers
solution1
0 2018-04-06 13:32:59
As I remember not checked checkboxes are not sent with POST . In Your php script change
$z = $_POST['checkbox1'];
to
$z = $_POST['checkbox1'] ? : 'not_checked_value';
Additionally: You assigned different post values to this same variable (look at $s ) - You are losing some post data.
Additionally 2: add name attributes to Your inputs in html - all data from forms are assigned to their names.
Additionally 3: Good practice is to name variables as their are should be, for example $sex or $gender would be better name than $s - You will quick get lost in that way.
solution2
0 2018-04-06 13:49:06
The reason why all your checkboxes are showing as checked even if they aren't is because you're manually adding all of the inputs regardless of whether they are checked or not. There's no reason to be adding each input to your FormData individually. Instead, add the entire form. You'll just need to name your form inputs inline.
Replace
var formdata = new FormData();
formdata.append( "n", _("n").value );
formdata.append( "b", _("b").value );
formdata.append( "c", _("c").value );
formdata.append( "n", _("n").value );
formdata.append( "s", _("s").value );
formdata.append( "d", _("d").value );
formdata.append( "p", _("p").value );
formdata.append( "checkbox1", _("checkbox1").value );
formdata.append( "checkbox2", _("checkbox2").value );
formdata.append( "checkbox3", _("checkbox3").value );
with
var formdata = new FormData(document.getElementById('my_form'));
and update your inputs to have a name attribute
<input id="n" name="n" placeholder="First name" required>
It would be smart to have more sensible names, but I'll leave that up to you to decide if you want to change that.
I also suggest that you learn a framework like jQuery (or Angular, whatever you want). They make using ajax a lot easier.
Further, I suggest that you clean up your isset() logic and add some parenthesis around the groups that you're trying to check. I can't tell from what you have what you're really going for there, so I can't do that for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.