June 8, 200818 yr What I'm looking to do is take in a number with an HTML form I have set up, perform a calculation on the submitted number, and display the results in the paragraph tags without reloading the page. The gist of it is as follows: <form action="" method="post" id="input1"> <label for="width">Width:</label><br /> <input type="text" class="text" name="width1" size="10" /><br /> <input class="send-button" type="submit" value="Calculate" /> </form> <p class="under" ><!-- The input number divided by 1.61803 --></p> <p class="under" id="left"><!-- The input number minus the result above (ie. the two numbers here add up to the input number) --></p> I know my way around PHP a bit, but the Javascript or HTTPRequest or whatever I need to do this is lost on me. Any help would be awesome, thanks!
June 8, 200818 yr A simple javascript would do for this, it doesn't need to communicate with the server. If you want it to work without javascript however, you'll need to have a fallback solution via php. It's very similar to my new site quiz. If you can hang on til morning, I'll post up some script to help you out. BTW, welcome to the forum!
June 9, 200818 yr OK, I've altered your html example slightly: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ninja</title> <link type="text/css" rel="stylesheet" href="ninja.css" /> <script src="ninja.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function() { document.getElementById("myButton").onclick = calculateIt; document.getElementById("sendit").style.display = "none"; document.getElementById("myButton").style.display = "block"; } </script> </head> <body> <form action="" method="post" id="input1"> <label for="width">Width:</label><br /> <input type="text" class="text" id="width" name="width1" size="10" /><br /> <p><span id="myButton">Calculate</span></p> <input id="sendit" class="send-button" type="submit" value="Calculate" /> </form> <p id="output"><!-- The input number divided by 1.61803 --></p> <p id="output2"><!-- The input number minus the result above (ie. the two numbers here add up to the input number) --></p> </body> </html> The java script: function calculateIt(){ var input = document.getElementById('width'); var input2 = parseInt(input.value); var output = document.getElementById('output'); var output2 = document.getElementById('output2'); var answer1 = parseFloat(input2 / 1.61803); if(isNaN(answer1)) { answer1 = "you must enter a number"; } output.innerHTML = answer1; answer2 = input2 - answer1; if(isNaN(answer2)) { answer2 = ""; } output2.innerHTML = answer2; } and a little bit of css #myButton { display:none; cursor:pointer; } I've used innerHTML to set the content of your paragraphs which tbh is a little bit crude but it does the job. I've hidden the standard form submit button for people with javascript enabled and replaced it with a span called myButton. You can add a background image to this make it more obvious etc. People without javascript will see the standard form submit button which will rely on your php script to provide the answer. As you've said your familiar with php, I'll leave you to it. Hope that helps you get started. If you have any problems, just ask.
Create an account or sign in to comment