Documentation for Frontend Team.md

Documentation for Frontend Team:

---

API Integration: Auto-Submission with Pre-populated URL Parameters

Overview

Your API returns URLs containing query parameters. These parameters must be parsed to pre-populate form elements, then automatically submit the form on page load.

API Response Format

{
  "redirectUrl": "https://yourapp.com/form?category=electronics&price=500&condition=new"
}

Implementation Requirements

Step 1: Parse URL Parameters

Extract query parameters from the URL provided by the API.

const params = new URLSearchParams(window.location.search);

// Example: URL is /form?category=electronics&price=500&condition=new
// params.get('category') returns 'electronics'
// params.get('price') returns '500'

Step 2: Pre-populate Form Elements

Map URL parameters to form fields by matching parameter names to form element name attributes.

params.forEach((value, key) => {
  const element = document.querySelector(`[name="${key}"]`);
  
  if (element) {
    if (element.tagName === 'SELECT') {
      element.value = value;
    } else if (element.type === 'checkbox' || element.type === 'radio') {
      element.checked = (element.value === value);
    } else {
      element.value = value;
    }
  }
});

Step 3: Auto-Submit Form

Trigger form submission after pre-population.

window.addEventListener('DOMContentLoaded', () => {
  // Step 1 & 2: Parse and populate
  const params = new URLSearchParams(window.location.search);
  
  params.forEach((value, key) => {
    const element = document.querySelector(`[name="${key}"]`);
    if (element) element.value = value;
  });
  
  // Step 3: Auto-submit
  const form = document.getElementById('yourFormId');
  form.submit();
  
  // Alternative: Trigger submit button click if you have custom validation
  // document.getElementById('submitButton').click();
});

Form Requirements

• Each form field must have a name attribute matching the API’s URL parameter names
• Form must have an id for JavaScript selection
• Ensure form validation doesn’t block auto-submission

Example HTML

<form id="searchForm" action="/results" method="GET">
  <select name="category">
    <option value="electronics">Electronics</option>
    <option value="clothing">Clothing</option>
  </select>
  
  <input type="number" name="price" />
  
  <select name="condition">
    <option value="new">New</option>
    <option value="used">Used</option>
  </select>
  
  <button type="submit" id="submitButton">Search</button>
</form>

Testing

1. Navigate to: /form?category=electronics&price=500&condition=new
2. Verify dropdowns/inputs populate correctly
3. Verify form auto-submits immediately
4. Verify results page receives correct parameters

Edge Cases to Handle

• Missing parameters: Don’t break if expected parameter is absent
• Invalid values: Validate parameter values match available options
• Encoded values: URL decode special characters (%20, %2B, etc.)
• Multiple values: Handle array parameters if needed (?tags=a&tags=b)

Security Notes

• Sanitize all URL parameters before use
• Validate parameter values against allowed options server-side
• Never trust client-side data

---

Questions or issues? Contact [your team/email].​​​​​​​​​​​​​​​​