Jump to content

collecting data from multiple html inputs


Go to solution Solved by Barand,

Recommended Posts

I have the set up below in my form.

<label for="question">Sub Question <span class="req">*</span></label><textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here.."></textarea><div class="divider "></div><div class="divider"></div><textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice A here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img0" style="display: none;">Add Choice A Image(if any..)</label><input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"><br><br><textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice B here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img0" style="display: none;">Add Choice B Image(if any..)</label><input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"><br><br><textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice C here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img0 " style="display: none;">Add Choice C Image(if any..)</label><input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"> <br><br><textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice D here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img0" style="display: none;">Add Choice D Image(if any..)</label><input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"><li><label for="question">Sub Question <span class="req">*</span></label><textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here.."></textarea><div class="divider "></div><div class="divider"></div><textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice A here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img1" style="display: none;">Add Choice A Image(if any..)</label><input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"><br><br><textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice B here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img1" style="display: none;">Add Choice B Image(if any..)</label><input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"><br><br><textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice C here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img1 " style="display: none;">Add Choice C Image(if any..)</label><input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"> <br><br><textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice D here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img1" style="display: none;">Add Choice D Image(if any..)</label><input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"><li><label for="question">Sub Question <span class="req">*</span></label><textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here.."></textarea><div class="divider "></div><div class="divider"></div><textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice A here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img2" style="display: none;">Add Choice A Image(if any..)</label><input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"><br><br><textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice B here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img2" style="display: none;">Add Choice B Image(if any..)</label><input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"><br><br><textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice C here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img2 " style="display: none;">Add Choice C Image(if any..)</label><input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"> <br><br><textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice D here.." style="display: none;"></textarea><label for="image" class="opt_img opt_img2" style="display: none;">Add Choice D Image(if any..)</label><input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"></li>

How can I get the data and validate that it is set in php??
each sub question can have a set of multiple choices either text or file but not both.and this is not
a must.

without some examples, the uncommented, wall of markup and your statement doesn't make sense.

are you adding these sub questions dynamically? are the number of choices per sub question dynamic? do you mean that all the choices for a sub question will be either text or they will be files? if so, you would have a radio field to show just the text fields or the file fields for that sub question.

i would hope you are dynamically producing this markup? you should not use a series of name-numbered things. use an array instead. the labels are invalid (ids must be unique.) you would either generate unique ids, or more simply put the closing </label> tag after the form field it corresponds to.

I have no idea why you are using inline style to hide inputs. Are you trying to implement a rogue type="hidden" format? Makes no sense, none at all.

Meantime, the subquestion array in this form will never be empty because the keys will be sent in the post (with empty values). You could hack a bit to force detection but this just illustrates that your code is sloppy and unorthodox. I suggest that you read more about html forms and structures of forms. You could make a new post in the html subforum here at phpfreaks.

So to show you how subquestions could be handled, i have spent a few minutes creating a script with your messy code that i had to format in addition to hacking. Here is a working attempt to detect empty or not empty and display the results. If all values are empty then the subquestion has not been populated with values, otherwise the values will be shown. For the record, i am not a fan of form input arrays.

<?php declare (strict_types = 1);
switch ($_SERVER['REQUEST_METHOD']) {
  case 'GET':
?>
<form autocomplete="off" method="post">

<label for="question">Sub Question <span class="req">*</span></label>
<textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here.."></textarea>

<div class="divider "></div>
<div class="divider"></div>

<textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice A here.." style="display: none;"></textarea>
<label for="image" class="opt_img opt_img0" style="display: none;">Add Choice A Image(if any..)</label>
<input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice B here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img0" style="display: none;">Add Choice B Image(if any..)</label>
<input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice C here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img0 " style="display: none;">Add Choice C Image(if any..)</label>
<input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"> <br><br>
<textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice D here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img0" style="display: none;">Add Choice D Image(if any..)</label>
<input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;">
<li><label for="question">Sub Question <span class="req">*</span></label>
<textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here..">
</textarea>

<div class="divider "></div>
<div class="divider"></div>

<textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice A here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img1" style="display: none;">Add Choice A Image(if any..)</label>
<input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice B here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img1" style="display: none;">Add Choice B Image(if any..)</label>
<input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice C here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img1 " style="display: none;">Add Choice C Image(if any..)</label>
<input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"> <br><br>
<textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice D here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img1" style="display: none;">Add Choice D Image(if any..)</label>
<input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;">
<li><label for="question">Sub Question <span class="req">*</span></label>
<textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here..">
</textarea>

<div class="divider "></div>
<div class="divider"></div>

<textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice A here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img2" style="display: none;">Add Choice A Image(if any..)</label>
<input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice B here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img2" style="display: none;">Add Choice B Image(if any..)</label>
<input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice C here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img2 " style="display: none;">Add Choice C Image(if any..)</label>
<input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"> <br><br>
<textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice D here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img2" style="display: none;">Add Choice D Image(if any..)</label>
<input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"></li>

<input type="submit">

</form>

<?php

  break;
  case 'POST':
	$countQuestions = count($_POST['subquestion']);
	$checkEmpty = 0;
	foreach ($_POST['subquestion'] as $value) { if (empty($value)) { $checkEmpty++; } }

    if ($checkEmpty === $countQuestions) {
	  echo 'subquestion is empty'; break;
	}
    foreach ($_POST['subquestion'] as $value) { echo $value . '<br>'; }

  break;
  default:
      echo 'Request Method denied';
  break;
}
?>

Hopefully you can create a cleaner, nicer form and process the form correctly. phpfreaks has lots of professionals that can help you when you have problems along the way. I suggest that if you continue using arrays, then atleast provide keys that can be checked for empty.

I did not consider that someone may see my post and not understand that the code posted is just an example of how to detect empty of this array. I hope that viewers understand to escape the output after validation (code not included). I should have used the following code in my post to avoid security problems:

foreach ($_POST['subquestion'] as $value) {
  echo htmlentities($value, ENT_QUOTES, 'UTF-8') . '<br>';
}

my code sample is not a valid solution to be applied online, rather in a testing environment.

  • Solution
5 hours ago, jodunno said:

i am not a fan of form input arrays.

Judicious application of array key names can greatly increase the efficiency and simplicity of your code. Consider this simplified version of the questions/options form code

<form method='post' >
    <?php    
        for ($qno=1; $qno<=2; $qno++)  {
            
            echo <<<HTML
            <label>
                Sub Question $qno <span class="req">*</span>
                <textarea cols="46" rows="3" name="Q[$qno][question]" placeholder="Enter Sub question here.."></textarea>
            </label>
            <ul>
HTML;
            for ($opt='A'; $opt<='D'; $opt++)  {
                echo <<<HTML
                <li>Choice $qno$opt (text)&nbsp;
                <input type='text'  name="Q[$qno][opts][$opt]"  placeholder="Enter Choice A here.." size='40'>
                </li><br><br>\n
HTML;
            }
            echo "</ul><hr>\n";
        }

    ?>

    <input type='submit'>
</form>

producing...

image.png.607e3ca0ae02ad40295dda1de0031e9e.png

When the form is submitted, the POST array is like this...

Array
(
    [Q] => Array
        (
            [1] => Array
                (
                    [question] => aaaaaaaaaaaaaaaaaaaaaaaaaaa
                    [opts] => Array
                        (
                            [A] => aa
                            [B] => bb
                            [C] => cc
                            [D] => dd
                        )
                )

            [2] => Array
                (
                    [question] => bbbbbbbbbbbbbbbbbbbbbbbbb
                    [opts] => Array
                        (
                            [A] => ww
                            [B] => xx
                            [C] => yy
                            [D] => zz
                        )

                )

        )

)

Now you can easily iterate through the array to write the questions/options to you database

foreach ( $_POST['Q'] as $qno => $qdata )   {
    write $qno and $qdata['question'] to question table
    save last insert id as $qid
    
    foreach ( $qdata['opts'] as $ono => $choice )   {
        write $qid, $ono, $choice to choice table
    }

}

Job Done.

  • Like 1
  • Thanks 1

@Barand You, Sir, are a veteran professional programmer and it always shows in your posts. Me, on the other hand, i am more of a hacker that is slowly learning from pros. Your code is a beautiful example of a well designed form and form processing script. Bravo! Hopefully, the OP can see the beauty of your work and follow this lead.

Meantime, your "Judicious application of array key names" is a perfect example of how i can use this concept in future designs. I have copied this code to a text file for future reference. Pros can easily illustrate its usefulness. Thank you for educating me on this subject . Point well noted 🙂

edit: Dear Barand, please change the following sentence "Job Done." to "Job Well Done."

Edited by jodunno
9 hours ago, jodunno said:

I have no idea why you are using inline style to hide inputs. Are you trying to implement a rogue type="hidden" format? Makes no sense, none at all.

Meantime, the subquestion array in this form will never be empty because the keys will be sent in the post (with empty values). You could hack a bit to force detection but this just illustrates that your code is sloppy and unorthodox. I suggest that you read more about html forms and structures of forms. You could make a new post in the html subforum here at phpfreaks.

So to show you how subquestions could be handled, i have spent a few minutes creating a script with your messy code that i had to format in addition to hacking. Here is a working attempt to detect empty or not empty and display the results. If all values are empty then the subquestion has not been populated with values, otherwise the values will be shown. For the record, i am not a fan of form input arrays.

<?php declare (strict_types = 1);
switch ($_SERVER['REQUEST_METHOD']) {
  case 'GET':
?>
<form autocomplete="off" method="post">

<label for="question">Sub Question <span class="req">*</span></label>
<textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here.."></textarea>

<div class="divider "></div>
<div class="divider"></div>

<textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice A here.." style="display: none;"></textarea>
<label for="image" class="opt_img opt_img0" style="display: none;">Add Choice A Image(if any..)</label>
<input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice B here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img0" style="display: none;">Add Choice B Image(if any..)</label>
<input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice C here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img0 " style="display: none;">Add Choice C Image(if any..)</label>
<input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;"> <br><br>
<textarea class="opt_text opt_text0 " cols="46" rows="2" name="choice0[]" placeholder="Enter Choice D here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img0" style="display: none;">Add Choice D Image(if any..)</label>
<input type="file" class="opt_img opt_img0" name="o-image0[]" style="display: none;">
<li><label for="question">Sub Question <span class="req">*</span></label>
<textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here..">
</textarea>

<div class="divider "></div>
<div class="divider"></div>

<textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice A here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img1" style="display: none;">Add Choice A Image(if any..)</label>
<input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice B here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img1" style="display: none;">Add Choice B Image(if any..)</label>
<input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice C here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img1 " style="display: none;">Add Choice C Image(if any..)</label>
<input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;"> <br><br>
<textarea class="opt_text opt_text1 " cols="46" rows="2" name="choice1[]" placeholder="Enter Choice D here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img1" style="display: none;">Add Choice D Image(if any..)</label>
<input type="file" class="opt_img opt_img1" name="o-image1[]" style="display: none;">
<li><label for="question">Sub Question <span class="req">*</span></label>
<textarea cols="46" rows="3" name="subquestion[]" placeholder="Enter Sub question here..">
</textarea>

<div class="divider "></div>
<div class="divider"></div>

<textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice A here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img2" style="display: none;">Add Choice A Image(if any..)</label>
<input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice B here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img2" style="display: none;">Add Choice B Image(if any..)</label>
<input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"><br><br>
<textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice C here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img2 " style="display: none;">Add Choice C Image(if any..)</label>
<input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"> <br><br>
<textarea class="opt_text opt_text2 " cols="46" rows="2" name="choice2[]" placeholder="Enter Choice D here.." style="display: none;">
</textarea>
<label for="image" class="opt_img opt_img2" style="display: none;">Add Choice D Image(if any..)</label>
<input type="file" class="opt_img opt_img2" name="o-image2[]" style="display: none;"></li>

<input type="submit">

</form>

<?php

  break;
  case 'POST':
	$countQuestions = count($_POST['subquestion']);
	$checkEmpty = 0;
	foreach ($_POST['subquestion'] as $value) { if (empty($value)) { $checkEmpty++; } }

    if ($checkEmpty === $countQuestions) {
	  echo 'subquestion is empty'; break;
	}
    foreach ($_POST['subquestion'] as $value) { echo $value . '<br>'; }

  break;
  default:
      echo 'Request Method denied';
  break;
}
?>

Hopefully you can create a cleaner, nicer form and process the form correctly. phpfreaks has lots of professionals that can help you when you have problems along the way. I suggest that if you continue using arrays, then atleast provide keys that can be checked for empty.

thanks for cleaning up

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.