Display PHP data if an option is selected in a single HTML

Question

I want to show the data from PHP if one of the object is selected. This is the HTML code I wrote but it doesn't work. I kind of know the reason is either because the PHP will get executed once, so it won't display anything after that. Or the PHP part down below did not receive the software object at all. Should I have a Javascript that does the display work? Is that necessary?

<select name="software" onchange="showSoftware(this.value)">
  <?php foreach ($softwareCollection as $software): ?>
  <option value="<?php echo $software ?>">
    <?php echo $software->date?>
  </option>
  <?php endforeach; ?>
</select>
<script>
  function showSoftware(software) {
    jQuery.ajax({
      type: "POST",
      data:  {software: software},
      success: function(data) {
        console.log(data);
      }
    });
  }
</script>

<?php if (isset($_POST['software'])): ?>
    <?php foreach ($software->links as $link): ?>
        <tr>
        <td>
            <?php echo $link->title; ?>
        </td>
        <td>
            <?php echo $link->url; ?>
        </td>
        </tr>
    <?php endforeach; ?>
<?php endif; ?>

Another way to solve it with single html file is to cache all the options and data to the front end like:

<script>
    require(['jquery'], function($) {
        jQuery(document).ready(function($) {
            /*
             * Cache the softwareCollection
             */
            var softwareCollection = [];
            <?php foreach ($softwareCollection = $this->getSoftware() as $software): ?>
            var links = [];
            var softwareId = '<?php echo $software->id ?>';
            var softwareDate = '<?php echo $software->date->date?>';
            <?php foreach ($software->links as $link): ?>
            links.push({
                title: '<?php echo $link->title ?>', description: '<?php echo $link->description?>',
                url: '<?php echo $link->url ?>'
            });
            <?php endforeach; ?>
            softwareCollection.push({id: softwareId, date: softwareDate, links: links});
            <?php endforeach; ?>
            softwareCollection.sort((a, b) => (a.date < b.date));
            const $this = $('select[name=software]');
            for (var i = 0; i < softwareCollection.length; i++) {
                $this.append(
                    '<option value=\"' + softwareCollection[i].id + '\">' + softwareCollection[i].date + '</option>'
                );
            }
        }
    }
</script>

Bit unrelated, but why are you doing each line of PHP in it's own opening and closing brackets? Why not just do <?php if(isset($_POST['software'])){ foreach ($software->links as $link){ ?>  <?php } } ?>? — GROVER.
– GROVER., Commented Aug 23, 2018 at 0:06
You have an error in your option statement: <?php $software ?> should be either <?php echo $software; ?> or <?= $software ?>. — Nick
– Nick, Commented Aug 23, 2018 at 0:09
@GROVER. I am pretty new to the web development, I didn't know that I can do it this way, thanks for the comment. — Jason Liu
– Jason Liu, Commented Aug 23, 2018 at 0:10
@Nick Thanks for the correction. I was thinking to pass the $software object to the function so that I didn't use echo as it tries to convert the object to string and gives error. I modified the code a bit to pass the $software->id, and find the object according to it but still doesn't work. — Jason Liu
– Jason Liu, Commented Aug 23, 2018 at 0:26
I hadn't noticed $software was an object, you will need to change echo $software into echo $software->xxx (without knowing your object structure I can't say what xxx should be but possibly id?). — Nick
– Nick, Commented Aug 23, 2018 at 0:29

Grant · Accepted Answer · 2018-08-23 00:33:56Z

2

This code is untested, but this should work for what you are trying to achieve. Your changed select triggers the ajax call to a separate software.php file that contains your code and returns the data to the #softwareResponse div. Hopefully this helps you, also I used shortcode echoes to neaten this way of doing things a little.

index.html

<select id="softwareSelect" name="software">
    <?php foreach($softwareCollection as $software): ?>
        <option value="<?=$software;?>"><?=$software->date;?></option>
    <?php endforeach; ?>
</select>

<div id="softwareResponse"></div>

<script>
jQuery(document).ready(function($) {
    $( '#softwareSelect' ).change(function () {
        $.ajax({
            url: 'software.php'
            type: 'POST',
            data:  {software: $(this).val()},
            success: function(data) {
                $('#softwareResponse').html(data);
            }
        });
    });
});
</script>

software.php

<?php if(isset($_POST['software'])): ?>
    <table>
        <?php foreach ($software->links as $link): ?>
            <tr>
                <td><?=$link->title); ?></td><td><?=$link->url); ?></td>
            </tr>
        <?php endforeach; ?>
    </table>
<?php else: ?>
    <p>No software selected.</p>
<?php endif; ?>

Note: this does make the assumption that the $software->links object and the $softwareCollection object both work. If these are arrays, use associative lookups instead, for example $software['date']

edited Aug 23, 2018 at 0:33

answered Aug 23, 2018 at 0:30

Grant

6,3973 gold badges42 silver badges60 bronze badges

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

3 Comments

Jason Liu Over a year ago

I think you are right. The PHP didn't catch the 'software' at all. However if I want to update the HTML, do I need an addition Javascript to do that or the software.php can update by the data return on success.

Grant Over a year ago

Notice the success function $('#softwareResponse').html(data); this is telling the HTML inside of that div to be replaced each time a lookup against that software.php file is made. So each time you change the select, the HTML contained within that div will be replaced with the answers, if available.

Grant Over a year ago

You will actually have the $_POST variable interpreted this time because you have the software.php file separate to post to, notice the addition of the url field in the ajax object; previously you would not have been firing data to anywhere in particular. Let me know if this works for you. :)

Collectives™ on Stack Overflow

Display PHP data if an option is selected in a single HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related