I have 10 inputs fields that are optional to fill out by the user and are dynamically added through jQuery upon clicking "Add another field". They are named like this:
<input name="custom_0" type="text" placeholder="Fill this out...">
<input name="custom_1" type="text" placeholder="Fill this out...">
<input name="custom_2" type="text" placeholder="Fill this out...">
...
<input name="custom_9" type="text" placeholder="Fill this out...">
I then use jQuery Ajax to serialize them and send it to a PHP for verification:
$(document).on("submit", "form", function(event) {
event.preventDefault();
$.ajax({
url: 'php/form_handler.php',
type: 'POST',
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
alert(data);
}
});
});
Here's the PHP I have right now. It contains a loop that loops 10 times and returns an error if a field isn't set:
<?php
$errors = array();
for ($i = 0; $i < 10; $i++) {
if(isset($_POST["custom_$i"])) {
// input is set, continue verification code...
} else {
$errors["custom_$i"] = "ERROR!";
}
}
// code to echo back errors
?>
The problem I have right now is that if the user has only filled out 2 of the 10 inputs, it will still return an error for inputs 3-10 even though those inputs were never set or filled out.
For example, if the user had filled out only these inputs and then submitted the form, it would return an error for inputs custom_2
to custom_9
. Why and how can I fix this?
<input name="custom_0" type="text" placeholder="Fill this out...">
<input name="custom_1" type="text" placeholder="Fill this out...">
actually, the issue is to what extent you will perform custom_$i checks ... since the dimension of your input is dynamic, you should rethink the code and send POST data as an array and iterate over it using foreach
the template for generating your input fields should be
<input name="custom[0]" type="text" placeholder="Fill this out...">
<input name="custom[1]" type="text" placeholder="Fill this out...">
then accessing the data is simply done with foreach or for starting from 0 to length of array ... but foreach is better
foreach($_POST['custom'] as $stuff){}
you can test incoming data with print_r($_POST);
to see the underlying data structure
mind you that with this approach you can't get the index where $stuff belongs to, so using array_keys($stuff) allows you to access the element as $_POST['custom'][$stuff] and access your error array using $errors[$stuff]
another approach for looping over your array is
foreach($_POST['custom'] as $key=>$value)
and access $key and $value separately , thus handling the issue described above
reference at https://stackoverflow.com/questions/183914/how-do-i-get-the-key-values-from-post
This is because you're checking against all possible inputs in your PHP (in this case 10):
for ($i = 0; $i < 10; $i++)
if(isset($_POST["custom_$i"])) {
...
What you should do is pass in the numbers you'd like to check against, not the total, and then only validate those on the PHP code.
<?php
$errors = array();
for ($i = 0; $i < 10; $i++) {
if(isset($_POST["custom_".$i])) {
// input is set, continue verification code...
} else {
$errors["custom_".$i] = "ERROR!";
}
}
// code to echo back errors
?>
Your inputs will still be set although they don't have a value.
Instead of this:
if(isset($_POST["custom_$i"]))
do this
if(isset($_POST["custom_$i"]) && $_POST["custom_$i"] != "")
Cheers
you better code your php like bellow
<?php
foreach($_POST as $cus){
if(!empty($cus))[
// the input is not empty
} else {
//the input is empty
}
}
and your inputs are set whether they are full or empty .
you are suggested to use if(!empty($_POST["custom_$i"]))
in your own code