How to make specific fields in Django forms hidden by default and only displayed when conditions are met

This article describes how to use JavaScript to automatically execute search logic when the page is loaded, ensuring that the `quote-text` form is hidden by default and only displayed when there is no matching entity name in the database, solving the problem of inconsistency between the initial state and the interactive state.

To achieve "only the entity-name input box is displayed when the page is loaded, and the quote-form is hidden by default", the key is to not only respond to user input (onkeyup), but also perform an initialization check immediately after the DOM is fully ready . In the current code, searchEntities() is only triggered by user input, so when the page is first loaded, #quote-form still maintains the original display state in HTML (default is block), which does not meet expectations.

✅ Correct approach: Automatically trigger a search after the page is loaded

Just add a window.onload or the more modern DOMContentLoaded event listener at the end of the script and make sure the DOM is loaded before calling searchEntities():

 <script>
  function searchEntities() {
    const entityName = document.querySelector(&#39;#entity-name&#39;).value.trim();
    const quoteForm = document.querySelector(&#39;#quote-form&#39;);
    const searchResults = document.querySelector(&#39;#search_results&#39;);

    // Clear the last results searchResults.innerHTML = &#39;&#39;;

    // If the input is empty, you can choose to hide the form or keep the default behavior (adjust as needed)
    if (!entityName) {
      quoteForm.style.display = &#39;none&#39;;
      return;
    }

    fetch(`/search-entities/?entity_name=${encodeURIComponent(entityName)}`)
      .then(response => {
        if (!response.ok) throw new Error(&#39;Network response was not ok&#39;);
        return response.json();
      })
      .then(entities => {
        if (Array.isArray(entities) && entities.length === 0) {
          // No match in database → Display quote form quoteForm.style.display = &#39;block&#39;;
        } else {
          // There is a match → Hide the quote form and display the result quoteForm.style.display = &#39;none&#39;;
          entities.forEach(entity => {
            const p = document.createElement(&#39;p&#39;);
            p.textContent = entity.name; // Using textContent is safer searchResults.appendChild(p);
          });
        }
      })
      .catch(error => {
        console.error(&#39;Search failed:&#39;, error);
        quoteForm.style.display = &#39;none&#39;; // Hide conservatively when errors occur});
  }

  // ✅ Execute a search immediately after the page is loaded (initialization state)
  document.addEventListener(&#39;DOMContentLoaded&#39;, () => {
    searchEntities();
  });
</script>

? Precautions and optimization suggestions

• Prevent XSS : Use textContent instead of innerHTML to render entity names to avoid potential script injection.
• URL encoding : Use encodeURIComponent() on entityName to ensure that special characters (such as spaces, &) are passed correctly.
• Null value processing : Add .trim() and null value judgment to avoid accidentally triggering search when the user does not input.
• Error tolerance : Add fetch error handling to prevent API exceptions from causing logic interruption.
• Performance considerations : If you need anti-shake (to avoid frequent requests), you can add the setTimeout clearTimeout mechanism in onkeyup, but no anti-shake is required for the initialization call.

In this way, when the page is first loaded, it will automatically determine whether to display the quote-form based on the current value of entity-name (usually empty), and subsequent user input will be responded to in real time, truly realizing "what you see is what you get" form status control.

The above is the detailed content of How to make specific fields in Django forms hidden by default and only displayed when conditions are met. For more information, please follow other related articles on the PHP Chinese website!