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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing Title With HTML?

    Right then!

    I have a drop down list. The titles are really long. What I want to happen is, end user to click on a selection, i.e.

    "This is a really really long title"

    And then by the power of voodoo just the abbreviated is shown in the field.

    "TIARRLT"

    Can this be done by JUST HTML? Or am I looking at some JS here? If anyone could point me to a tutorial that would be great. Or if you have the code you don't mind sharing... amazing!!!

    Thanks all!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,870
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    No, not with HTML, you need JS.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,243
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Is this what you want?

    Code:
    <select id = "myselect" onchange = "initials(this)">
    <option>Select a title...</option>
    <option>This is a really really long title</option>
    <option>Another excessively long title</option>
    <option>This title is really absurdly long</option>
    <option>'Twas brillig and the slithy toves did gibe and gimble in the wabe</option>
    <option>Seventy-six trombones in the big parade</option>
    <option>7000 Leagues under the sea</option>
    </select>
    
    <script type = "text/javascript">
    var si = 0;
    var otxt = "";
    function initials(which) {
    if (si > 0) {  // previously selected index
    document.getElementById("myselect").options[si].text = otxt;  // reinstate previously selected option text
    }
    si = which.selectedIndex;  // currently selected index
    if (si > 0) {
    otxt = which.options[si].text;
    var otxt1 = otxt.replace(/-/g," ");  // replace hyphen by space
    otxt1 =  otxt1.replace(/(\d)(\d)/g,"$1 $2");  // split up numbers with space
    otxt1 =  otxt1.replace(/(\d)(\d)/g,"$1 $2");  // do it twice!
    otxt1 = otxt1.replace(/[^a-z0-9\s]/gi,"");  // eliminate special characters such a '
    var txtArray = otxt1.split(" ");
    var  shortText = "";
    for (var i = 0; i<txtArray.length; i++) {
    shortText += (txtArray[i].substring(0,1)).toUpperCase();
    }
    document.getElementById("myselect").options[si].text = shortText;
    alert (shortText);
    }
    
    }
    
    </script>
    I am doubtful as to the actual utility of this - the value used to send to the server can be either the option value (not text), or the selected index.
    So the option value of "This is a really really long title" could be defined as "TIARRLT", and its selectedIndex is 1.


    "Good judgment comes from experience and experience comes from bad judgment."
    Last edited by Philip M; 01-08-2012 at 06:52 PM. Reason: Improved

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    satr0p (01-08-2012)

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is SO close to what I need. But I need to be a able to control what the options are shorted to, so.

    "This is a really really long title"

    when selected could be "PTA" or if I want to I could change it in a months time to, "SMA". In short I make up the abbreviations.

    ANd thank you very much for doing this.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,243
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Quote Originally Posted by satr0p View Post
    This is SO close to what I need. But I need to be a able to control what the options are shorted to, so.

    "This is a really really long title"

    when selected could be "PTA" or if I want to I could change it in a months time to, "SMA". In short I make up the abbreviations.

    ANd thank you very much for doing this.
    That is not what you asked for! You asked for the title to be abbreviated to the inital letters of each word. Not to some arbitrary code.
    Here you are:-

    Code:
    <select id = "myselect" onchange = "initials(this)">
    <option>Select a title...</option>
    <option>This is a really really long title</option>
    <option>Another excessively long title</option>
    <option>This title is really absurdly long</option>
    <option>'Twas brillig and the slithy toves did gibe and gimble in the wabe</option>
    <option>Seventy-six trombones in the big parade</option>
    <option>7000 Leagues under the sea</option>
    </select>
    
    <script type = "text/javascript">
    var si = 0;
    var otxt = "";
    function initials(which) {
    if (si > 0) {  // previously selected index
    document.getElementById("myselect").options[si].text = otxt;  // reinstate full text of previously selected index
    }
    si = which.selectedIndex;
    if (si > 0) {    // current selected index
    otxt = which.options[si].text;
    
    switch(si) {
    case 1: shortText = "ABC"; break;
    case 2: shortText = "DEFG"; break;
    case 3: shortText = "HIJKL"; break
    case 4: shortText = "MNOPQ"; break;
    case 5: shortText = "RST"; break;
    case 6: shortText = "WXYZ"; break;
    }
    
    document.getElementById("myselect").options[si].text = shortText;
    alert (shortText);
    }
    
    }
    
    </script>
    To be candid I do not see the point of this at all. What is the point of changing the abbreviations at intervals?
    Last edited by Philip M; 01-08-2012 at 08:42 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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