CODEWITHSUNDEEP
phpjquery
Fizzix
Fizzix

Reputation: 24375

How to save many text inputs as a PHP string?

Basically, I need to construct a large string out of a bunch on HTML text inputs.

Firstly, these text inputs are being dynamically created by a button, therefore, there can be any amount of inputs as the user wants.

Here is the format of each individual dynamically created text input:

[question]   [incorrect-answer1]
             [incorrect-answer2]
             [incorrect-answer3]
             [correct-answer]
             Remove

Each item surrounded by [] is a text input, along with 'Remove' being a button that removes that current question.

This is my whole jQuery function that is creating each dynamic question:

function dynamicForm () {

//set a counter
var i = $('.dynamic-input#form-step2').length + 1;
//alert(i);
//add input
$('a#add').click(function () {
    $('<table><tr><td><p><span class="left"><input type="text" class="dynamic-input" name="items[]" id="' + i + '" placeholder="Question" /></span>' +
        '<span class="right"><input type="text" class="dynamic-input" name="items[]" id="' + i + '" placeholder="Distraction 1" /><br /><input type="text" class="dynamic-input" name="items[]" id="' + i + '" placeholder="Distraction 2" /><br /><input type="text" class="dynamic-input" name="items[]" id="' + i + '" placeholder="Distraction 3" /><br /><input type="text" class="dynamic-input" name="items[]" id="' + i + '" placeholder="Correct Answer" /><br /><a href="#">Remove</a></span></p></td></tr></table>').fadeIn("slow").appendTo('#extender');
    i++;

    $("a:contains('Remove')").click(function () {
            $(this).parent().parent().remove();
    });

    return false;
});


//fadeout selected item and remove
$("#form-step2.dynamic-input").on('click', 'a', function () {
    $(this).parent().fadeOut(300, function () {
        $(this).empty();
        return false;
    });
});
}

And this is the simple little button that creates each question:

<a id="add" href="#">Add Question</a>

What I need to achieve:

Once a button is pressed, I need to somehow gather all the question elements, and save them into a string. This is the format that each question must be saved into:

question1,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer
question1,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer
question2,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer

As you can see above, there are a total of 3 questions. Each question must be separated by a line-break, being '\n'. The order must be question, 3 incorrect answers, following by the correct answer; all separated by commas.

Of course, I am not asking anybody to do this for me. I just need some guidance and support since I am still a newbie to PHP and jQuery (learning PHP for 8 weeks, jQuery for 2 weeks). Most of my code was constructed by already existing code from here at Stack Overflow, and other online sources.

All help is greatly appreciated

Upvotes: 0

Views: 133

Answers (2)

jexx2345
jexx2345

Reputation: 678

As a perhaps more flexible alternative to array_chunk (since you may have more "incorrect answers" in the future and that would require to keep updating the array_chunk size param), you can go with the following:

In your javascript snippet, where you are populating the DOM elements, you can populate your name attribute as a multidimensional array (I renamed from items to questions for conceptual purposes):

$('<table><tr><td><p><span class="left"><input type="text" class="dynamic-input" name="questions[' +i +'][]" id="' + i + '" placeholder="Question" /></span>' +
        '<span class="right"><input type="text" class="dynamic-input" name="questions[' +i +'][]" id="' + i + '" placeholder="Distraction 1" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][]" id="' + i + '" placeholder="Distraction 2" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][]" id="' + i + '" placeholder="Distraction 3" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][]" id="' + i + '" placeholder="Correct Answer" /><br /><a href="#">Remove</a></span></p></td></tr></table>').fadeIn("slow").appendTo('#extender');

So this would be an array of question arrays.

In the PHP side (similar to the array_chunk post), you can use implode as such:

if(!empty($_POST['questions'])) {
    foreach($_POST['questions'] as $question) {
        echo implode(',',$question) ."\n";
    }
}

Upvotes: 1

Barmar
Barmar

Reputation: 781059

Use array_chunk() to convert $_POST['items'] into a nested array, so that each element is one set of question and answers. Loop through this array, using implode() to join the elements of the sub-arrays with commas, and construct a new array containing these strings. Then use implode() on this new array to connect them with newlines.

You said you aren't asking anyone to do it for you, so I'm not including code here. Read the documentation of these functions, and it should be pretty straightforward.

Upvotes: 3

Related Questions