Laravel中AJAX表单提交：点击仅存标题，需双击才完整保存求助

Hey there! Let's figure out why your AJAX form save only works fully on a double-click—this is a super common issue tied to either split AJAX requests, event handling quirks, or async timing problems. Here are the most likely fixes to get it working with a single click:

1. Stop sending two separate AJAX requests (the #1 fix) #

It sounds like you’re probably sending one request for the title and a separate one for the other form content. If the first click only triggers the title request, and the second triggers the content request, merging both into a single request will solve this immediately.

Here’s how to adjust your JS to collect all data and send it in one go:

document.querySelector('#save-button').addEventListener('click', function(e) {
  e.preventDefault(); // Block default form submission behavior
  
  // Grab values from both form fields
  const formData = {
    title: document.querySelector('#title-field').value,
    content: document.querySelector('#content-field').value
  };

  // Send everything in one POST request
  fetch('/your-save-route', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // Don't forget your CSRF token if your backend requires it!
      'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
    },
    body: JSON.stringify(formData)
  })
  .then(response => response.json())
  .then(updatedData => {
    // Run your existing update function once, with all new data
    updatePageContent(updatedData);
  })
  .catch(err => console.error('Save failed:', err));
});

2. Fix event binding issues #

If you’re dynamically binding events (e.g., after updating the DOM), the content field’s save listener might not be attached when you first click the button. Using event delegation ensures the click is caught no matter when the button loads:

// Bind to a parent element that's always present
document.addEventListener('DOMContentLoaded', function() {
  document.body.addEventListener('click', function(e) {
    if (e.target.id === 'save-button') {
      e.preventDefault();
      // Run the merged save logic here
    }
  });
});

3. Check for unintended blur-triggered saves #

Sometimes developers tie content saves to a field’s blur event (when the field loses focus). If that’s the case, your first click on the button might just trigger the title save, while the content save waits for the content field to lose focus (which happens after the first click). Ditch the blur-triggered logic and handle everything via the button click instead.

4. Avoid async race conditions #

If you must send two separate requests, make sure both are triggered on the same click, and use Promise.all() to wait for both to complete before updating your page:

document.querySelector('#save-button').addEventListener('click', function(e) {
  e.preventDefault();
  
  const titleReq = fetch('/save-title', { /* title data */ });
  const contentReq = fetch('/save-content', { /* content data */ });

  Promise.all([titleReq, contentReq])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .then(([titleData, contentData]) => {
    // Update page with both sets of data
    updatePageContent({ ...titleData, ...contentData });
  });
});

Most of the time, merging the requests into one will eliminate the double-click issue entirely. Double-check your backend route is set up to accept both fields at once too!

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