SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why won't these two forms on the same page work?

    Why won't these two forms on the same page work? If I remove one form, then the other works fine. Yes, I'm new at JS!

    Also, what does size="8" do for the field? I've changed the number and see little difference.

    Regards,
    Steve

    HTML Code:
    <p>
    <table border="0" cellpadding="5" cellspacing="0" width="100%">
    <tr>
    <td class="alignright">
    <form id="formFahCel">Degrees Fahrenheit <input class="display2" type="number" size="8" value="" name="FAH">
     </td>
     </tr>
    <tr>
    <td class="alignright">
    <input id="calcCEL" class="buttPress2" type="button" value="Celsius =">  
    <input class="display2" size="8" type="number" name="ansCEL" value="">
    </td>
    </tr>
    </form>
    </table>
    </p>
    
    
    <p>
    <table border="0" cellpadding="5" cellspacing="0" width="100%">
    <tr>
    <td class="alignright">
    <form name="formCelFah">Degrees Celsius <input class="display2" type="number" name="CEL" size="8" value="">
     </td>
     </tr>
    <tr>
    <td class="alignright">
    <input id="calcFAH" class="buttPress2" type="button" value="Fahrenheit =">  
    <input class="display2" size="8" type="number" name="ansFAH" value="">
    </td>
    </tr>
    </form>
    </table>
    </p>
    
    
    
    <SCRIPT LANGUAGE="JavaScript">
    
    function convertFahCel(form) {
    var a = form.elements.FAH.value,
        c =(a-32)/1.8;
        form.elements.ansCEL.value = c;
    }
     
     function convertCelFah(form) {
    var a = form.elements.CEL.value,
        f=(a*1.8)+32;
        form.elements.ansFAH.value = f;
    }
    
    var form = document.getElementById('formFahCel');
    calcCEL.onclick = function () {
        convertFahCel(form);
    }    
    
    var form = document.getElementById('formCelFah');
    calcFAH.onclick = function () {
        convertCelFah(form);
    }
    
    </SCRIPT>
    
    </body>
    </html>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    calcCEL.onclick = function () {
        convertFahCel(form);
    }
    Use the error console.

    You cannot reference an element directly by its ID. Use document.getElementById.

    You can dispense with the form reference:
    Code:
    <script type="text/javascript">
    
    function convertFahCel(form) {
    var a = form.elements.FAH.value,
        c =(a-32)/1.8;
        form.elements.ansCEL.value = c;
    }
     
     function convertCelFah(form) {
    var a = form.elements.CEL.value,
        f=(a*1.8)+32;
        form.elements.ansFAH.value = f;
    }
    
    
    
    document.getElementById('calcCEL').onclick = function () {
        convertFahCel( this.form );
    }    
    
    
    
    document.getElementById('calcFAH').onclick = function () {
        convertCelFah( this.form );
    }
    
    </script>
    Tab-indentation is a crime against humanity.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Primarily due to the value of the form variable bring retrieved by the function as a global variable.

    Try this instead:

    Code javascript:
    calcCEL.onclick = function () {
        var form = document.getElementById('formFahCel');
        convertFahCel(form);
    }    
     
    calcFAH.onclick = function () {
        var form = document.getElementById('formCelFah');
        convertCelFah(form);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks! But with this change, the top form button works, but the bottom form button does not.

    That's an improvement over neither button working, but still needs work!

    Thanks,
    Steve

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    Thanks! But with this change, the top form button works, but the bottom form button does not.
    Check the name of the form identifier that the script is attempting to access, compared with the identifier on the form.

    You'll find that there's a not-so-subtle difference between the two.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    "name" should be "id"!

    Thanks!

    Steve


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •