如何在PHP中使用JavaScript变量？多元素值写入文件技术求助

Hey there, let's break down what's going wrong with your code and fix it step by step.

First off, the biggest issue here is that you're mixing client-side (JavaScript) and server-side (PHP) code incorrectly. PHP runs on the server before the page even loads in the browser, so that PHP block inside your createfile() function will execute immediately when the page loads—not when you trigger the function. That's why your file isn't being created when you expect it to.

Let's Fix This Properly #

Your goal is to collect values from multiple page elements, combine them with default text, and write the result to a server file. We'll split this into two separate parts: front-end JS to collect and send data, and back-end PHP to handle file writing.

1. Front-End JavaScript (Collect & Send Data) #

This code will loop through your elements, gather their values, format the text, and send it to a PHP script via Fetch API (modern alternative to AJAX):

function createFile() {
  // Adjust this number to match how many elements you need to process
  const totalElements = 3; 
  let finalContent = "";

  // Loop through each element
  for (let i = 0; i < totalElements; i++) {
    const baseId = `element_${i}`; // Use a consistent naming pattern (e.g., element_0, element_1)
    const targetElement = document.getElementById(baseId);

    // Skip if the element doesn't exist
    if (!targetElement) continue;

    // Only process input elements (adjust this if you need other element types)
    if (targetElement.tagName.toLowerCase() === 'input') {
      const pName = targetElement.value;
      const pFont = document.getElementById(`${baseId}_font`).value;
      const pFontSize = document.getElementById(`${baseId}_fontsize`).value;

      // Build your desired text format
      finalContent += `<p>${pName} new text ${pFont} even more new text ${pFontSize} last bit of text</p>\n`;
    }
  }

  // Send the formatted content to the PHP backend
  fetch('save-content.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `content=${encodeURIComponent(finalContent)}`
  })
  .then(response => response.text())
  .then(message => {
    console.log(message);
    alert('File created successfully!');
  })
  .catch(error => {
    console.error('Error:', error);
    alert('Failed to create file. Check server logs for details.');
  });
}

2. Back-End PHP (Write to File) #

Create a new PHP file named save-content.php in the same directory as your HTML page. This script will receive the data from JS and write it to your file:

<?php
// Only handle POST requests
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['content'])) {
  // Decode the content sent from JS
  $content = urldecode($_POST['content']);
  
  // Open or create the file, write content, then close
  $fileHandle = fopen("newfile.txt", "w") or die("Unable to open file!");
  fwrite($fileHandle, $content);
  fclose($fileHandle);
  
  echo "File written successfully!";
} else {
  echo "Invalid request. Please use a POST request with content data.";
}
?>

Key Notes to Make This Work #

• Consistent Element Naming: Make sure your HTML elements follow the pattern we used (e.g., element_0, element_0_font, element_0_fontsize). Adjust the baseId variable if your naming is different.
• File Permissions: Ensure the directory where newfile.txt will be created has write permissions for the PHP process (usually setting chmod 755 on the directory works, but check your server's requirements).
• Flexible Element Count: Instead of hardcoding totalElements, you could dynamically find all relevant elements with document.querySelectorAll('[id^="element_"]') if your element count varies.
• Text Formatting: Tweak the finalContent line to match exactly the text structure you need (I fixed the opening </p> in your original code since that's invalid HTML).

内容的提问来源于stack exchange，提问作者Rubin Nederlof