点击A链接时将表单输入字段内容存入Cookie或Session的技术需求

Alright, let's figure out how to save that comment input when the user clicks the SoundCloud connect link. I'll cover both cookie and session approaches since you mentioned either option:

Option 1: Store the Comment in a Cookie #

This approach uses a mix of frontend JavaScript to capture the click and send the data, plus a backend PHP script to set the cookie.

Step 1: Update Your HTML & Add JavaScript

We need to intercept the link click, grab the input value, send it to a backend script, then redirect to the SoundCloud auth URL:

<form>
  <input id="sccomment" type="text" placeholder="Leave a comment on Soundcloud" />
</form>
<a id="link" href="<?php echo $soundcloud_auth_url; ?>" class="btn-sc fw">Connect with Soundcloud</a>

<script>
document.getElementById('link').addEventListener('click', function(e) {
  // Stop the default link jump first
  e.preventDefault();
  const comment = document.getElementById('sccomment').value.trim();
  const redirectUrl = this.href;

  if (comment) {
    // Send the comment to our backend cookie-storing script
    fetch('store_comment_cookie.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `comment=${encodeURIComponent(comment)}`
    })
    .then(() => {
      // Once cookie is set, proceed to SoundCloud
      window.location.href = redirectUrl;
    })
    .catch(err => {
      console.error('Failed to save comment:', err);
      // Even if there's an error, let the user proceed
      window.location.href = redirectUrl;
    });
  } else {
    // No comment entered? Just redirect immediately
    window.location.href = redirectUrl;
  }
});
</script>

Step 2: Backend Cookie Script (store_comment_cookie.php)

This script handles setting the cookie with the comment value:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['comment'])) {
  $clean_comment = trim($_POST['comment']);
  // Set cookie to last 1 day (86400 seconds), accessible across your entire site
  setcookie('sccomment', $clean_comment, time() + 86400, '/');
  echo 'Comment saved to cookie';
}
?>

Option 2: Store the Comment in a Session #

Sessions are server-side, so this also needs a backend script, but the frontend flow is nearly identical.

Step 1: Update Your HTML & Add JavaScript

Same as the cookie option—we just point the fetch to a different backend script:

<form>
  <input id="sccomment" type="text" placeholder="Leave a comment on Soundcloud" />
</form>
<a id="link" href="<?php echo $soundcloud_auth_url; ?>" class="btn-sc fw">Connect with Soundcloud</a>

<script>
document.getElementById('link').addEventListener('click', function(e) {
  e.preventDefault();
  const comment = document.getElementById('sccomment').value.trim();
  const redirectUrl = this.href;

  if (comment) {
    fetch('store_comment_session.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `comment=${encodeURIComponent(comment)}`
    })
    .then(() => {
      window.location.href = redirectUrl;
    })
    .catch(err => {
      console.error('Failed to save comment:', err);
      window.location.href = redirectUrl;
    });
  } else {
    window.location.href = redirectUrl;
  }
});
</script>

Step 2: Backend Session Script (store_comment_session.php)

Remember to start the session first—this is mandatory for PHP sessions:

<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['comment'])) {
  $clean_comment = trim($_POST['comment']);
  $_SESSION['sccomment'] = $clean_comment;
  echo 'Comment saved to session';
}
?>

Bonus: No-JavaScript Fallback #

If you need to support users who have JS disabled, swap the link for a form submit button. This way, the comment is submitted to your backend directly before redirecting:

<form action="store_and_redirect.php" method="POST">
  <input id="sccomment" type="text" placeholder="Leave a comment on Soundcloud" name="comment" />
  <button type="submit" class="btn-sc fw">Connect with Soundcloud</button>
  <input type="hidden" name="redirect_url" value="<?php echo $soundcloud_auth_url; ?>" />
</form>

Then create store_and_redirect.php:

<?php
session_start();
// Choose either cookie or session storage
if (isset($_POST['comment'])) {
  $clean_comment = trim($_POST['comment']);
  setcookie('sccomment', $clean_comment, time() + 86400, '/');
  // $_SESSION['sccomment'] = $clean_comment;
}

// Redirect to SoundCloud auth URL
if (isset($_POST['redirect_url'])) {
  header('Location: ' . $_POST['redirect_url']);
  exit;
}
?>

内容的提问来源于stack exchange，提问作者Brad Fletcher