Using PHP array data to create and manipulate HTML form

Question

I am having a bit of trouble writing a piece of code and trying to get it to work the way I want it work.

I have this array which is off my database

Array ( [0] => Array ( [id] => 1 [title] => Test 1 [comment] => Test 1 ) [1] => Array ( [id] => 2 [title] => Test 2 [comment] => This is the second test!! ) )

each row of data has an id, title and comment.

I have this dropdown menu

<select name="Selection" id="Selection">
    <?php
      echo "<option selected='selected' value='Default'>Please Make a Selection</option>";
         foreach($array as $row){
            echo "<option>" . htmlentities($row['title']) . "</option>";
         }

    ?>
</select>

I am trying to get it so that when the user selects a title, the comment associated with that title goes into the comment text box below.

<p id="commentContainer">
<label for="comment">Comment</label>
<textarea name='comment' id='comment' cols="40" rows="5"><? echo htmlentities($array["comment"]); ?></textarea>
</p>

And I also have this Javascript

<script type="text/javascript">

$(document).ready(function() {
    $('#selection').change(function(){
        var commentId = $(this).val();
        $('#comment').val(commentId);
    })
});

</script>

This gets the value of the what is selected in the dropdown to the comment textbox.

How would I get the comment assoicated with the title in the comment textbox? Would I have to set the value of the dropdown selections as the ids? This is where I am stuck and I have been googling my heart out for an answer.

Brian · Accepted Answer · 2012-03-26 14:15:27Z

2

This should do the trick. Iterate your array twice to output all the comments and all the select boxes, then hide them all.

<select name="selection" id="selection">
    <?php
      echo "<option selected='selected' value='Default'>Please Make a Selection</option>";
         foreach($array as $row){
            echo "<option value=\"$row[id]\">" . htmlentities($row['title']) . "</option>";
         }

    ?>
</select>

<?php
    foreach( $array as $row ) {
?>
<p id="commentContainer_<?php echo $row['id']; ?>" class="comment-container">
<label for="comment">Comment</label>
<textarea name="comment" id="comment" cols="40" rows="5"><? echo htmlspecialchars($array["comment"]); ?></textarea>
</p>
<?php 
    }
?>

<script type="text/javascript">

$(document).ready(function() {
    $('#selection').change(function(){
        var commentId = $(this).val();
        $('.comment-container').hide();
        $('#commentContainer_' + commentId).show();
    })
});

</script>

edited Mar 26, 2012 at 14:15

answered Feb 16, 2012 at 18:16

Brian

3,02321 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Over a year ago

Optionally, change the show() to fadeIn() or slideDown() or something and you can use jQuery's animation effects to toggle comments and make it a little slicker.

Salman Arshad · Accepted Answer · 2012-02-16 18:47:39Z

1

Seems like JavaScript is a must-have for this solution. See if you can get this approach to work:

Step 1: json_encode() your array data so that it can be used inside JavaScript. Suppose it ends up looking something like this:

var selectionData = {
    "1": {
        "title": "Test 1",
        "comment": "Comment 1"
    },
    "2": {
        "title": "Test 2",
        "comment": "Comment 2"
    }
};

Step 2: Use this object to populate the select:

$.each(selectionData, function(id, data) {
    $("<option/>").attr({
        "value": id
    }).text(data.title).appendTo("#Selection");
});

Step 3: Use this object to update the comment box:

$("#Selection").change(function() {
    var id = $(this).val();
    $('#comment').val(selectionData[id].comment);
});

Demo here

edited Feb 16, 2012 at 18:47

answered Feb 16, 2012 at 18:37

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

1 Comment

Brian Over a year ago

Been a bit since I hopped on here, and this is a very simple, elegant JS based solution, but you're forgetting that since you are relying on JS to create the "content" of the page. 1) search engines are not going to see or parse any comments on your pages and 2) any users without JS enabled (some mobile browsers or paranoid nuts) are not going to see any comments. The solution I posted below outputs all the comments to the page initially for search engines/nuts and then uses JS to hide all of them from view until one is chosen.

crush · Accepted Answer · 2012-02-16 18:17:28Z

1

You never set the value on the options:

echo "<option>" . htmlentities($row['title']) . "</option>";

should be

echo "<option value=\"{$row['id']}\">" . htmlentities($row['title']) . "</option>";

Then you should have an array with the id as the key and the comment as the value in Javascript:

//Generate this with PHP or an AJAX call
var comments = new Array();
comments[1] = "Some comment for id 1"; //Where 1 is the value of the comment id

Lke this:

<script type="text/javascript">

$(document).ready(function() {
    var comments = new Array();
    <?php foreach ($array as $row) {?>
    echo "comments[" . $row['id'] . "] = \"" . $row['comment'] . "\";";
    <?php } ?>
});

</script>

edited Feb 16, 2012 at 18:17

answered Feb 16, 2012 at 18:12

crush

17.1k10 gold badges65 silver badges104 bronze badges

4 Comments

user979331 Over a year ago

I added the ids to the value, now im my comments box it displays the id number.

crush Over a year ago

You still need to generate an array that maps the comment to the id as I have shown.

user979331 Over a year ago

do you have a link to a tutorial to get the PHP or an AJAX call to fill in the area...I am confused.

crush Over a year ago

See Brian's example for what else you will need to change.

sqram · Accepted Answer · 2012-02-16 18:13:41Z

0

You need to add a value to the option tag

 echo "<option value='$title'>" . htmlentities($row['title']) . "</option>";

and use ID instead of title, though.

answered Feb 16, 2012 at 18:13

sqram

7,1858 gold badges51 silver badges68 bronze badges

Comments

Patrick Desjardins · Accepted Answer · 2012-02-16 18:16:45Z

0

The first step is to add a value to the option. This can be done by using the valueattribute.

echo("<option value='" . $uniqueIdentifierOfSelection. "'>");

From there, you need to take this value and get from the Array the good comments to display.

<script type="text/javascript">

$(document).ready(function() {
    $('#selection').change(function(){
        var id = $(this).val();
        $('#comment').val(myArray[id]);
    })
});

</script>

answered Feb 16, 2012 at 18:16

Patrick Desjardins

142k89 gold badges298 silver badges346 bronze badges

Collectives™ on Stack Overflow

Using PHP array data to create and manipulate HTML form

5 Answers 5

1 Comment

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related