Display PHP var in HTML (with jQuery)

Question

I'm searching for the best solution to display information which I store in PHP variable (which I get from a MySQL DB).

I was thinking to use jQuery. My questions:

With the input field I receive the number of the Member.
I store a new variable called $imgMember with the img name.

Questions:

I want to display this image each time a user enters a number at <div class="boxImageMember"> (which I already validated through PHP and made a variable ($imgMember) of it.
How should I access it? Do I need to store those variable with AJAX? Internal/external jQuery? Or do I need to think otherwise? Im stuck in my head.

Im totally stuck with the way I how to process this.

HTML:

<div id="header">
 <div class="header-content">
  <img src="img/logo-dqmih.png" width="60px">
 </div>
</div>

<div class="container">

  <div class="boxImageMember">HERE I WANT TO DISPLAY A USER IMAGE</div>
  <div class="boxInformationMember"></div>

  <form action="" method="post">
   <input type="text" id="MemberNumberEntry" name="staffNumber">
   <button type="submit" name="action">
  </form>

</div>

jQuery:

$(document).ready(function() {
     $("#MemberNumberEntry").focus();

     $(document).on('submit',function(event, test){
       event.preventDefault(); // Don't refresh the page

       var MemberNumberEntry = $("#MemberNumberEntry").val();
       console.log(MemberNumberEntry);

       $(".boxImageMember" ).css("background-image", "url(../images/persons/NIT.jpg)"); // Change image (Not dynamic yet)

       $(".boxInformationMember" ).text("Hi Test, welcome!");

       // Reset value form entry
       $('#memberNumberEntry').val('');
    });
});

So you'd like to send the value from the input to the PHP script using jQuery and get the value? — Mav, Aug 21 '17 at 13:43
@Mav, I think I'm way to much thinking, its killing me. How can I explain this: I just want to have a dynamic html page. If a person enters a code (personal code) it will show his/her image. I was thinking to do this with jQUERY as I think I am more flexibel with it. My jQuery file and PHP file al seperated. My current script won't proceed any PHP now as it does not fires of (because I use preventDefault). So Im very confused. — nhatimme, Aug 21 '17 at 13:47
I see. So yeah, it's a fairly decent approach, I'll put in an answer shortly explaining how you can use jQuery AJAX to do it. — Mav, Aug 21 '17 at 13:50

score 0 · Answer 1 · answered Aug 21 '17 at 14:04

Your jQuery script would do something like this

$(document).ready(function() {
 $("#MemberNumberEntry").focus();

 $(document).on('submit',function(event, test){
   event.preventDefault(); // Don't refresh the page

   var MemberNumberEntry = $("#MemberNumberEntry").val();
   //console.log(MemberNumberEntry);
       $.ajax({
            url: '/your-php-script.php',
            method: 'POST',
            data: {
                MemberNumberEntry: MemberNumberEntry
            },
            success: function(response){
                //If call goes well, you use the image here.
            }
        });
   $(".boxImageMember" ).css("background-image", "url(../images/persons/NIT.jpg)"); // Change image (Not dynamic yet)

   $(".boxInformationMember" ).text("Hi Test, welcome!");

   // Reset value form entry
   $('#memberNumberEntry').val('');
});
});

You're basically sending an HTTP POST request to your PHP script that will accept the image ID like a normal post request, using $_REQUEST or $_POST.

There are tonnes of options to configure with jQuery, you can look at the docs here. For more information on working with images in PHP and AJAX, this answer is useful.

Thanks. The AJAX url, could this be the same file as my HTML/PHP? Or what is the best way? — nhatimme, Aug 21 '17 at 14:15
The ajax URL doesn't usually have markup, it is quite common to have a dedicated folder for AJAX script files that only process AJAX requests. /ajax/userImage.php, for instance. — Mav, Aug 21 '17 at 14:18

Display PHP var in HTML (with jQuery)

1 Answers1