SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool multiple onFocus function & javascript validation question

    Hi There

    I have a couple of question, which I was hoping someone coudld help me on.

    a) I have created a reservation form on a web page and am using JavaScript as my means of validation. On the date fields I want a dialogue box to pop up if the user tries to manually type the date in as I want them to use the date picker I have provided. So I presume I would use the onfocus option available in JavaScript. However I currently already have an onfocus function assigned to that particular field (see below). How can I add an extra onfocus function to this particular form element? Do I simply separate them with a comma?

    <input type=text name=txtDateFrom size="9" value="dd/mm/yyyy" ONFOCUS="clearDefault(this)" class="texta" id=txtDateFrom >

    b) How would I evaluate my txtDateFrom form element against my txtDateTo (same format as the form element displayed above) as I don’t want a user to select a ‘from’ date later then a ‘To’ date and vice versa? Could anyone help me on the best way to actually code this javascript logic using the form element details above?

    Many thanks

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly, I should warn you... What happens when JavaScript support isn't enabled in the user's browser? You should always validate on the server, even if you validate with JavaScript as well. I am concerned that your code may not be following JavaScript Best Practices. I recommend you read up on them.

    a) You can separate multiple function calls with a semi-colon just like in other JavaScript.

    b) Check these out: http://javascript.internet.com/forms/val-date.html
    http://javascript.about.com/library/bltut19.htm
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you simply want a text field that you can programmatically write to, but the user can't type in, then make it readonly:

    Code HTML4Strict:
    <input type="text" readonly="readonly" ...

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point, brothercake.

    I would suggest making the element readonly via a JavaScript function, so that users who don't have JavaScript enabled can input a date manually.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    agreed

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    I see your point about the client side/server validation, but it is only effectivley a 'request a reservation' process not an actual booking, so I decided to just run with the javascript option.

    So how aout this as an option

    a) I make the field readonly as suggested
    b) then have an onFocus function, which causes a pop-up to appear if the user tries to click into the field.

    to do this would I simply have a function for example called 'promptMessage ()' which in the body would simply have an alert(... Then in the form input tag I would promptMessage(); in the onfocus assignment?

    many thanks

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why bother with an alert? Why not just show the date picker?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    great idea!

    I will have the date picker pop up if the user clicks in the text box. I'm having problems actually getting the date picker to appear, is it simply an onfocus function to get the picker to appear? if yes, could someone show me an example of how to call a function like this using a text field?

    many thanks


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
  •