SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Java script form help

    Hi,

    Is there any way that i could copy the one text box value into multiple text boxes(but part of the value)

    Lets say, i i have one text box for date (format mm/dd/yy) <input name="completedate" value="" type="text">

    I want that value of the text box to be pasted on to three different text boxes.(mm in one textbox...date one text box and year in one text box)
    <form name="submitdate" method="post" id="submitdateForm" action="" >

    <input name="completedate" value="" type="text">


    <input name="date" value="" type="text">

    <input name="month" value="" type="text">

    <input name="year" value="" type="text">

    </form>
    To hide these three text boxes from display..i can put type="hidden".

    Can any one please help me with this?

    thanks

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why don't you parse it on the server side? You need some server-side language to process the form anyway.

    With PHP, for example, it would be trivial to convert the date you receive into something useful using PHP's date and time functions.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regular expressions to the rescue....Note the mm/dd/yy is strict and they have to be digits.

    Code:
    <script type="text/javascript">
    function breakDatesUp() {
        var completedate    = document.getElementById("completedate").value;
        var date           = document.getElementById("date");
        var month          = document.getElementById("month");
        var year           = document.getElementById("year");
        
        var regexp = /(\d{2})\/(\d{2})\/(\d{2})/,g;
        //alert (regexp.test(completedate));
        
        date.value  = completedate.replace(regexp, "$1");
        month.value = completedate.replace(regexp, "$2");
        year.value  = completedate.replace(regexp, "$3");
    
    }
    </script>
    
    
    <form id="submitdateForm">
    <table>
    <tr>
    <td>&nbsp;</td><td><input name="completedate" value="" type="text"></td><td>(mm/dd/yy)</td></tr>
    
    <tr><td colspan=3><br></td></tr>
    
    <tr>
    <td>mm:</td><td colspan=2><input id="date" value="" type="text"></td></tr>
    <td>dd:</td><td colspan=2><input id="month" value="" type="text"></td></tr>
    <td>yy:</td><td colspan=2><input id="year" value="" type="text"></td></tr>
    
    <tr><td colspan=3><br></td></tr>
    
    <tr>
    <td>&nbsp;</td><td colspan=2><input type="button" value="Submit" onclick="breakDatesUp();"></td></tr>
    </table>
    </form>

  4. #4
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tested the script in the previous post and it doesn't work for me. You don't need regular expressions. I think splitting "completedate" into array is far easier. Here's my version of the script:

    Code:
    <script type="text/javascript">
    function breakDatesUp() {
        var completedate    = document.getElementById("completedate").value;
        var date           = document.getElementById("date");
        var month          = document.getElementById("month");
        var year           = document.getElementById("year");
    
        var temp = completedate.split("/");
    
        date.value = temp[1];
        month.value = temp[0];
        year.value = temp[2];
    
    }
    </script>
    
    
    <form id="submitdateForm">
    <table>
    <tr>
    <td>&nbsp;</td><td><input name="completedate" id="completedate" value="" type="text"></td><td>(mm/dd/yy)</td></tr>
    
    <tr><td colspan=3><br></td></tr>
    
    <tr>
    <td>mm:</td><td colspan=2><input name="date" id="date" value="" type="text"></td></tr>
    <td>dd:</td><td colspan=2><input name="month" id="month" value="" type="text"></td></tr>
    <td>yy:</td><td colspan=2><input name="year" id="year" value="" type="text"></td></tr>
    
    <tr><td colspan=3><br></td></tr>
    
    <tr>
    <td>&nbsp;</td><td colspan=2><input type="button" value="Submit" onclick="breakDatesUp();"></td></tr>
    </table>
    </form>
    To the thread starter, hope this helps.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting, it doesn't work in Firefox, but works in IE6 and Opera. Anyone know why Firefox doesn't like it?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Works for me.

    Which Firefox are you having trouble with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox 2.0.0.11
    Windows XP

    Which one are you running (and OS) that it works for you?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    I'm using the same browser and as as yourself too.

    Can you please open the error console (in the help menu), clear it, and let us know of any errors that it shows when you retest, and post the full code that you're using again, along with the test values that are failing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code is exactly the same as my original post (I just copied/pasted to a new local file to verify). Error console reports:

    Error: document.getElementById("completedate") has no properties.

    Test values I'm using are 01/02/03, but any mm/dd/yy (in 2 digit format) fail in Firefox.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Update the function to start as follows

    Code Javascript:
    function breakDatesUp() {
        alert(document.getElementById("completedate"));
        var completedate    = document.getElementById("completedate").value;

    When you click the submit button you will see one of two alerts, null if it can't find completedate, and [object HTMLInputElement] if it does.

    Which do you see?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Null.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    So for some reason the the element with an id of "completedate" can't be found. Once you resolve that all will be good.
    lets see what information can be obtained about the first input from the example.

    Update the start of the function to the following

    Code Javascript:
    function breakDatesUp() {
    	var input = document.getElementsByTagName('input')[0];
        var msg = 'ID of first input is ' + input.getAttribute('id') + '\n';
    	msg += 'Name of first input is ' + input.getAttribute('name');
    	window.alert(msg);
        document.getElementById("completedate").value;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work in firefox because you don't have an ID attribute defined for the completedate input field..

    Line 22:
    Code:
    <td>&nbsp;</td><td><input name="completedate" value="" type="text"></td><td>(mm/dd/yy)</td></tr>
    It should be..
    Code:
    <td>&nbsp;</td><td><input id="completedate" name="completedate" value="" type="text"></td><td>(mm/dd/yy)</td></tr>
    But you know what, even with the ID the result is a bit messed up in IE. When I enter "10/12/2007" in the completedate, mm becomes "1007", dd becomes "1207". The year is OK though.

  14. #14
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jesus, how did I miss that? Thanks for the extra set of eyes.


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
  •