#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0

    Question Javascript and HTML5: Multiple Input-boxes/Forms Conflict


    I made an HTML5 file that contains javascript (generated by coffeescript). The HTML5 should allow users to type the temperature in one of two boxes. The first (top) input box converts Kelvin to Celsius and the second (bottom) does the reverse. The first input box works well. However, the second input box is using the JS-function that is intended for the first box. So, the alert box displays an incorrect value.


    Code:
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>Temperature Conversions</title></head>
    	<body>
    		<script type="text/javascript">
    function k2c() { //Kelvin to Celsius
    	var x;
    	x = document.querySelectorAll('input[name="k2c_input"]')[0].value - 273.15;
    	alert(x.toFixed(2));
    }
    
    function c2k() { //Celsius to Kelvin
    	var x;
    	x = document.querySelectorAll('input[name="c2k_input"]')[0].value + 273.15;
    	alert(x.toFixed(2));
    }
    		</script>
    
    <form method="get">
    
    <p>Kelvin to Celsius</p>
    	<input type="text" name="k2c_input" value="" placeholder="KELVIN" id="k2c_input"/>
    	<button name="k2c_button" id="k2c_button" onClick="k2c()">Solve</button>
    
    <p>Celsius to Kelvin</p>
    	<input type="text" name="c2k_input" value="" placeholder="CELSIUS" id="c2k_input"/>
    	<button name="c2k_button" id="c2k_button" onClick="c2k()">Solve</button>
    
    </form>
    	</body>
    </html>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,142
    Rep Power
    120
    Try this:
    Code:
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>Temperature Conversions</title></head>
    	<body>
    		<script type="text/javascript">
    function k2c() { //Kelvin to Celsius
    	var x;
    	x = parseInt(document.querySelectorAll('input[name="k2c_input"]')[0].value) - 273.15;
    	alert(Math.round(x.toFixed(2)));
    }
    
    function c2k() { //Celsius to Kelvin
    	var x;
    	x = parseInt(document.querySelectorAll('input[name="c2k_input"]')[0].value) + 273.15;
    	alert(Math.round(x.toFixed(2)));
    }
    		</script>
    
    <form method="get" onsubmit="return false">
    
    <p>Kelvin to Celsius</p>
    	<input type="text" name="k2c_input" value="" placeholder="KELVIN" id="k2c_input"/>
    	<button name="k2c_button" id="k2c_button" onClick="k2c()">Solve</button>
    
    <p>Celsius to Kelvin</p>
    	<input type="text" name="c2k_input" value="" placeholder="CELSIUS" id="c2k_input"/>
    	<button name="c2k_button" id="c2k_button" onClick="c2k()">Solve</button>
    
    </form>
    	</body>
    </html>
    I added in parseInt() and Math.round(); to give a more unilaterally accurate numeric representation of each temperatures format. And... I added in "return false" to your form's onSubmit event, because; in certain browsers, a button element or a input element (that has a "button" type) can submit a form (when it's onClick event occurs).

    Comments on this post

    • DevynCJohnson agrees : Thank you
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0

    Lightbulb Thank you


    Your code works. Thank you.
    I have tried CodingForums (with the thread title "Javascript and Multiple HTML5 Forms Conflict"), but no one could figure it out. Devshed Forums are great.

IMN logo majestic logo threadwatch logo seochat tools logo