I'm really stucked in finding out how this form created

[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>

[smantscheff]

They did it with some javascript functionality which you can find here: http://www.paid-surveys-at-home.com/maxheight.js

[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 maxheight.js 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.

[alim18]

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