SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    meter to yard without clicking the submit button

    Code:
    <?php
    if ( isset ($_POST['meter']) )
    { 
    $meter=$_POST['meter'];
    $yard=$meter*0.9144;
    }
    else
    { 
    $meter=10000;
    $yard=9144;
    }
    ?>
    
    <form method="post">
    <input type="text" name="meter" value="<?php echo $meter ?>"> meter<br>
    <input type="text" name="yard" value="<?php echo $yard ?>"> yard
    <input type="submit">
    </form>
    I have the code above,
    If I enter "meterNumber" in the input box "meter" and click the submit button,
    "yardNumber" will be seen the input box "yard".

    I like to make it like the following.
    If I enter "meterNumber" in the input box "meter",
    "yardNumber" will be simultaneously seen the input box "yard" without clicking the submit button.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dotJoon View Post
    I like to make it like the following.
    If I enter "meterNumber" in the input box "meter",
    "yardNumber" will be simultaneously seen the input box "yard" without clicking the submit button.
    Give the form a unique identifier so that the script can easily find it, and put the script at the bottom just before the </body> tag.

    Code html4strict:
    <body>
    <form id="convert">
        ...
    </form>
     
    <script type="text/javascript" src="script.js"></script>
    ...
    </script>
    </body>

    Your PHP script uses a default value for the form values when the page starts, so lets do that in the form itself.
    We don't put in a value for the yard, so that we can use our conversion script instead. That allows us to later on easily change the starting value in the meter field.

    Code html4strict:
    <input type="text" name="meter" value="10000"> meter<br>
    <input type="text" name="yard"> yard

    We will update the form when the page first starts.

    Gain a reference to the form, so we can use its elements collection to access parts of the form, and attach a function to the onkeyup event of the form element called meter.

    Code javascript:
    var form = document.getElementById('convert');
    var meter = form.elements.meter;

    That lets us attach a function to the onkeyup event of the meter field. We can also trigger that event from the script so the conversion also occurs when the page loads.

    Code javascript:
    meter.onkeyup = convertMetersToYards;
    meter.onkeyup();

    In the convertMetersToYards function, convert the fields string value to a number. If it's not a valid number, use 0 instead.

    Code javascript:
    function convertMetersToYards() {
        var meters = Number(this.value) || 0;
        ...
    };

    Lastly, update the yard field with a converted value.

    Code javascript:
    function convertMetersToYards() {
        ...
        this.form.elements.yard.value = meters * 0.9144;
    }

    The resulting code that you end up with is:

    Code html4strict:
    <form id="convert">
        <input type="text" name="meter" value="10000"> meter<br>
        <input type="text" name="yard"> yard
    </form>
     
    <script type="text/javascript" src="script.js"></script>

    script.js
    Code javascript:
    function convertMetersToYards() {
        var meters = Number(this.value) || 0;
        this.form.elements.yard.value = meters * 0.9144;
    }
     
    var form = document.getElementById('convert');
    var meter = form.elements.convertMetersToYards;
    meter.onkeyup = convertMetersToYards;
    meter.onkeyup();
    </script>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •