Problems with ASP.Net object and Javascript

Discussion in 'Javascript' started by tshad, Apr 6, 2005.

  1. tshad

    tshad Guest

    I have a function:

    function SalaryDisplay(me)
    {
    var salaryMinLabel = document.getElementById("SalaryMin");
    salaryMinLabel.value = 200;
    alert("after setting salaryMinLabel = " + salaryMinLabel.value);
    }

    I also have an asp.net object:

    <asp:label id="SalaryMin" runat="server" />

    Which renders into:

    <span id="SalaryMin"></span>

    The function seems to find the span fine. The alert box shows that it is
    set to 200. But the web page never shows it.

    Is there a problem setting the span element?

    Thanks,

    Tom
     
    tshad, Apr 6, 2005
    #1
    1. Advertising

  2. tshad

    tshad Guest

    "tshad" <> wrote in message
    news:OwZ4e.10401$...
    >I have a function:
    >
    > function SalaryDisplay(me)
    > {
    > var salaryMinLabel = document.getElementById("SalaryMin");
    > salaryMinLabel.value = 200;
    > alert("after setting salaryMinLabel = " + salaryMinLabel.value);
    > }
    >
    > I also have an asp.net object:
    >
    > <asp:label id="SalaryMin" runat="server" />
    >
    > Which renders into:
    >
    > <span id="SalaryMin"></span>
    >
    > The function seems to find the span fine. The alert box shows that it is
    > set to 200. But the web page never shows it.
    >
    > Is there a problem setting the span element?


    I just change the object to an asp:textbox which renders into an input field
    on the screen and this works fine.

    In asp, you use a label object to display (and change) text on the screen
    that is not part of an input type of field.

    Is there a way to do this in Javascript/html?

    I just want to be able to display the results of some calculations on a
    field that the user inputs as just a label.

    Thanks,

    Tom
    >
    > Thanks,
    >
    > Tom
    >
     
    tshad, Apr 6, 2005
    #2
    1. Advertising

  3. tshad wrote:

    > var salaryMinLabel = document.getElementById("SalaryMin");
    > salaryMinLabel.value = 200;


    > <span id="SalaryMin"></span>


    > Is there a problem setting the span element?


    Span elements don't have values. You need to create a new text node then
    append it to the element to add text to it. Look at the JavaScript section
    of the DOM 1 specification. http://w3.org/DOM/

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Apr 6, 2005
    #3
  4. tshad

    tshad Guest

    I tried to do the same thing with the <lable> label item and had the same
    problem. It shows that the value was changed, but it didn't seem to do
    anything on the screen:

    Yearly Compensation:<input name="SalaryMin" type="text" id="SalaryMin"
    />&nbsp;/&nbsp;
    <span id="SalaryMax"></span>
    <Label id="SalaryMin2" for="SalaryMin">This is a test</Label> />

    The javascript code:

    function SalaryDisplay(me)
    {
    alert("this.value = " + me.value);
    var salaryMinLabel = document.getElementById("SalaryMin2");
    salaryMinLabel.innerText = 200;
    alert("after setting salaryMinLabel = " + salaryMinLabel.value);
    }

    This doesn't seem to work. I tried to do it directly
    (SalaryMin2.innerText=200), but that didn't work either.

    Tom

    "tshad" <> wrote in message
    news:VBZ4e.10402$...
    >
    > "tshad" <> wrote in message
    > news:OwZ4e.10401$...
    >>I have a function:
    >>
    >> function SalaryDisplay(me)
    >> {
    >> var salaryMinLabel = document.getElementById("SalaryMin");
    >> salaryMinLabel.value = 200;
    >> alert("after setting salaryMinLabel = " + salaryMinLabel.value);
    >> }
    >>
    >> I also have an asp.net object:
    >>
    >> <asp:label id="SalaryMin" runat="server" />
    >>
    >> Which renders into:
    >>
    >> <span id="SalaryMin"></span>
    >>
    >> The function seems to find the span fine. The alert box shows that it is
    >> set to 200. But the web page never shows it.
    >>
    >> Is there a problem setting the span element?

    >
    > I just change the object to an asp:textbox which renders into an input
    > field on the screen and this works fine.
    >
    > In asp, you use a label object to display (and change) text on the screen
    > that is not part of an input type of field.
    >
    > Is there a way to do this in Javascript/html?
    >
    > I just want to be able to display the results of some calculations on a
    > field that the user inputs as just a label.
    >
    > Thanks,
    >
    > Tom
    >>
    >> Thanks,
    >>
    >> Tom
    >>

    >
    >
     
    tshad, Apr 7, 2005
    #4
  5. tshad

    nutso fasst Guest

    "tshad" <> wrote in message
    news:OwZ4e.10401$...
    > Is there a problem setting the span element?


    A 'value' property on span does not display. The newly-created span element
    is empty and needs to have a text node appended.

    var salaryMinLabel = document.getElementById("SalaryMin");
    var sMLText = document.createTextNode("200")
    salaryMinLabel.appendChild(sMLText);
    alert("after setting salaryMinLabel = " +
    salaryMinLabel.firstChild.nodeValue);

    nf
     
    nutso fasst, Apr 7, 2005
    #5
  6. tshad

    tshad Guest

    "nutso fasst" <> wrote in message
    news:db%4e.10439$...
    >
    > "tshad" <> wrote in message
    > news:OwZ4e.10401$...
    >> Is there a problem setting the span element?

    >
    > A 'value' property on span does not display. The newly-created span
    > element
    > is empty and needs to have a text node appended.
    >
    > var salaryMinLabel = document.getElementById("SalaryMin");
    > var sMLText = document.createTextNode("200")
    > salaryMinLabel.appendChild(sMLText);
    > alert("after setting salaryMinLabel = " +
    > salaryMinLabel.firstChild.nodeValue);


    Works great.

    Is there a way to create the child node at the beginning somehow?

    The problem is that as I call this routine It creates another node each
    time. I assume the next time I do the document.getElementById("SalaryMin")
    the child node will still be there (since it was appended to the next time I
    did it).

    I am confused as to why or how it is working.

    The 200 is showing on the screen, but when I do a viewsource, it isn't there
    and doesn't seem to be anywhere on the page.

    Here is the script from the viewsource of the page:

    <script language="javascript1.4">
    function SalaryDisplay(me)
    {
    alert("this.value = " + me.value);
    var salaryMinLabel = document.getElementById("SalaryMin");
    var sMLText = document.createTextNode("200")
    salaryMinLabel.appendChild(sMLText);
    SalaryMin2.innerText = 200;
    alert("after setting salaryMinLabel = " +
    salaryMinLabel.firstChild.nodeValue);
    }
    </script>

    Here is the html of the label (span):

    &nbsp;&nbsp;Yearly Compens:<span id="SalaryMin"></span>&nbsp;/&nbsp;
    <span id="SalaryMax"></span>

    As you can see there is no 200 there.

    Thanks,

    Tom
     
    tshad, Apr 7, 2005
    #6
  7. tshad

    tshad Guest

    Ok.

    This obviously is not going to work. I spent a lot of time getting this
    work correctly and just found that if you go back a page (or forward) and
    then go back to the page - all this SPAN information that was just generated
    is now gone. Probably related to why it doesn't appear in Viewsource.

    Is there a way to make sure it stays with the page?

    Thanks,

    Tom

    "tshad" <> wrote in message
    news:mSd5e.572$...
    >
    > "tshad" <> wrote in message
    > news:HHc5e.532$...
    >> "nutso fasst" <> wrote in message
    >> news:db%4e.10439$...
    >>>
    >>> "tshad" <> wrote in message
    >>> news:OwZ4e.10401$...
    >>>> Is there a problem setting the span element?
    >>>
    >>> A 'value' property on span does not display. The newly-created span
    >>> element
    >>> is empty and needs to have a text node appended.
    >>>
    >>> var salaryMinLabel = document.getElementById("SalaryMin");
    >>> var sMLText = document.createTextNode("200")
    >>> salaryMinLabel.appendChild(sMLText);
    >>> alert("after setting salaryMinLabel = " +
    >>> salaryMinLabel.firstChild.nodeValue);

    >>
    >> Works great.
    >>
    >> Is there a way to create the child node at the beginning somehow?
    >>
    >> The problem is that as I call this routine It creates another node each
    >> time. I assume the next time I do the
    >> document.getElementById("SalaryMin") the child node will still be there
    >> (since it was appended to the next time I did it).
    >>
    >> I am confused as to why or how it is working.
    >>
    >> The 200 is showing on the screen, but when I do a viewsource, it isn't
    >> there and doesn't seem to be anywhere on the page.
    >>
    >> Here is the script from the viewsource of the page:
    >>
    >> <script language="javascript1.4">
    >> function SalaryDisplay(me)
    >> {
    >> alert("this.value = " + me.value);
    >> var salaryMinLabel = document.getElementById("SalaryMin");
    >> var sMLText = document.createTextNode("200")
    >> salaryMinLabel.appendChild(sMLText);
    >> SalaryMin2.innerText = 200;
    >> alert("after setting salaryMinLabel = " +
    >> salaryMinLabel.firstChild.nodeValue);
    >> }
    >> </script>
    >>
    >> Here is the html of the label (span):
    >>
    >> &nbsp;&nbsp;Yearly Compens:<span id="SalaryMin"></span>&nbsp;/&nbsp;
    >> <span id="SalaryMax"></span>
    >>
    >> As you can see there is no 200 there.
    >>

    >
    > I figured it out.
    >
    > I just check to see if the firstchild is null. The script I came up with
    > is:
    >
    > <script language="javascript1.4">
    > function SalaryDisplay(me)
    > {
    > if(me.id == "WagesMin")
    > var salaryMinLabel = document.getElementById("SalaryMin")
    > else
    > var salaryMinLabel = document.getElementById("SalaryMax");
    >
    > if (salaryMinLabel.firstChild == null)
    > {
    > var sMLText = document.createTextNode("200");
    > salaryMinLabel.appendChild(sMLText);
    > }
    > else
    > {
    > salaryMinLabel.firstChild.nodeValue = 5;
    > }
    > }
    > </script>
    >
    > This works really well for Span tags.
    >
    > I have a question on textboxes (input type=text). If I use the above code
    > and I put the number 12345 in the textbox and then leave the box - it will
    > put the 200 on top of the 12345 (not instead of). It doesn't get rid of
    > the 12345 before it writes the 200, so the 200 is superimposed ontop of
    > the 12345.
    >
    > When you try to select the text and it is highlighted, only the 12345
    > shows. As soon as you get rid of the selection, then you see the 200 on
    > top of the 12345 (or whatever you changed it to) again.
    >
    > Is this because that the 12345 is the value and the 200 is something else?
    >
    > Why is it on top of the 12345 instead of next to it?
    >
    > Thanks,
    >
    > Tom
    >
    >> Thanks,
    >>
    >> Tom
    >>
    >>

    >
    >
     
    tshad, Apr 7, 2005
    #7
  8. tshad

    nutso fasst Guest

    "tshad" <> wrote in message
    news:FWe5e.20861$...
    > Is there a way to make sure it stays with the page?


    The span tag is being created server-side (runat=server); that is the
    'source' you view. Content changes you make client-side do not automatically
    go back to the source, and they are not automatically saved/restored if you
    switch to another page and then return. You could create a framed site and
    save all current values for each page in variables in the top frame. I don't
    know about .net, but suppose there is a database connector. Suggest you try
    a Microsoft .net newsgroup.

    nf
     
    nutso fasst, Apr 8, 2005
    #8
  9. tshad

    RobG Guest

    tshad wrote:
    > Ok.
    >


    Please don't top-post - read the group FAQ:

    <URL:http://www.jibbering.com/faq/#FAQ2_3>

    > This obviously is not going to work. I spent a lot of time getting this
    > work correctly and just found that if you go back a page (or forward) and
    > then go back to the page - all this SPAN information that was just generated
    > is now gone. Probably related to why it doesn't appear in Viewsource.


    The page source is what was loaded from the server. Whatever you do
    locally with scripting does not change the source any more than
    modifying a photocopy changes the original.

    Some information from history pages may be saved in cache by browsers
    and used when the page is re-visited, but that mostly applies to data
    entered into forms fields. Even then, you should not depend on this
    behaviour being consistent across browsers. I don't think any
    browser will cache changes made by scripts.

    >
    > Is there a way to make sure it stays with the page?


    This infers that you wish to maintain state somehow. Various methods
    exist, such as storing user selections in a cookie or sending data
    back to the server and then reconstructing the page when the user
    re-visits. But that takes serious programming effort at both client
    and server since the web is stateless and you are attempting to make
    it otherwise.

    [...]


    --
    Rob
     
    RobG, Apr 8, 2005
    #9
  10. tshad

    tshad Guest

    "RobG" <> wrote in message
    news:23l5e.798$...
    > tshad wrote:
    >> Ok.
    >>

    >
    > Please don't top-post - read the group FAQ:
    >
    > <URL:http://www.jibbering.com/faq/#FAQ2_3>
    >
    >> This obviously is not going to work. I spent a lot of time getting this
    >> work correctly and just found that if you go back a page (or forward) and
    >> then go back to the page - all this SPAN information that was just
    >> generated is now gone. Probably related to why it doesn't appear in
    >> Viewsource.

    >
    > The page source is what was loaded from the server. Whatever you do
    > locally with scripting does not change the source any more than
    > modifying a photocopy changes the original.
    >
    > Some information from history pages may be saved in cache by browsers
    > and used when the page is re-visited, but that mostly applies to data
    > entered into forms fields. Even then, you should not depend on this
    > behaviour being consistent across browsers. I don't think any
    > browser will cache changes made by scripts.
    >
    >>
    >> Is there a way to make sure it stays with the page?

    >
    > This infers that you wish to maintain state somehow. Various methods
    > exist, such as storing user selections in a cookie or sending data
    > back to the server and then reconstructing the page when the user
    > re-visits. But that takes serious programming effort at both client
    > and server since the web is stateless and you are attempting to make
    > it otherwise.


    No more that saving what is in the textboxes and which radio buttons that
    were pushed. If you come back to the page, they are still there. Whatever
    the SPAN originally was is also still there.

    If I enter 100 into a text box and then hit the back button and then the
    forward button, the box still has 100 in it. The 100 wasn't on the original
    page that was sent. So it is saved somewhere. And not just what the user
    puts in. I use Javascript to reformat the number to add a "$" and ","s.
    When I come back, the number is still formatted.

    But if I create a node for my SPAN in javascript (the same as my changing
    the formatting in Javascript) to show calculated number as a label, I seem
    to lose the Node I created. Why is that?

    Thanks,

    Tom
     
    tshad, Apr 8, 2005
    #10
  11. tshad

    RobG Guest

    tshad wrote:
    [...]
    >>
    >>>Is there a way to make sure it stays with the page?

    >>
    >> This infers that you wish to maintain state somehow. Various methods
    >> exist, such as storing user selections in a cookie or sending data
    >> back to the server and then reconstructing the page when the user
    >> re-visits. But that takes serious programming effort at both client
    >> and server since the web is stateless and you are attempting to make
    >> it otherwise.

    >
    >
    > No more that saving what is in the textboxes and which radio buttons that
    > were pushed. If you come back to the page, they are still there. Whatever
    > the SPAN originally was is also still there.


    That's just how browsers work. Back in the good 'ol days, some
    browsers didn't remember form values either but that was back with
    Mozaic and Netscape 2 or somewhere back then.

    I had a few comments on the code you've been posting, the only one of
    use is in regard to your script tag: ditch the language attribute, it
    is depreciated and will cause errors in some browsers.

    You can do what you require if you have a form initialisation
    function that looks at each form input and if there's something
    there, runs the onchange if there is one.

    Below is some sample code for what you are trying to do:

    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
    'http://www.w3.org/TR/html4/strict.dtd'>
    <html><head>
    <title>form thing</title>
    <meta http-equiv='Content-Type'
    content='text/html; charset=ISO-8859-1'>
    <script type="text/javascript">

    function writeToSpan(t,o) {
    if (document.getElementById) {
    o = document.getElementById(o);
    } else if (document.all) {
    o = document.all[o];
    }
    writeIt(t,o);
    }

    function writeIt(t,x) {
    if ( x.firstChild && /\#text/i.test(x.firstChild.nodeName)) {
    x.firstChild.data = t;
    } else {
    if (document.createTextNode) {
    x.appendChild(document.createTextNode(t));
    }
    }
    }

    function initForm(f){
    f = document.forms[f];
    var i = f.length;
    while (i--) {
    if (/input/i.test(f.nodeName)
    && /text/i.test(f.type)
    && f.onchange
    && '' != f.value){
    f.onchange();
    }
    }
    }

    </script>
    </head>
    <body onload="initForm('formA');">

    <form action="" name="formA">
    <p>Write text to page:
    <input name="inA" type="text" onchange="
    writeToSpan(this.value,'outA');
    "><span id="outA"></span>
    <br>
    Write text to input:
    <input name="inB" type="text" onchange="
    this.form.outB.value = this.value;
    "><input type="text" name="outB">
    <br><br>
    <label for="inC">Replace this label:
    <br><input name="inC" id="inC" type="text" onchange="
    writeIt(this.value,this.parentNode);
    "></label>
    <br><br>
    <input type="reset">
    </p>
    </form>

    </body>
    </html>

    --
    Rob
     
    RobG, Apr 8, 2005
    #11
  12. tshad

    RobG Guest

    RobG wrote:
    [...]
    >
    > function initForm(f){
    > f = document.forms[f];
    > var i = f.length;
    > while (i--) {
    > if (/input/i.test(f.nodeName)
    > && /text/i.test(f.type)
    > && f.onchange
    > && '' != f.value){
    > f.onchange();
    > }
    > }
    > }


    Here is a more efficient initForm function:

    function initForm(f){
    f = document.forms[f];
    var x, i = f.length;
    while ( x = f[--i] ) {
    if ( /text/i.test(x.type) && x.onchange && '' != x.value){
    x.onchange();
    }
    }
    }

    >
    > </script>
    > </head>
    > <body onload="initForm('formA');">
    >
    > <form action="" name="formA">
    > <p>Write text to page:
    > <input name="inA" type="text" onchange="
    > writeToSpan(this.value,'outA');
    > "><span id="outA"></span>


    And to test that only the onchange() is fired, put this into the form
    about here:

    <br>onblur Write text to page:
    <input name="inD" type="text" onblur="
    writeToSpan(this.value,'outD');
    "><span id="outD"></span>

    > <br>
    > Write text to input:
    > <input name="inB" type="text" onchange="
    > this.form.outB.value = this.value;
    > "><input type="text" name="outB">
    > <br><br>

    [...]


    --
    Rob
     
    RobG, Apr 8, 2005
    #12
  13. tshad

    tshad Guest

    These look pretty good.

    I need to spend some time to digest them.

    What does "/input/i.test(f.nodeName" and "/text/i.test(f.type" mean?

    What I did on my page was to call the routine I use to create the SPAN label
    Nodes. Since they are just calculated and formatted from a couple of text
    fields (which are saved anyway), I just rebuild them from the text boxes.

    <body class="ApplicantBody" onLoad="SalaryDisplayFromOnLoad()">

    function SalaryDisplayFromOnLoad()
    {
    var WagesType = document.getElementById("WagesType");
    SalaryDisplay(WagesType);
    }

    This seems to work. But doesn't take into account SPANs that are not
    calculated from a text field and they only handle these specific labels, not
    all the labels that might be created, as yours does.

    Thanks,

    Tom

    "RobG" <> wrote in message
    news:qvn5e.807$...
    > RobG wrote:
    > [...]
    >>
    >> function initForm(f){
    >> f = document.forms[f];
    >> var i = f.length;
    >> while (i--) {
    >> if (/input/i.test(f.nodeName)
    >> && /text/i.test(f.type)
    >> && f.onchange
    >> && '' != f.value){
    >> f.onchange();
    >> }
    >> }
    >> }

    >
    > Here is a more efficient initForm function:
    >
    > function initForm(f){
    > f = document.forms[f];
    > var x, i = f.length;
    > while ( x = f[--i] ) {
    > if ( /text/i.test(x.type) && x.onchange && '' != x.value){
    > x.onchange();
    > }
    > }
    > }
    >
    >>
    >> </script>
    >> </head>
    >> <body onload="initForm('formA');">
    >>
    >> <form action="" name="formA">
    >> <p>Write text to page:
    >> <input name="inA" type="text" onchange="
    >> writeToSpan(this.value,'outA');
    >> "><span id="outA"></span>

    >
    > And to test that only the onchange() is fired, put this into the form
    > about here:
    >
    > <br>onblur Write text to page:
    > <input name="inD" type="text" onblur="
    > writeToSpan(this.value,'outD');
    > "><span id="outD"></span>
    >
    >> <br>
    >> Write text to input:
    >> <input name="inB" type="text" onchange="
    >> this.form.outB.value = this.value;
    >> "><input type="text" name="outB">
    >> <br><br>

    > [...]
    >
    >
    > --
    > Rob
     
    tshad, Apr 8, 2005
    #13
  14. tshad

    tshad Guest

    "RobG" <> wrote in message
    news:qvn5e.807$...
    > RobG wrote:
    > [...]
    >>
    >> function initForm(f){
    >> f = document.forms[f];
    >> var i = f.length;
    >> while (i--) {
    >> if (/input/i.test(f.nodeName)
    >> && /text/i.test(f.type)
    >> && f.onchange
    >> && '' != f.value){
    >> f.onchange();
    >> }
    >> }
    >> }

    >
    > Here is a more efficient initForm function:
    >
    > function initForm(f){
    > f = document.forms[f];
    > var x, i = f.length;
    > while ( x = f[--i] ) {
    > if ( /text/i.test(x.type) && x.onchange && '' != x.value){
    > x.onchange();
    > }
    > }
    > }
    >
    >>
    >> </script>
    >> </head>
    >> <body onload="initForm('formA');">
    >>
    >> <form action="" name="formA">
    >> <p>Write text to page:
    >> <input name="inA" type="text" onchange="
    >> writeToSpan(this.value,'outA');
    >> "><span id="outA"></span>

    >
    > And to test that only the onchange() is fired, put this into the form
    > about here:
    >
    > <br>onblur Write text to page:
    > <input name="inD" type="text" onblur="
    > writeToSpan(this.value,'outD');
    > "><span id="outD"></span>
    >

    I don't quite understant this one?

    Why is the onblur where it is? I may have misunderstood.

    Here is what I think you said:

    **********************************************8
    <form action="" name="formA">
    <p>Write text to page:
    <input name="inA" type="text"
    onchange="writeToSpan(this.value,'outA');"><span id="outA"></span>

    <br>onblur Write text to page:
    <input name="inD" type="text" onblur="
    writeToSpan(this.value,'outD');
    "><span id="outD"></span>

    <br>
    Write text to input:<input name="inB" type="text"
    onchange="this.form.outB.value = this.value;">
    <input type="text" name="outB">
    <br><br>
    <label for="inC">Replace this label:<br>
    <input name="inC" id="inC" type="text"
    onchange="writeIt(this.value,this.parentNode);">
    </label>
    <br><br>
    <input type="reset">
    </p>
    </form>
    *****************************************************************

    Not sure what that does.

    Tom

    >> <br>
    >> Write text to input:
    >> <input name="inB" type="text" onchange="
    >> this.form.outB.value = this.value;
    >> "><input type="text" name="outB">
    >> <br><br>

    > [...]
    >
    >
    > --
    > Rob
     
    tshad, Apr 8, 2005
    #14
  15. tshad

    RobG Guest

    tshad wrote:
    > These look pretty good.
    >
    > I need to spend some time to digest them.
    >
    > What does "/input/i.test(f.nodeName" and "/text/i.test(f.type" mean?


    /input/i creates a regular expression (RegExp) out of 'input' and the
    i flag makes it case insensitive. 'test' will compare it to the
    element f nodeName to see if it's an input.

    It is effectively the same as:

    if (f.nodeName.toLowerCase() == 'input')

    The HTML spec says to make such comparisons case insensitive, the
    RegExp is fast.

    The second test looks at the type of input - we want to match only
    text inputs. It's probably not necessary to test nodeName before
    type, I just figured some browsers may barf if you try to get the
    type of a node that doesn't have one (e.g. label) but that seems not
    to be the case.

    >
    > What I did on my page was to call the routine I use to create the SPAN label
    > Nodes. Since they are just calculated and formatted from a couple of text
    > fields (which are saved anyway), I just rebuild them from the text boxes.
    >
    > <body class="ApplicantBody" onLoad="SalaryDisplayFromOnLoad()">
    >
    > function SalaryDisplayFromOnLoad()
    > {
    > var WagesType = document.getElementById("WagesType");
    > SalaryDisplay(WagesType);
    > }
    >
    > This seems to work. But doesn't take into account SPANs that are not
    > calculated from a text field and they only handle these specific labels, not
    > all the labels that might be created, as yours does.
    >
    > Thanks,
    >

    [...]


    --
    Rob
     
    RobG, Apr 8, 2005
    #15
  16. tshad

    RobG Guest

    tshad wrote:
    > "RobG" <> wrote in message
    > news:qvn5e.807$...
    >
    >>RobG wrote:
    >>[...]

    [...]
    >>><form action="" name="formA">
    >>> <p>Write text to page:
    >>> <input name="inA" type="text" onchange="
    >>> writeToSpan(this.value,'outA');
    >>> "><span id="outA"></span>

    >>
    >> And to test that only the onchange() is fired, put this into the form
    >> about here:
    >>
    >> <br>onblur Write text to page:
    >> <input name="inD" type="text" onblur="
    >> writeToSpan(this.value,'outD');
    >> "><span id="outD"></span>
    >>

    > I don't quite understant this one?
    >
    > Why is the onblur where it is? I may have misunderstood.
    >


    I just put an onblur there to show that the function only ran
    onchange events and nothing else. It's only there for testing.

    > Here is what I think you said:
    >
    > **********************************************8
    > <form action="" name="formA">
    > <p>Write text to page:
    > <input name="inA" type="text"
    > onchange="writeToSpan(this.value,'outA');"><span id="outA"></span>


    This calls writeToSpan() and passes the value of the text input and
    the id of where to write the output to. Both are strings.

    >
    > <br>onblur Write text to page:
    > <input name="inD" type="text" onblur="
    > writeToSpan(this.value,'outD');
    > "><span id="outD"></span>


    This is just a test to show that onblur is not run by the onload,
    only the onchange events.

    >
    > <br>
    > Write text to input:<input name="inB" type="text"
    > onchange="this.form.outB.value = this.value;">


    This assigns the of this input to the one called outB.

    > <input type="text" name="outB">
    > <br><br>
    > <label for="inC">Replace this label:<br>
    > <input name="inC" id="inC" type="text"
    > onchange="writeIt(this.value,this.parentNode);">


    And this one calls writeIt() and passes the value of the text input
    and a reference to the parent node (which is the label). Note that
    the label will only be the parent if the text input is between the
    label tags.

    > </label>
    > <br><br>
    > <input type="reset">
    > </p>
    > </form>
    > *****************************************************************
    >
    > Not sure what that does.
    >

    [...]

    It's just a sample to illustrate how it all works, hopefully written
    in reasonably clear and concise code. Use whatever helps.


    --
    Rob
     
    RobG, Apr 8, 2005
    #16
  17. tshad

    Grant Wagner Guest

    "RobG" <> wrote in message
    news:4256bbce$0$28135$...
    > tshad wrote:
    >> These look pretty good.
    >>
    >> I need to spend some time to digest them.
    >>
    >> What does "/input/i.test(f.nodeName" and "/text/i.test(f.type"
    >> mean?

    >
    > /input/i creates a regular expression (RegExp) out of 'input' and the
    > i flag makes it case insensitive. 'test' will compare it to the
    > element f nodeName to see if it's an input.
    >
    > It is effectively the same as:
    >
    > if (f.nodeName.toLowerCase() == 'input')


    Not to pick a nit, but nit-picking is what we do here:

    if (/input/i.test(f.nodeName))

    is closer to: if (f.nodeName.toLowerCase().indexOf('input') != -1)

    than it is to: if (f.nodeName.toLowerCase() == 'input')

    The reason I prefer the regex is because f.nodeName may not be typeof
    'string', and if it isn't, f.nodeName.toLowerCase() will fail. Of
    course this could be avoided with:

    if ('string' == typeof f.nodeName &&
    f.nodeName.toLowerCase().indexOf('input') != -1)

    but:

    if (/input/i.test(f.nodeName))

    is easier to read, probably faster (although speed isn't the primary
    consideration in choosing this mechanism) and guaranteed to produce the
    correct result regardless of the typeof f.nodeName.

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, Apr 11, 2005
    #17
  18. David Dorward wrote:

    > Span elements don't have values. You need to create a new text node then
    > append it to the element to add text to it. Look at the JavaScript section
    > of the DOM 1 specification. http://w3.org/DOM/


    There is no JavaScript section (only an `ECMAScript binding' section),
    and since W3C DOM Level 1 HTML has been obsoleted by W3C DOM Level 2 HTML
    which builds on W3C DOM Level 2 Core, one should look at the latter
    instead. The respective sections are:

    <http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247>
    <http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html>


    PointedEars
     
    Thomas 'PointedEars' Lahn, Apr 11, 2005
    #18
  19. tshad wrote:

    > <script language="javascript1.4">


    This is not Valid HTML and error-prone. Use

    <script type="text/javascript">

    instead.


    PointedEars
    --
    There are two possibilities: Either we are alone in the
    universe or we are not. Both are equally terrifying.
    -- Arthur C. Clarke
     
    Thomas 'PointedEars' Lahn, Apr 11, 2005
    #19
  20. Thomas 'PointedEars' Lahn wrote:


    > There is no JavaScript section (only an `ECMAScript binding' section),


    synonyms :)

    > and since W3C DOM Level 1 HTML has been obsoleted by W3C DOM Level 2 HTML
    > which builds on W3C DOM Level 2 Core, one should look at the latter
    > instead.


    The DOM 2 spec says that it builds on the DOM 1 spec, so wouldn't it
    supplement it rather then obsolete it?

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Apr 11, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Stephen Gutknecht \(RS\)
    Replies:
    1
    Views:
    501
    Ravikanth[MVP]
    Aug 1, 2003
  2. David Virgil Hobbs
    Replies:
    0
    Views:
    542
    David Virgil Hobbs
    Jan 6, 2004
  3. tshad
    Replies:
    4
    Views:
    2,595
    =?Utf-8?B?Z2Vycm9k?=
    Apr 21, 2005
  4. Replies:
    3
    Views:
    852
    cannontrodder
    Jul 27, 2006
  5. Piotrek
    Replies:
    4
    Views:
    650
    Piotrek
    Aug 4, 2006
Loading...

Share This Page