Member Avatar for alim18

Hello Guys,

firstly i wanna say that this is really great forum. this my first on this forum and hoepfully will not be the last one. okey let me explain what is my problem;

on that site http://www.paid-surveys-at-home.com/ i saw this form is created which calcuates "How Much..................." etc.. i really dont want you think i do advertise such site, im totally not realted to them and dont believe in such things. I just want to learn how they created this form. below i gave the code which got from their resource but i really couldnt make it work. What should i do the get the exact same form as in mentioned site? below i pasted the not working code. Thank you very much indeed.

Greetings from Istanbul, Turkey

<form action="#" enctype="multipart/form-data" name="form" id="form">
						<div class="container font-1">
							<div class="form-col-1">How many Surveys can you do a day?</div>
							<div class="form-col-2">
							  <select name="q1" id="q1" onchange="calculate()" class="jump">
                                <option value="1">1</option>
                                <option value="5">5</option>
                                <option value="10">10</option>
                                <option value="15">15</option>
                                <option value="20">20</option>
                                <option value="25">25</option>
                              </select>
							</div>
							<div class="form-col-3">Weekly Income:</div>
							<div class="form-col-4">$<span id="weekly">____</span></div>
						</div>
						<div class="container font-1">
							<div class="form-col-1">Average earned for each Survey?</div>
							<div class="form-col-2">
							 <select name="q2" id="q2" onchange="calculate()" class="jump">
							  <option value="0">$0</option>
							  <option value="1">$1</option>
							  <option value="3">$3</option>
							  <option value="5">$5</option>
							  <option value="10">$10</option>
							  <option value="20">$20</option>
							  <option value="25">$25</option>
							  <option value="30">$30</option>
							  <option value="50">$50</option>
							  <option value="75">$75</option>
							 </select>
							</div>
							<div class="form-col-3">Monthly Income:</div>
							<div class="form-col-4">$<span id="monthly">____</span></div>
						</div>
						<div class="container font-1">
							<div class="form-col-1">Days per week you'll fill out Surveys?</div>
							<div class="form-col-2">
							 <select name="q3" id="q3" onchange="calculate()" class="jump">
							  <option value="1">1</option>
							  <option value="2">2</option>
							  <option value="3">3</option>
							  <option value="4">4</option>
							  <option value="5">5</option>
							  <option value="6">6</option>
							  <option value="7">7</option>
							 </select>
							</div>
							<div class="form-col-3">Yearly Income:</div>
							<div class="form-col-4">$<span id="yearly">____</span></div>
						</div>
</form>
  • 3 Contributors
  • 3 Replies
  • 278 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by alim18

Dani AI

Generated

Short summary and practical fixes based on the thread: the page does the math entirely in client-side JavaScript and writes results into the span placeholders. identified the page script and explained the basic calculate behavior. Common reasons a copied version fails are timing (script runs before the DOM), non-numeric option values (for example option text that contains “$”), mismatched ids, or silent JS errors in the console.

Quick checklist (most frequent problems):

  • Place the script after the form markup or run it on DOMContentLoaded.
  • Keep option values numeric (no currency symbol) or strip non-digits before converting.
  • Convert values with Number() or parseFloat(), not by relying on implicit string math.
  • Use textContent (not innerHTML) to write plain text into the spans.
  • Initialize the calculation once on load so the output isn’t blank.
  • Check the browser console for errors and mismatched element ids.

A robust, modern pattern (attach listeners, handle bad values, format numbers):

document.addEventListener('DOMContentLoaded', function () {
  var get = function(id){ return document.getElementById(id); };
  function toNumber(el){
    if(!el) return 0;
    var v = (el.value || '').replace(/[^0-9.\-]/g,'');
    var n = parseFloat(v);
    return isNaN(n) ? 0 : n;
  }
  function calc(){
    var weekly = toNumber(get('q1')) * toNumber(get('q2')) * toNumber(get('q3'));
    var monthly = weekly * (52/12);
    var yearly = weekly * 52;
    get('weekly').textContent  = Math.round(weekly).toLocaleString();
    get('monthly').textContent = Math.round(monthly).toLocaleString();
    get('yearly').textContent  = Math.round(yearly).toLocaleString();
  }
  ['q1','q2','q3'].forEach(function(id){
    var el = get(id); if(el) el.addEventListener('change', calc);
  });
  calc();
});

Final notes: parseInt drops cents—use parseFloat or rounding as needed. For money output, Intl.NumberFormat gives proper currency formatting. Avoid global function names (use closures or small modules). For reliability, include a server-side fallback if totals must be trusted for business logic.

Recommended Answers

All 3 Replies

Member Avatar for smantscheff

They did it with some javascript functionality which you can find here:

Member Avatar for sudeepjd

If you are looking at how the numbers at the side appear, Its done through Javascript. Although this is a PHP forum, I'll explain how you can do this yourself via Javascript.

Each of the drop down menus are linked to a JavasScript function calculate() as you can see in the code you posted. This calls the function which is present in the file of which smantscheff has given the link. The relevent code is below.

function calculate(){ 
	if ( document.getElementById('q2').value != 0 ) { 
		var weekly = document.getElementById('q1').value* document.getElementById('q2').value* document.getElementById('q3').value; 
		var monthly = weekly*52/12; var yearly = monthly*12; 
		document.getElementById('weekly').innerHTML = parseInt(weekly); 
		document.getElementById('monthly').innerHTML = parseInt(monthly); 
		document.getElementById('yearly').innerHTML = parseInt(yearly); 
	} 
}

Javascript can be used to change values directly in any element of the DOM (Document Object Model) of HTML. In this case, they use the <span> element. For e.g. <span id="yearly">____</span> for the yearly data.

You can set the values in the HTML page by using the innerHTML attribute.

If you need further explanation of how this works please do let us know.

Member Avatar for alim18

Thank You very muchhh, really great help and great people here..

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.