input

Discussion in 'JavaScript' started by dean5000v, Feb 20, 2009.

0
  1. #1
    hey i have this code to ttake the contents of one text field and echo it into the other one.

    <form name=formd>
    <input type=text name=fi onKeyUp="javascript:formd.se.value=fi.value">
    <input type=text name=se>

    how do i do it so that it just echos it into a div tag instead ?? im not very good at js dont get to use it often more into php... :)
     
    dean5000v, Feb 20, 2009 IP
  2. gnp

    gnp Peon

    Messages:
    137
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    well.. assuming you have a div with id="holder"
    <div id="holder"></div>
    HTML:
    
onKeyUp="javascript:document.getElementById('holder').innerHTML = fi.value"
    Code (javascript):
    but your coding style is a bit old and might lead to inconsistencies in some browsers..

    regards
     
    gnp, Feb 20, 2009 IP
  3. dean5000v

    dean5000v Peon

    Messages:
    201
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for your reply's they have helped me alot. this is the code i have so far, just trying to get the last bit working

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <script type="text/javascript">
    //<![CDATA[

    function cHappy() {
    se2.value=fi2.value;
    }
    var se2 = document.createElement('input');
    se2.type = 'text';
    se2.name = 'se2';
    se2.style.width = '200px';

    var fi2 = document.createElement('input');
    fi2.type = 'text';
    fi2.id = 'fi2';
    fi2.name = 'fi2';
    fi2.style.width = '200px';
    fi2.onkeyup = cHappy;
    //]]>
    </script>
    </HEAD>

    <BODY>

    <script type="text/javascript">
    document.body.appendChild(fi2);
    document.body.appendChild(se2);
    </script>
    <div id="holder"></div>




    </BODY>
    </HTML>

    not quiet sure where to add in the onKeyUp="javascript:document.getElementById('holder').innerHTML = fi2.value part.

    if you are happy to do some work privatly for money, i think i cld throw you some work as i am programming a shopping cart and stuff ect just not to good with the js script.
     
    dean5000v, Feb 20, 2009 IP
  4. gnp

    gnp Peon

    Messages:
    137
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    you should put it in the cHappy function

    in my post i was going by your original posted code..

    so if you alter your cHappy code to 
    
function cHappy() {
se2.value=fi2.value; // this line copies the value from the one textbox to the other
document.getElementById('holder').innerHTML = fi2.value; // this line copies the value from the first box to the div 'holder'
}
    Code (javascript):
    it should work

    ps. thanks for the offer, but at this time i am swamped with my regular job :(
     
    gnp, Feb 20, 2009 IP
  5. dean5000v

    dean5000v Peon

    Messages:
    201
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    thanks alot for your reply, that worked perfectly just what i wanted :)
     
    dean5000v, Feb 20, 2009 IP
  6. dean5000v

    dean5000v Peon

    Messages:
    201
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    one last problem when i do this:

    <BODY>
    <script type="text/javascript">
    document.body.appendChild(fi2);
    </script>
    <div id="container">
    <div id="javascript_box">
    <div id="holder"></div>
    </div></div>
    </BODY>

    it works fine however when i move the document.body.appendchild within the container div tag ie gives me a error, im guessing it has something to do with the child element needing to be changed.

    this one wont work because has been moved into a container

    <BODY>
    <div id="container">
    <script type="text/javascript">
    document.body.appendChild(fi2);
    </script>
    <div id="javascript_box">
    <div id="holder"></div>
    </div></div>

    </BODY>
     
    dean5000v, Feb 20, 2009 IP
  7. gnp

    gnp Peon

    Messages:
    137
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #7
    the correct behavior would be for both ways to fail, because you try to reference the body tag before the page has been loaded..

    best way would be to call it after the page has loaded,
    for example: on the onload event of the body.
    <body onload="document.body.appendChild(fi2);">
    HTML:
    even better would be to create a function that will handle this and all other things you want to do when the page has loaded and call that.

    So at the same <script> where you create the fi2 you should add the following at the end
    
function myInit()
{
 // if you want to put it at the end of the body
 document.body.appendChild(fi2); // comment this line if you want to use the next scenario

 // if you want to put inside an existing element like the 'container' div
 var aDiv = document.getElementById('container'); // comment this line if you want to use the first scenario
 aDiv.insertBefore(fi2, aDiv.firstChild ); // comment this line if you want to use the first scenario
}

window.onload = myInit;
    Code (javascript):
     
    gnp, Feb 20, 2009 IP