Member Avatar for chaitu11 
i may select one or more category....
<?php
include('db.php');
$sql = mysqli_query("select * from brandname where category = 'cloths' ");
while($row = mysqli_fetch_array($sql)){
    echo $row['brandname'];
}
?>

<form action="checkbox.php" method="post">
Bags:<input type="checkbox" name="bags"  value="bags"><br/>
Cloths:<input type="checkbox" name="cloths"  value="cloths"><br/>
Bikes:<input type="checkbox" name="bike"  value="bike"><br/>
Shoes:<input type="checkbox" name="shoes"  value="shoes"><br/>
</form>

<div id="load">
</div>
Edited by chaitu11
  • 2 Contributors
  • 2 Replies
  • 183 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by chaitu11

Dani AI

Generated

As showed a simple checkbox form and correctly suggested using JavaScript, a robust pattern is: listen for checkbox changes on the client, send the selected categories to a single server endpoint, and update the target div with the response. This keeps the UI responsive and lets the server return only the matching brands (or an empty result) instead of reloading the page.

Example client-side (vanilla JS + fetch). Place this near your form and the div you want filled:

<form id="catsForm">
  <label><input type="checkbox" name="categories[]" value="bags"> Bags</label>
  <label><input type="checkbox" name="categories[]" value="cloths"> Cloths</label>
  <label><input type="checkbox" name="categories[]" value="bikes"> Bikes</label>
  <label><input type="checkbox" name="categories[]" value="shoes"> Shoes</label>
</form>

<div id="load"></div>

<script>
const form = document.getElementById('catsForm');
const out = document.getElementById('load');

form.addEventListener('change', () => {
  const selected = Array.from(form.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
  if (!selected.length) { out.innerHTML = ''; return; }
  out.textContent = 'Loading...';

  fetch('load-brands.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ categories: selected })
  })
  .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(json => {
    if (!Array.isArray(json.brands) || json.brands.length === 0) {
      out.innerHTML = '<p>No brands found.</p>'; return;
    }
    out.innerHTML = '<ul>' + json.brands.map(b => '<li>' + escapeHtml(b) + '</li>').join('') + '</ul>';
  })
  .catch(e => { console.error(e); out.textContent = 'Error loading brands.'; });

});

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
</script>

Minimal server-side (PHP using PDO, return JSON):

<?php
header('Content-Type: application/json; charset=utf-8');
$input = json_decode(file_get_contents('php://input'), true);
$cats = (isset($input['categories']) && is_array($input['categories'])) ? $input['categories'] : [];
if (!$cats) { echo json_encode(['brands' => []]); exit; }

$pdo = new PDO('mysql:host=HOST;dbname=DB;charset=utf8', 'USER', 'PASS', [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
$placeholders = implode(',', array_fill(0, count($cats), '?'));
$sql = "SELECT DISTINCT brandname FROM brandname WHERE category IN ($placeholders) LIMIT 100";
$stmt = $pdo->prepare($sql);
$stmt->execute($cats);
$brands = $stmt->fetchAll(PDO::FETCH_COLUMN);
echo json_encode(['brands' => $brands]);

Quick troubleshooting and safety notes: use prepared statements (shown) to avoid SQL injection; set the JSON header; check the browser Network tab for payload and response; escape any server-sent strings before injecting into innerHTML to prevent XSS; consider debouncing rapid checkbox changes and provide a no-JS fallback (simple form submit) for progressive enhancement. This pattern is lightweight, easy to debug, and scales well as you add more categories or filters.

Recommended Answers

All 2 Replies

Member Avatar for ehpratah

You need js to do it see this sample

Member Avatar for chaitu11

Thank you sooo much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.