Passing a php value to modal using plain javascript without jquery or ajax

Question

Is it possible to pass values from PHP to a modal box using plain Javascript? I researched here in SO and found that most of the answers are either JQuery or AJAX. I'd like to know how because I'm new in Javascript and PHP so I'd like to first have a thorough practice and understanding in Javascript before diving into JQuery and AJAX.

I'm working on a small project which has a modal box and a <table> with an Edit control.

<div id="modalBox" class="w3-modal">
    <div class="w3-modal-content">
        <div class="w3-container">
            <span onclick="document.getElementById('modalBox').style.display='none'" class="w3-button w3-display-topright">&times;</span>
            <p>Some text. Some text. Some text.</p>
            <p>Some text. Some text. Some text.</p>
        </div>
    </div>
</div>

<div class="record-container">
    <table class="table-record">
        <tr>
            <th>Title</th>
            <th>Date Created</th>
            <th>Control</th>
        </tr>

        <?php
        $announcementDaoImpl = new AnnouncementDaoImpl($pdo);
        $announcementList = $announcementDaoImpl->getAllAnnouncementByMostRecent();
        foreach($announcementList as $key => $value): ?>
        <tr>
            <td><?php echo $key->getTitle(); ?></td>
            <td><?php echo $value->getDateAdded(); ?></td>
            <td>
                <a href="#" onclick="showEditModal('modalBox')">Edit</a>
            </td>
        </tr>
     <?php endforeach; ?>
    </table>
</div>

Let's say I want to fill the modal box with the value returned by $value->getDateAdded, is that possible without JQuery and AJAX?

How can I go about it? Can you provide some ideas.

Thank you.

Maybe showEditModal could store the value in an html data attribute, and then retrieve when the modal javascript code executes. — muecas
– muecas, Commented Apr 25, 2018 at 2:56
You can add another parameter in showEditModal() function and pass the value of $value->getDateAdded to that. — Karlo Kokkak
– Karlo Kokkak, Commented Apr 25, 2018 at 3:04
@Mr.Blue Your suggestion works but I'd like to pass $value object to javascript function showEditModel() then from within the method's block I like to access the get() methods. I can't figure out how to do that using json_encode — heisenberg
– heisenberg, Commented Apr 25, 2018 at 4:46

yuvi · Accepted Answer · 2018-04-25 03:05:32Z

1

Please replace your code with these lines from below code.

 // Add id where you want to add this
id="subjectdiv" 

// On click add your php value

onclick="showEditModal('modalBox','<?php echo $value->getDateAdded(); ?>')"

function showEditModal(modalid,phpval) {

//You code here

//code for send value on modal box
var theDiv = document.getElementById("subjectdiv");
theDiv.innerHTML = phpval; 

}

Hope this can help.

answered Apr 25, 2018 at 3:05

yuvi

521 gold badge1 silver badge8 bronze badges

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

3 Comments

heisenberg Over a year ago

Thanks for your answer. This works. Would you know how I can access the get() methods of the php object from within the javascript method like var obj = JSON.parse(phpobject); then obj->getX() ?

yuvi Over a year ago

What do you want exactly, Can you inbox me please?

heisenberg Over a year ago

Actually, I'm now able to get the values to show on the <div> but now what I'm trying to do is pass the PHP object as object to my showEditModal() method. From within the block I'd like to access the object's property.

Ultimater · Accepted Answer · 2018-04-25 03:00:37Z

1

Ajax IS plain JavaScript. But if you're just trying to echo something in PHP to the client to be run as JavaScript, you're looking for json_encode

answered Apr 25, 2018 at 3:00

Ultimater

4,7482 gold badges32 silver badges44 bronze badges

2 Comments

heisenberg Over a year ago

Thanks for your answer. I did some research and I think I'm getting how I can us json_encode to parse. Is it possible to parse a php object which has getters()so that I can access the object's getters within js function's block like var obj = JSON.parse(phpobject); then obj->getSomething() ?

Ultimater Over a year ago

@p3ace There's no need to parse proper JSON from a trusted source as JSON. Simply assign it to a variable in JavaScript and it becomes your object. <script>var obj=<?= json_encode($phpObject); ?>;alert(obj.something);</script>

Collectives™ on Stack Overflow

Passing a php value to modal using plain javascript without jquery or ajax

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related