CODEWITHSUNDEEP
phpjquerycssformsdrag-and-drop
VikR
VikR

Reputation: 5142

Drag 'n Drop Destroys ID Numbering Scheme?

I have a web app which include a questionnaire editor. There can be many questions; each can have many answers; and each question has two sets of radio buttons for setting various question options.

I'm using the following style of IDs:

id="Q-$questionNumber"
id="Q-$questionNumber-A-$answerNumber"

...where '$questionNumber' and '$answerNumber' are replaced with the appropriate numbers.

The ID numbering scheme has two functions:

Naturally, when I drag and drop a question, all these IDs and names need to be renumbered. I've written javascript/jQuery that successfully renumbers everything and works correctly. But it feels kludgy.

It seems like I could remove the numbering scheme from all the IDs and just figure out what question number/answer number everything is by examining its placement in the DOM using jQuery. But it seems I would still need to use the numbering scheme on input element names so that my PHP code on the server could tell what question number/answer number the various submitted form elements belong to.

Is there a better way?

UPDATE per request from Bankzilla. Here is some sample HTML. This is one question. Each document can have many questions, each of which can have many answers.

<div id="Q-1" class="QuestionGroup ui-draggable">
    <br>
    <h2 id="QuestionText-Q-1">
        Question #1&nbsp;&nbsp;
        <input type="text" name="questionText-Q-1" value="" id="questionText-Q-1" class="questionText" maxlength="256" size="70">
    </h2>
    <div class="containerForAnswers">
        <p class="answerPar">
            <span class="answerLabel answerLabelinEditView">#1:</span>
            <input type="text" name="Q-1-A-1" value="" id="Q-1-A-1" class="answer answer-Q-1" maxlength="256" size="70">
        </p>
        <p class="answerPar">
            <span class="answerLabel answerLabelinEditView">#2:</span>
            <input type="text" name="Q-1-A-2" value="" id="Q-1-A-2" class="answer answer-Q-1" maxlength="256" size="70">
        </p>
        <p class="answerPar">
            <span class="answerLabel answerLabelinEditView">#3:</span>
            <input type="text" name="Q-1-A-3" value="" id="Q-1-A-3" class="answer answer-Q-1" maxlength="256" size="70">
        </p>
    </div>
</div>

Upvotes: 1

Views: 41

Answers (2)

VikR
VikR

Reputation: 5142

After studying this some more, I think I might try something like this next time: leave question number/answer number identifiers completely out of all form element names and IDs. When the form is submitted, question number/answer number identifiers would be added via jQuery to all form elements. This way I wouldn't have to deal with renumbering any question number/answer number identifiers during drag and drop, insert, cut/paste, etc.

Upvotes: 0

Bankzilla
Bankzilla

Reputation: 2096

Not sure if this will help but you can actually use arrays in inputs. Makes structuring questions/ answers in your case much easier and you don't have to worry about numbering.

<input name="Q[1][text]"/>
<input name="Q[1][answers][]" value="number 1"/>
<input name="Q[1][answers][]" value="number 2"/>

When you have multiple Q[1][answers][] it will stack them like an array index, 0,1,2,3,4.

If you were to dump the above out it would look like

var_dump($_POST);
array(
    'Q' => array(
        1 => (
            'text' => '',
            answers => array(
                0 => 'number 1'
                1 => 'number 2'
            )
        )
    )
)

Now when you drag an drop you only need to find what the question id is, instead of the order of answers.

Upvotes: 1

Related Questions