Symfony 4：获取轮播图当前显示图片的src并传入PHP控制器存入数据库

Got it, let's solve this problem step by step. The goal is to capture the src of the currently displayed avatar in your carousel and send it along with your form submission to your PHP controller. Here's how to modify your existing code to make this work:

Step 1: Add a Hidden Input to Your Form #

First, we need a place to store the current avatar's src so it gets submitted with the form. Add a hidden input field inside your form in the Twig template. We'll initialize it with the first avatar's src to start:

<div class="app-form app-form-character_id">
  {{ form_start(idForm) }}
  {{ form_widget(idForm) }}
  <!-- Hidden field to track current avatar source -->
  <input type="hidden" id="currentAvatarSrc" name="current_avatar" value="{{ asset('images/avatars/001.png') }}">
  <button class="app-nav-btn app-form-btn" type="submit">CONFIRM</button>
  {{ form_end(idForm) }}
</div>

Step 2: Update JavaScript to Sync the Hidden Field with Carousel Changes #

Next, modify your showDivs function to update the hidden field's value every time the carousel slides. This ensures the hidden field always holds the src of the currently visible image:

let slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  let i;
  let x = document.getElementsByClassName("app-avatar-slide-img");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  // Get the currently visible image
  const currentImage = x[slideIndex - 1];
  currentImage.style.display = "block";
  // Update the hidden field with its src
  document.getElementById('currentAvatarSrc').value = currentImage.src;
}

Step 3: Retrieve the Value in Your PHP Controller #

Now, when the form is submitted, you can grab the current_avatar value from the request in your controller. Note that currentImage.src will give you the full URL, so if you need just the relative path (like images/avatars/003.png), you can parse it to remove the domain and base path:

use Symfony\Component\HttpFoundation\Request;

public function handleCharacterCreation(Request $request)
{
    $idForm = $this->createForm(IdFormType::class);
    $idForm->handleRequest($request);

    if ($idForm->isSubmitted() && $idForm->isValid()) {
        // Get form data from your existing form
        $formData = $idForm->getData();
        
        // Get the full avatar URL from the hidden field
        $fullAvatarUrl = $request->request->get('current_avatar');
        
        // Optional: Convert full URL to relative path (if needed)
        $baseUrl = $request->getSchemeAndHttpHost() . $request->getBasePath() . '/';
        $relativeAvatarPath = str_replace($baseUrl, '', $fullAvatarUrl);

        // Now you can use $fullAvatarUrl or $relativeAvatarPath in your logic
        // e.g., save to database, process further, etc.
    }

    // Render your page as before
    return $this->render('page.html.twig', [
        'idForm' => $idForm->createView(),
    ]);
}

How This Works: #

• The hidden field acts as a bridge between your frontend carousel state and the backend form submission.
• Every time the user clicks the carousel buttons, the JavaScript updates the hidden field to match the current image's src.
• When the form is submitted, the hidden field's value is sent along with the rest of the form data, making it accessible in your PHP controller.

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