Joehax | Technology Tips, Products and Apps

When it comes to web development, even the simplest tasks like showing a hidden picture on a button click or submitting a form can be approached differently across various frameworks and technologies. In this post, we compare PHP, Node.js, Laravel, and Nuxt.js, exploring how they handle two common tasks:

1: On button click, show a hidden picture.

2: Send a form (just a simple form submission).

We’ll walk through each technology stack step-by-step and explain what’s happening.

PHP + jQuery


    <style>
        #myImage {
            display: none; /* Start hidden */
            width: 200px;
            height: auto;
        }
    </style>
    <!-- Task 1: Button to show image -->
    <button id="showImageBtn">Show Image</button>
    <br><br>
    <img id="myImage" src="hidden_image.jpg" alt="Hidden Image">

    <!-- Task 2: Form to send data to PHP -->
    <form id="myForm">
        <input type="text" name="username" placeholder="Enter your name">
        <button type="submit">Send</button>
    </form>

    <div id="responseArea"></div>

    <script>
        $(document).ready(function() {
            // When the button is clicked, show the image
            $('#showImageBtn').click(function() {
                $('#myImage').show(); 
            });

            // Form submission using AJAX
            $('#myForm').submit(function(e) {
                e.preventDefault(); // Prevent normal form submit

                $.ajax({
                    url: 'submit.php', // This is the PHP file to handle the form data
                    method: 'POST',
                    data: $(this).serialize(), // Sends all form fields
                    success: function(response) {
                        // Show server response
                        $('#responseArea').text(response);
                    }
                });
            });
        });
    </script>

Submit.php

<?php
// This is the simple PHP code to handle form data from AJAX

$username = $_POST['username'] ?? 'No Name Provided';
echo "Hello, " . htmlspecialchars($username) . "! Your form was received.";

The user clicks “Show Image” -> jQuery changes display: none to display: block.
The user submits the form -> jQuery sends a POST request to submit.php.
submit.php sends back a response “Hello, [username]” which is shown in #responseArea.

JavaScript + Node.js

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

// Middleware to parse form data
app.use(bodyParser.urlencoded({ extended: true }));

// Serve static files (including our HTML)
app.use(express.static(path.join(__dirname, 'public')));

// Handle form submissions
app.post('/submit', (req, res) => {
    const username = req.body.username || 'No Name Provided';
    res.send(`Hello, ${username}, we got your form!`);
});

// Start server
app.listen(3000, () => {
    console.log('Server running at http://localhost:3000');
});

Front end.


    <style>
        #myImage {
            display: none; 
            width: 200px;
            height: auto;
        }
    </style>
    <button id="showImageBtn">Show Image</button>
    <br><br>
    <img id="myImage" src="hidden_image.jpg" alt="Hidden Image">

    <form id="myForm">
        <input type="text" name="username" placeholder="Enter your name">
        <button type="submit">Send</button>
    </form>

    <div id="responseArea"></div>

    <script>
        // Show image on button click (vanilla JS)
        document.getElementById('showImageBtn').addEventListener('click', function() {
            document.getElementById('myImage').style.display = 'block';
        });

        // Handle form submission
        const form = document.getElementById('myForm');
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(form);

            fetch('/submit', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                document.getElementById('responseArea').innerText = data;
            });
        });
    </script>

Click button -> JS changes the CSS to show the image.

Submitting form -> fetch() sends to /submit, Node.js handles and sends response back.

Nuxt.js (Vue.js) + Node.js

In Nuxt 3, you can create a server route in server/api/submit.post.js.

We’ll create a simple page component that has a button and a hidden image, and a form.

For form submission, we can use Nuxt’s server routes or a simple API route.

Server Route (Nuxt 3) - server/api/submit.post.js

export default defineEventHandler(async (event) => {
  const body = await readBody(event); // read form data
  const username = body.username || 'No Name Provided';
  return `Hello, ${username}, from Nuxt!`;
});

Page Component (pages/index.vue)


  <div>
    <button @click="showImage = true">Show Image</button>
    <br><br>
    <img v-if="showImage" src="/hidden_image.jpg" alt="Hidden Image" style="width:200px; height:auto;">

    <form @submit.prevent="submitForm">
      <input v-model="username" type="text" placeholder="Enter your name">
      <button type="submit">Send</button>
    </form>

    <div></div>
  </div>

  <script setup>
  import { ref } from 'vue'

  const showImage = ref(false)
  const username = ref('')
  const responseMessage = ref('')

  async function submitForm() {
    // Using Fetch API to send form data
    const formData = new FormData()
    formData.append('username', username.value)

    const res = await fetch('/api/submit', {
      method: 'POST',
      body: formData
    })
    const text = await res.text()
    responseMessage.value = text
  }
  </script>

The showImage boolean controls whether the image is shown.

On button click, showImage = true and the image appears.

On form submit, we send a POST request to /api/submit route.

Nuxt’s server function returns a text response which we display.

Laravel (Blade Templating + PHP)

Laravel uses Blade templating for views.

We’ll have a route that serves a Blade view with a button/image/form.

For form submission, we’ll create a route that handles the POST request and returns a response.

In Laravel, we can show the image directly and handle the form in a controller method.

Routes (routes/web.php)

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome'); // the blade file
});

Route::post('/submit', function (\Illuminate\Http\Request $request) {
    $username = $request->input('username', 'No Name Provided');
    return "Hello, $username, from Laravel!";
});

Blade Template (resources/views/welcome.blade.php)


    <meta charset="UTF-8">
    <title>Laravel Example</title>
    <style>
        #myImage {
            display: none; 
            width: 200px;
            height: auto;
        }
    </style>
    <button id="showImageBtn">Show Image</button>
    <br><br>
    <img id="myImage" src="" alt="Hidden Image">

    <form id="myForm" method="POST" action="/submit">
        @csrf <!-- Laravel CSRF token -->
        <input type="text" name="username" placeholder="Enter your name">
        <button type="submit">Send</button>
    </form>

    <div id="responseArea"></div>

    <script>
        // Show image on button click
        document.getElementById('showImageBtn').addEventListener('click', function() {
            document.getElementById('myImage').style.display = 'block';
        });

        // Intercept the form submission to show response in page
        document.getElementById('myForm').addEventListener('submit', function(e) {
            e.preventDefault();

            // Collect form data
            const formData = new FormData(this);

            fetch('/submit', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '' // Include CSRF token
                },
                body: formData
            })
            .then(res => res.text())
            .then(data => {
                document.getElementById('responseArea').innerText = data;
            });
        });
    </script>

Click button -> shows image (just changes display: block).

Form submission via AJAX fetch -> posts to /submit.

Laravel route returns text response, displayed in responseArea.

In all examples:

Task 1 (Show Image): Just hide the image initially with CSS, then show it on button click by changing the style or a state variable.

Task 2 (Send Form): On form submit, use AJAX (fetch() or $.ajax() with jQuery) to send the data to the server, and then display the server’s response on the page.

These are minimal, basic examples just to illustrate how it might be done in each environment.

Bonus of two examples using Google Sheets with JavaScript and PHP to show a comparison.

const {google} = require('googleapis');

async function writeData() {
  const auth = new google.auth.GoogleAuth({
    keyFile: 'service_account.json', // or path to your JSON key
    scopes: ['https://www.googleapis.com/auth/spreadsheets']
  });

  const sheets = google.sheets({version: 'v4', auth});

  const spreadsheetId = 'YOUR_SPREADSHEET_ID';
  const range = 'Sheet1!A1:C3';

  const values = [
    ['Name', 'Age', 'City'],
    ['Charlie', '29', 'Chicago'],
    ['Diana', '32', 'Denver']
  ];

  const res = await sheets.spreadsheets.values.update({
    spreadsheetId,
    range,
    valueInputOption: 'RAW',
    resource: {values},
  });

  console.log('%d cells updated.', res.data.updatedCells);
}

writeData().catch(console.error);

<?php
require __DIR__ . '/vendor/autoload.php';

$client = new Google_Client();
$client->setApplicationName('Google Sheets API PHP');
$client->setScopes(Google_Service_Sheets::SPREADSHEETS);
$client->setAuthConfig('service_account.json'); 
$client->setAccessType('offline');

$service = new Google_Service_Sheets($client);

$spreadsheetId = 'YOUR_SPREADSHEET_ID';
$range = 'Sheet1!A1:C3';

$values = [
    ["Name", "Age", "City"],
    ["Eve", "28", "Houston"],
    ["Frank", "33", "Atlanta"]
];

$body = new Google_Service_Sheets_ValueRange([
  'values' => $values
]);

$params = [
    'valueInputOption' => 'RAW'
];

$result = $service->spreadsheets_values->update($spreadsheetId, $range, $body, $params);
echo $result->getUpdatedCells() . " cells updated.";

Task showdown with PHP and Node.js

PHP + jQuery

JavaScript + Node.js

Nuxt.js (Vue.js) + Node.js

Laravel (Blade Templating + PHP)