How to append a form into list, a particular list

Hi folks,

This is not my actual code. I'm not with my computer right now but I'm trying to do the same. I've tried and not yet successful. I'll try it again when I get back. Here's the code:

<ul>
    <?php foreach($questions as $question) { ?>
        <li class=position_relative>
            <div class=floatleft>
                <?php echo $question['first']; ?>
            </div>
            <a href="form.php" class=floatright>Answer</a>
        </li>
    <?php } ?>
</ul>

Code (markup):

JavaScript:

var doc = document
  , ans = doc.getElementsByClassName('floatright');
for ( var i = 0, j = ans.length; i < j; i += 1 ) {
    (function(x) {
        ans[x].addEventListener('click', function(e) {
            e.preventDefault();
            var url = this.getAttribute("href");
            var xhr = newXMLHttpRequest();
            xhr.open("GET", url, false);
            if (xhr.readyState == 4) {
                var div = doc.createElement('div');
                div.innerHTML = xhr.responseText;
                // HOW TO APPEND IT TO THE <LI>?
            }
            xhr.send();
        });
    })(i);
}

Code (markup):

Thank you,

 

What the blazes would make a form be a list item?!? What makes a question a bullet point list item? Why would you be plugging in answers client side? WHERE EVEN ARE the multiple answers? (since one answer would make no sense?!?) Why would you have a class like "floatright" saying what something looks like instead of what it IS?!?

I've got the feeling instead of a list you should have a form, a fieldset for each question, a legend for the question, with labels and selects for each answer. NO clue what you think you need JavaScript much less AJAX for on this.

Again make it able to work without scripting FIRST, BEFORE you go blindly throwing scripttardery at it.

 

Thanks for reply.

I did it without script. It went to a form page and return. The form is just as simple as this:

<form method=post action="process.php">
    <input type=hidden name=item_id value='<?php echo $item_id; ?>' />
    <input type=hidden name=user_id value='<?php echo $user_id; ?>' />
    <textarea name=answer></textarea>
    <input type=submit value='Send' />
</form>

Code (markup):

It's awkward to go back and fort for tens time. So I'd like to do it in single page.
After the user click submit the link will disappear and cannot answer again.

Forget about the class name. I just name it to indicate that the question box will be on the left and the links will be on the right.
It would look like this:

|---------------------------------------------------------------------------------------------------------------------|
| Question 1.                                                                                                                                      Answer |
| What aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa a aaaaaaaaaaaaaa a aaaaaaaaaaaaa                                 |
| aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaa a a aaaaaaaaaaaaa |
| aaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa  |
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
|--------------------------------------------------------------------------------------------------------------------  |

Code (markup):

 

By the way, this is not a multiple choices question.

 

Then send all the questions as a single form on a single page...

NOT entirely joking. I HATE it when people do the 'one question at a time' crap on sites. Even if I were to implement it as such, what I'd do is write it first so that all questions are on the page at once for when scripting is unavailable, then use JavaScript to move a "current" class around so that the first question only is shown while the others are set to display:none... when they click answer you just remove the 'current' class from the current question and move it to the next question. (sibling node walking would be handy for that).

As I often say, if you can't make it work without scripting first, you probably shouldn't be adding scripting to it.

I also probably would NOT be passing the user id client-side... that's what sessions are for. It's bad enough the PHP session is passed as a cookie risking MITM without sending the actual user ID.

 

Perhaps you'd think again of using a list since... what is it for? A regular form accompanied with a little AJAX code would suffice. An untested, rough pattern would be like:

<form id="myform" action="process.php" method="post">
  <textarea name="question" disabled="disabled"></textarea>
  <textarea id="answer" name="answer"></textarea>
  <input type="submit" value="Send" />
</form>
<script type="text/javascript">
  //redirect natural submission to ajax
  document.getElementById('myform').addEventListener('submit', function(e) {
    e.preventDefault();
    xhr.open('POST', 'process.php');
    xhr.send('answer=' + encodeURIComponent(document.getElementById('answer').value));
    //etc etc ...
  });

  //prepare ajax
  var xhr = newXMLHttpRequest();
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
      if (xhr.status == 200) {
        //update question field with new one from xhr.responseText,
        //empty answer field, 
        //etc etc...
      }
      else
        console.log('ajax problem.');  };</script>

HTML:

 

Thanks @hdewantara,

I don't even know encodeURIComponent() exists. This is absolutely helpful for future development.

Well, I figured out how to do it.
I just need an array from ul li node to feed into the loop and match them up. So I can append a form to the exact corresponding li.

For those who would encounter this and use jQuery, a guy at sitepoint helps me solve this here: http://jsfiddle.net/7qbb6o7t/2/

But I won't use jQuery or anything framework. The internet told me I would hand code if I want to be a great developer.
I did, in hope I would make as much money as Mark Zuckerberg did. In reality I can't even afford to pay monthly mortgage LOL