SWEngineer Posted July 22, 2010 Share Posted July 22, 2010 I have an HTML form.This form contains three fields:First numberSecond number SumFirst number and Second number are text box fields, and currently sum also.I have included the addition equation of sum, such that sum = first_number + second_cumberBut, what I want is "Display" the result of sum, and don't want sum to be a text box field, just a field where I can get the result show automatically once filling first_number and second_number.How can I do that?Thanks. Link to comment Share on other sites More sharing options...
SWEngineer Posted July 22, 2010 Author Share Posted July 22, 2010 Actually I'm using .html.erb files, where I can embed Ruby code to find the results and do some mathematic. But, yes, my question is just how to display the result on an HTML form.Thanks. Link to comment Share on other sites More sharing options...
chibineku Posted July 22, 2010 Share Posted July 22, 2010 This sounds like a job for JavaScript. You can set behaviours to happen when certain events occur, such as when the user hits a button to perform the addition or when the field where they input the second number loses focus.Here is the general idea:<html><head><title>Addition</title><script type="text/javascript">function add_em() {first = document.getElementById("first");second = document.getElementById("second");output = document.getElementById("output");output.value = parseInt(first.value)+parseInt(second.value);}</script></head><body><input type="text" size="5" id="first" value="" /><input type="text" size="5" id="second" value=""/><input type="button" value="add" onclick="add_em()" /><input type="text" size="10" id="output" value="" /></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted July 22, 2010 Share Posted July 22, 2010 If you wanted it to fire when the user enters the numbers (without pressing a button) just add the function to the onchange or onblur events of the input boxes.BTW, to make is so your output is not a text box you can use a div or a span and then instead of changing the value you'd change the innerHTML.output = document.getElementById("output");output.innerHTML = parseInt(first.value)+parseInt(second.value);...<span id='output'></span> Link to comment Share on other sites More sharing options...
SWEngineer Posted July 22, 2010 Author Share Posted July 22, 2010 Thanks a lot everyone for your replies.Yes, I noticed I need JavaScript for that. Link to comment Share on other sites More sharing options...
SWEngineer Posted July 22, 2010 Author Share Posted July 22, 2010 Now, I'm writing the code as follows, such that I want the last field (output) to display the result immediately once moving to it: http://pastie.org/private/l8qbvvsmu01pr9kfoxcshqBut, it is not working.What am I missing?Thanks. Link to comment Share on other sites More sharing options...
chibineku Posted July 22, 2010 Share Posted July 22, 2010 Instead of putting the onchange handler in the output field, you want to put it in the field #second. Link to comment Share on other sites More sharing options...
SWEngineer Posted July 22, 2010 Author Share Posted July 22, 2010 Instead of putting the onchange handler in the output field, you want to put it in the field #second.Thanks a lot for your reply.I made the following modifications, but still don't get the required result. Any ideas on that?http://pastie.org/private/sy8lkdhvfunudvrizbjjca Link to comment Share on other sites More sharing options...
ShadowMage Posted July 22, 2010 Share Posted July 22, 2010 Thanks a lot for your reply.I made the following modifications, but still don't get the required result. Any ideas on that?http://pastie.org/private/sy8lkdhvfunudvrizbjjca Can you post relevant portions of your code? I'm unable to visit your site (company policy). Link to comment Share on other sites More sharing options...
SWEngineer Posted July 22, 2010 Author Share Posted July 22, 2010 Thanks a lot everyone. This is the working version: http://pastie.org/private/bgpuha7hynug6nxv12brigShadowMage, what do you mean by "Company Policy". Aren't you able to access http://pastie.org?Thanks. Link to comment Share on other sites More sharing options...
ShadowMage Posted July 22, 2010 Share Posted July 22, 2010 ShadowMage, what do you mean by "Company Policy". Aren't you able to access http://pastie.org?I mean that I'm at work and my company's policy only allows me to go certain places. (This forum, oddly enough, being one them) So no, I cannot visit that site.Edit: Unless of course it has anything to do with programming or troubleshooting computers or other information technology stuff. Link to comment Share on other sites More sharing options...
chibineku Posted July 23, 2010 Share Posted July 23, 2010 Well, it sort of works, but not as expected: the output field is updated when the second field loses focus, which I could have called onblur and not onchange. Final thing to try: change the event to onkeyup. I've tried it and this works as you want. Link to comment Share on other sites More sharing options...
SWEngineer Posted July 23, 2010 Author Share Posted July 23, 2010 Can you post relevant portions of your code? I'm unable to visit your site (company policy).Here is where I reached so far:<html><head><title>Addition</title><script type="text/javascript">function add_em() {first = document.getElementById("first");second = document.getElementById("second");output = document.getElementById("output"); output.innerHTML = parseInt(first.value) + parseInt(second.value);}</script></head><body><input type="text" size="5" id="first" value="" /><input type="text" size="5" id="second" value="" onchange="add_em();"/><input type="text" size="10" id="output"/></body></html> Link to comment Share on other sites More sharing options...
SWEngineer Posted July 23, 2010 Author Share Posted July 23, 2010 Well, it sort of works, but not as expected: the output field is updated when the second field loses focus, which I could have called onblur and not onchange. Final thing to try: change the event to onkeyup. I've tried it and this works as you want.Thanks a lot chibineku, will try that soon. Link to comment Share on other sites More sharing options...
ShadowMage Posted July 23, 2010 Share Posted July 23, 2010 Well, I see one problem. You use innerHTML in your javascript function but the output is an input. Input's do not have an innerHTML property. You need to use output.value instead. Or if you don't want to use a text box for the output you could change the output to a div or a span. So your HTML would then look something like this:<input type="text" size="5" id="first" value="" /><input type="text" size="5" id="second" value="" onchange="add_em();"/><span id='output'></span>You wouldn't have to change anything with your JavaScript function. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.