Member Avatar for ahmksssv

Hi fnds...
i am doing polling system to a perticular topic.
i want to display yes/ no results in progressbar, after submittimg user vote(yes/ no) from radio buttons....

everything i can do, but the only problem is display results in progress bar....

plz give me a suggetions....how can i do....

  • 2 Contributors
  • 2 Replies
  • 111 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ahmksssv

Dani AI

Generated

A small, practical plan that fits s original goal and follows s suggestion: send the radio selection with AJAX, let the server increment the poll counts, return the updated yes/no totals as JSON, and update two CSS-based bars on the page. That keeps the UI instant and avoids a full page reload. Provide a no-JS fallback by handling the normal form POST on the server and rendering the results page there.

Example client side (HTML + JavaScript):

<form id="pollForm" data-topic="123">
  <label><input type="radio" name="vote" value="yes" required> Yes</label>
  <label><input type="radio" name="vote" value="no"> No</label>
  <button type="submit">Vote</button>
</form>

<div class="poll-bars" style="width:320px;">
  <div id="yesBar" class="bar" style="width:0%">Yes <span id="yesPct">0%</span></div>
  <div id="noBar" class="bar" style="width:0%">No <span id="noPct">0%</span></div>
</div>

<script>
document.getElementById('pollForm').addEventListener('submit', function(e){
  e.preventDefault();
  const form = e.target;
  const data = new FormData(form);
  data.append('topic_id', form.dataset.topic);
  fetch('/vote.php', { method: 'POST', body: data })
    .then(r => { if (!r.ok) throw r; return r.json(); })
    .then(json => {
      const yes = parseInt(json.yes_count,10) || 0;
      const no  = parseInt(json.no_count,10)  || 0;
      const total = yes + no;
      const yesPct = total ? Math.round(yes/total*100) : 0;
      const noPct  = total ? 100 - yesPct : 0;
      document.getElementById('yesBar').style.width = yesPct + '%';
      document.getElementById('noBar').style.width  = noPct  + '%';
      document.getElementById('yesPct').textContent = yesPct + '%';
      document.getElementById('noPct').textContent  = noPct  + '%';
    })
    .catch(err => console.error('Vote error', err));
});
</script>

Server side — minimal safe flow (use prepared statements; this example uses PDO):

<?php
header('Content-Type: application/json; charset=utf-8');
$topic = isset($_POST['topic_id']) ? (int)$_POST['topic_id'] : 0;
$vote  = isset($_POST['vote']) ? $_POST['vote'] : '';
if (!$topic || ($vote !== 'yes' && $vote !== 'no')) {
  http_response_code(400);
  echo json_encode(['error'=>'invalid input']);
  exit;
}
$pdo = new PDO('mysql:host=localhost;dbname=yourdb;charset=utf8mb4','user','pass',[PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION]);
$pdo->beginTransaction();
$stmt = $pdo->prepare($vote === 'yes'
    ? 'UPDATE polls SET yes = yes + 1 WHERE id = ?'
    : 'UPDATE polls SET no  = no  + 1 WHERE id = ?');
$stmt->execute([$topic]);
$stmt = $pdo->prepare('SELECT yes, no FROM polls WHERE id = ?');
$stmt->execute([$topic]);
$row = $stmt->fetch(PDO::FETCH_ASSOC);
$pdo->commit();
echo json_encode(['yes_count'=> (int)$row['yes'], 'no_count'=> (int)$row['no']]);

Notes and troubleshooting

  • Table: keep aggregate counters (yes/no) for quick updates, or store individual rows for audit. Example aggregate schema: CREATE TABLE polls (id INT PRIMARY KEY AUTO_INCREMENT, question VARCHAR(255), yes INT DEFAULT 0, no INT DEFAULT 0);
  • Prevent duplicate votes: for logged-in users enforce one-vote-per-user (unique key on poll_id+user_id). For anonymous users consider a cookie + short IP check, but understand limits.
  • Concurrency: atomic UPDATE col = col + 1 is fine with InnoDB. Use transactions if you do multi-step checks.
  • Zero-vote handling: guard against divide-by-zero (example sets both to 0% when total is 0).
  • Debugging: use browser DevTools network tab to confirm JSON, check server response code and Content-Type, and log server errors. If the bars never change, confirm the JS receives correct numeric counts.
  • Security: validate inputs, use prepared statements, and add CSRF protection for logged-in flows.

This pattern is what implied by examining existing scripts but boiled down to a minimal, maintainable AJAX + PHP implementation that gives immediate progress-bar feedback for s polling UI.

Recommended Answers

All 2 Replies

Member Avatar for ahmksssv

It has been done beofre, so often the easiest way is to google for what you want, then read the script source to see how they did it, and implement something similar

http://www.stadtaus.com/demos/voting_script/voting_image_options_en.php

http://www.google.ca/search?hl=en&q=graphical+poll+script&meta=

Hi almostbob...

Thank u very much...
great tutorials...i am doing my own poling by using the above referances.. Thank u once again...

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.