CODEWITHSUNDEEP
phpjavascriptjqueryforms
user979331
user979331

Reputation: 11851

Using PHP array data to create and manipulate HTML form

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.

Upvotes: 2

Views: 742

Answers (5)

Brian
Brian

Reputation: 3023

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>

Upvotes: 2

Salman Arshad
Salman Arshad

Reputation: 272086

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

Upvotes: 1

crush
crush

Reputation: 17013

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>

Upvotes: 1

Patrick Desjardins
Patrick Desjardins

Reputation: 140753

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>

Upvotes: 0

sqram
sqram

Reputation: 7201

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.

Upvotes: 0

Related Questions