sending php data to javascript click event

Question

I have a loop in php that for each item, a link that opens a lightbox is generated. How can I pass data related to the current iteration (such as the userid) in such a way that I can use it in the lightbox and the form submission?

<?php
foreach ($results as $viewUser)
    {
            if ($viewUser)
            {
                echo '<a class="change-email" href="#">Change Email</a>';
            }
    }
}
?>

<script>
$(function(){
    $(".change-email").click(function(){

            $.fancybox({
                'href'              : '#change-email-dialog',
                'width'             : '200px',
                'height'            : 'auto',
                'autoScale'         : true,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
                'modal'             : false,
                'afterShow'         : function () {

                }
            });
        });
});   
</script>

<div id="change-email-dialog">
    <form id="change-email-form" class="table" method="POST" action="<?php echo site_url('customerservice/changeEmail').'user='.$viewUser->getBusID(); ?>">
        <ul class="table-row">
            <li class="table-cell">New Email</li>
            <li class="table-cell"><input type="text" name="newEmail" /></li>
        </ul>
        <ul class="table-row">
            <li class="table-cell">Notify Contract Entry?</li>
            <li><input type="checkbox" checked="checked" name="notify" /></li>
        </ul>

        <ul class="table-row">
            <li><input name="userSearchSubmit" type="submit" value="Save" /></li>
        </ul>

    </form>  
</div>

What I would do is remove the .click from the javascript, add a parameter such as function(id) and then when echoing the link, add onclick=\"function(" . $myid . "\" — Cârnăciov
– Cârnăciov, Commented Feb 26, 2016 at 0:18

faster · Accepted Answer · 2016-02-26 00:21:57Z

1

You can add any data into html

echo '<a class="change-email" href="#" data-userid="$viewUser.id">Change Email</a>';

and pull it later with js

$(this).data('userid')

answered Feb 26, 2016 at 0:21

faster

1515 bronze badges

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

Comments

Butsuri · Accepted Answer · 2016-02-26 00:23:45Z

1

You can use data attributes.

Add them to your php ..

echo '<a class="change-email" href="#" data-userid=".$userID.">Change Email</a>';

.. then you can easily access them in javascript ..

this.dataset.userid

answered Feb 26, 2016 at 0:23

Butsuri

7689 silver badges14 bronze badges

Comments

أنيس بوهاشم · Accepted Answer · 2016-02-26 00:24:30Z

<?php
    foreach ($results as $viewUser)
        {
                if ($viewUser)
                {
                    echo '<a data-user="<?=$viewUser->userId?>" class="change-email" href="#">Change Email</a>';
                }
        }
    }
    ?>
<script>
$(function(){
    $(".change-email").click(function(){
            var user = $(this).data("user");

            $.fancybox({
                'href'              : '#change-email-dialog',
                'width'             : '200px',
                'height'            : 'auto',
                'autoScale'         : true,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
                'modal'             : false,
                'afterShow'         : function () {
                     $("#user_input").val(user);
                }
            });
        });
});   
</script>

<div id="change-email-dialog">
    <form id="change-email-form" class="table" method="POST" action="<?php echo site_url('customerservice/changeEmail').'user='.$viewUser->getBusID(); ?>">
        <input id="user_input" type="hidden" name="user" value="" />
        <ul class="table-row">
            <li class="table-cell">New Email</li>
            <li class="table-cell"><input type="text" name="newEmail" /></li>
        </ul>
        <ul class="table-row">
            <li class="table-cell">Notify Contract Entry?</li>
            <li><input type="checkbox" checked="checked" name="notify" /></li>
        </ul>

        <ul class="table-row">
            <li><input name="userSearchSubmit" type="submit" value="Save" /></li>
        </ul>

    </form>

Josh S. · Accepted Answer · 2016-02-26 00:24:37Z

1

Your JavaScript Query has a chance to return multiple results

change to this

$(function(){
    $(".change-email").each(function() {
        $(this).click(function(){
            $.fancybox({
                'href'              : '#change-email-dialog',
                'width'             : '200px',
                'height'            : 'auto',
                'autoScale'         : true,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
                'modal'             : false,
                'afterShow'         : function () {

                }
            });
        });
    });  
});

answered Feb 26, 2016 at 0:24

Josh S.

5973 silver badges8 bronze badges

Comments

Cârnăciov · Accepted Answer · 2016-02-26 00:23:16Z

Expanding on my comment, you can remove the .click event from the javascript and just leave the function. Then you would call the function on the onclick event in HTML, while also passing your variable(s). It would look like this

<?php
foreach ($results as $viewUser)
    {
            if ($viewUser)
            {
                echo '<a class="change-email" href="#" onclick="changemail(' . $myid . ');">Change Email</a>';
            }
    }
}
?>

<script>
function changemail(myid){
$.fancybox({
    'href'              : '#change-email-dialog',
    'width'             : '200px',
    'height'            : 'auto',
    'autoScale'         : true,
    'transitionIn'      : 'fade',
    'transitionOut'     : 'fade',
    'type'              : 'inline',
    'modal'             : false,
    'afterShow'         : function () {

    }
}
</script>

Where myid in javascript would contain whatever $myid contained in PHP.

Collectives™ on Stack Overflow

sending php data to javascript click event

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related