0

I am fairly new to HTML. I am working on an event website, the website requires people to register for events, on the website is a dropdown showing the events currently running, a user can choose an event from the dropdown, when they choose the event from the dropdown, I would like the site to update a field named eventDescription with the event's description. Here is my HTML code

<div class="row form-group">
                        <div class="col-md-12">
                        <select name="event" required="true" class="form-control" style='width:100%'>
                            <option value="" disabled selected>Select the event you registering for</option>
                                <?php foreach ($events as $event) {?>
                                    <option value="<?php echo  $event['id']; ?>"> <?php echo  $event['title']; ?></option>
                                  <?php } ?>
                          </select>
                            </div>
                        </div>


                        <div class="row form-group">
                            <div class="col-md-12">
                                <a class="form-control" id="eventDescription" placeholder="Selected event description"></a>
                            </div>
                        </div>

I am new to HTML I have no idea on how to do this, although I know I can do it with javascript how do I update id="eventDescription" with $event['description'] ?

Ryan Wilson
  • 10,223
  • 2
  • 21
  • 40
Uncle
  • 71
  • 10
  • 1
    Since your post has a tag of just javascript you can use this SO post (https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) to learn how to send an asynchronous request to your server and return the value you want to place inside your element with id = "eventDescription" and this SO post (https://stackoverflow.com/questions/24172963/jquery-change-method-in-vanilla-javascript) to learn how to attach a change event to your drop down which in turn would use the asynchronous call to the server to get the value for the selected option – Ryan Wilson Aug 07 '18 at 18:50

1 Answers1

0

You can have any attribute that you want even if that is not a known attribute. For example, you can have description:

<option value="<?php echo $event['id']; ?> description="<?php echo $event['description']; ?>"> <?php echo $event['title']; ?></option>

Now, when you do javascript on the change event of the select tag, retrieve the info from the selected option by accessing its attribute named `description.

Andrius Naruševičius
  • 8,348
  • 7
  • 49
  • 78
  • Thanks but like I said am new to HTML and Javascript, I know I can do it but not sure how – Uncle Aug 07 '18 at 19:17