Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Line break a string to 2 lines in text field

    Hello. I am trying to figure out how to line break a string to show up as 2 lines in a text form field.

    here is the code:

    function ourdate(){
    var time=new Date();
    var myMonth=months[time.getMonth()];
    var myDate=time.getDate();
    var myYear=time.getFullYear();
    var hr=time.getHours();
    var min=time.getMinutes();
    var sec=time.getSeconds();
    var temp = "" + ((hr > 12) ? hr - 12 : hr)
    if(hr==0) temp = "12"
    if(temp.length==1) temp = " " + temp
    temp += ((min < 10) ? ":0" : ":") + min
    temp += ((sec < 10) ? ":0" : ":") + sec
    temp += (hr >= 12) ? " PM" : " AM"
    document.clock.current.value = myYear + " " + myMonth + " " + myDate + temp
    setTimeout("ourdate()", 1000)
    }


    Currently, it shows up like this:

    2004 February 5 2:42

    The date and time should show up in the current text box on two lines like this

    2004 February 5
    2:42

    so temp needs to be "broken" from the string and put on a new line but I can't figure out how to get the line to break. Maybe splitting the string? Any help would be appreciated. Thanks!

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Try something like so
    Code:
    document.clock.current.value = myYear + " " + myMonth + " " + myDate + " \n" + temp;

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The newline character can be inserted between the fields and in a Textarea it will break them up into separate lines.

    Code:
    document.clock.current.value = myYear + " " + myMonth + " " + myDate + "\n" + temp
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #4
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I use /n where suggested, I get an error and the text field is completely empty

    Line: 32
    Char: 71
    Error: Expected ':' Do you wish to debug, click No and then

    a Runtime error:

    Line 38: Object expected

    Line 38 is the body onLoad indicated below although I know that sometimes where an error is indicated is not always where you find it.

    </script>
    </head>
    <body onLoad="ourdate()">
    <Form name="clock">

    If I take out /n, no error messages but the date and time ends up on the same line again.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    \n not /n -- that's why it's causing problems
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #6
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am sorry about that. I did have \n and I have also tried \r and the line will not break. I am obviously missing something in the code that is causing it to not want to break the line. I will keep trying. Thanks for your suggestions.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are putting the output into a TEXTAREA control right? If you're going into an <input type="text"... then you've misunderstood the html since that control is always one line, no breaks allowed.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #8
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    From the example provided by my instructor, it appears that he wants it in a text area like you indicated. input type="text".

    This is the entire script. My instructor's example is indicating he wants the date in the top of the cell and the time underneath, in the same cell/text box. If you look at the page, it looks exactly like his except for the problem I am having with the date format. His instructions indicate: In a text box, show the local date and time ticking; In another text box, show the UTC date and time ticking. This is as much as I have so far and I am working on the remaining portions but, as you know, this is the only difficutly I am having. Thanks very much for your suggestions and your help.

    <html>
    <head>
    <script language="javascript">
    var months=new Array();
    months[0]="January";
    months[1]="February";
    months[2]="March";
    months[3]="April";
    months[4]="May";
    months[5]="June";
    months[6]="July";
    months[7]="August";
    months[8]="September";
    months[9]="October";
    months[10]="November";
    months[11]="December";

    function ourdate(){
    var time=new Date();
    var myMonth=months[time.getMonth()];
    var myDate=time.getDate();
    var myYear=time.getFullYear();
    var hr=time.getHours();
    var min=time.getMinutes();
    var sec=time.getSeconds();
    var temp = "" + ((hr > 12) ? hr - 12 : hr)
    if(hr==0) temp = "12"
    if(temp.length==1) temp = " " + temp
    temp += ((min < 10) ? ":0" : ":") + min
    temp += ((sec < 10) ? ":0" : ":") + sec
    temp += (hr >= 12) ? " PM" : " AM"
    document.clock.current.value = myYear + " " + myMonth + " " + myDate + "\n" + temp
    setTimeout("ourdate()", 1000)

    }

    function UTCdate(){
    var UTCtime=new Date();
    var myUTCMonth=months[UTCtime.getMonth()];
    var myUTCDate=UTCtime.getUTCDate();
    var myUTCYear=UTCtime.getUTCFullYear();
    var UTChr=UTCtime.getUTCHours();
    var UTCmin=UTCtime.getUTCMinutes();
    var UTCsec=UTCtime.getUTCSeconds();
    var UTCtemp = "" + ((UTChr > 12) ? UTChr - 12 : UTChr)
    if(UTChr==0) UTCtemp = "12"
    if(UTCtemp.length==1) UTCtemp = " " + UTCtemp
    UTCtemp += ((UTCmin < 10) ? ":0" : ":") + UTCmin
    UTCtemp += ((UTCsec < 10) ? ":0" : ":") + UTCsec
    UTCtemp += (UTChr >= 12) ? " PM" : " AM"
    document.clock.UTC.value = myUTCYear + " " + myUTCMonth + " " + myUTCDate + "\r" + UTCtemp
    setTimeout("UTCdate()", 1000)

    }

    </script>
    </head>
    <body onLoad="ourdate(); UTCdate()">
    <Form name="clock">
    <SELECT name=s1> <OPTION value=0 selected>Ottawa, Canada</OPTION>
    <OPTION value=1>Washington,DC U.S.A.</OPTION>
    <OPTION value=2>Mexico City, Mexico</OPTION>
    <OPTION value=3>Paris, France</OPTION>
    <OPTION value=4>Rome, Italy</option>
    <option value=5>Dublin, Ireland</option>
    <option value=6>Lisbon, Portugal</option>
    <option value=7>Stockholm, Sweden</option></SELECT>
    <p>
    <p>
    <table>
    <Table border=2>
    <td></td>
    <td>Your Time</td>
    <td>City drop down menu</td>
    <tr>
    <td height="40">Local
    </td>
    <td><input type="text" name="current" style="height: 40px"></td>
    <td><input type="text" name="tb2" style="height" 40px"></td>
    <tr>
    <td>UTC</td>
    <td><input type="text" name="UTC" style="height: 40px"></td>
    <td><input type="text" name="tb4" style="height: 40px"></td>
    </table>
    </body>
    </html>

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is in putting the output into a form field, <input type="text"> simply doesn't accept multiple lines. You could however put an ID onto the TD tag (<td id="cerrent"></td> instead of <td><input type="text" name="current" style="height: 40px"></td>).

    Then use (document.getElementById('current').innerHTML = myYear + " " + myMonth + " " + myDate + "<br />" + temp) to set the value. Note that it's back to html so I replaced the \n with a <br />.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #10
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works perfectly. Thanks VERY much for taking the time and providing your assistance and guidance. Greatly appreciated!!!!


  •  

    Posting Permissions

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