SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Open concatenated string in new tab using javascript or HTML

    I am creating a webpage, and I want to add a functionality to it: I need to concatenate 2 strings using javascript. The first string is an input from a blank box (in which I can copy a link), and the second string is a constant string.

    On the click of a button on the webpage, the concatenated string (which will be a web-address) should open in a new tab or window. I am trying with the following code:

    <!DOCTYPE html>
    <html>
    <body>

    <p>Click the button to join three strings into one new string.</p>

    <button onclick="myFunction()">Go</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
    var str1 = "www. ";
    var str2 = "google";
    var str3 = ".com";
    var res = str1.concat(str2,str3);
    document.getElementById("demo").innerHTML = res;
    }
    </script>

    </body>

    </html>
    But instead of writing the result in the webpage itself, the Go button should open the link in a new tab. Also, instead of defining the string "www." in the code itself, I want to be able to enter it interactively by writing it in a blank box, but I am not getting how to code this.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Here ya go: http://jsfiddle.net/EtELA/1/

    If you have any questions, just ask.

    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Here ya go: http://jsfiddle.net/EtELA/1/

    If you have any questions, just ask.

    Thanks a lot for the code bro, you have saved my day.............i was trying for this from so long ..........,
    one more thing is that i want to edit the input string , which is actually removing some part of the input string from the end ,
    the input string or webs address which the user will input in the text box should be shortened till a specific keyword is reached
    for eg. if the input website address is (which i actually some random creation by me and will redirect to error page)

    http://www.google.com/akadbaka/bomai.../trig=56-utf=8

    now all the input string will have this "trig" keyword in them i want that the input string from input text box should get shortened to only

    www.google.com/akadbaka/bomai/36587/

    and then appended with the constant string ...........this should happen for any input string having the "trig" keyword in it.
    hoping i am able to explain my problem..............

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    But the user can't define any input there, they can only define the subdomain. So no, I'm not sure what you want.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    But the user can't define any input there, they can only define the subdomain. So no, I'm not sure what you want.
    Ya , my mistake i was actually talking about the subdomain only which the user will enter in the input text box.

  6. #6
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    But the user can't define any input there, they can only define the subdomain. So no, I'm not sure what you want.
    Quote Originally Posted by beastboy View Post
    Ya , my mistake i was actually talking about the subdomain only which the user will enter in the input text box.
    I found the way to do it thank for your help brother.............
    i am doing it now by using this

    // subdomain=subdomain.substring( 0, subdomain.indexOf( "trig" ) );

    is this correct or not and if any better option is there then please do tell ,
    now i am trying to resize the input text box to some fixed pixels like 200px * 600px
    how to edit the above code for it

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by beastboy View Post
    I found the way to do it thank for your help brother.............
    i am doing it now by using this

    // subdomain=subdomain.substring( 0, subdomain.indexOf( "trig" ) );

    is this correct or not and if any better option is there then please do tell ,
    now i am trying to resize the input text box to some fixed pixels like 200px * 600px
    how to edit the above code for it
    Yes that is fine, although I think I would use .lastIndexOf instead of .indexOf

    As for the 200px * 600px, change it to a textarea instead of <input type="text" />
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  8. #8
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Yes that is fine, although I think I would use .lastIndexOf instead of .indexOf

    As for the 200px * 600px, change it to a textarea instead of <input type="text" />
    thanks for the prompt reply , can you please update the code in the jsfiddle whose link you have sent earlier ,
    as i am not that well versed with javascript i dont know where to make the changes suggested by you.

  9. #9
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Simply replace

    Code:
    <input type="text" id="subdomain" placeholder="Type your subdomain, i.e., 'www'" />
    with

    Code:
    <textarea id="subdomain" placeholder="Type your subdomain, i.e., 'www'"></textarea>
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  10. #10
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Simply replace

    Code:
    <input type="text" id="subdomain" placeholder="Type your subdomain, i.e., 'www'" />
    with

    Code:
    <textarea id="subdomain" placeholder="Type your subdomain, i.e., 'www'"></textarea>
    but this gives the option to just make the input box area to a size which occupies the default text inside the input box , isn't there any method so that i can define the height and width of the input box myself whatever the default text is there in the input box.

  11. #11
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Of course. Just add style="width: 400px; height: 200px;" to the <textarea>
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  12. #12
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Of course. Just add style="width: 400px; height: 200px;" to the <textarea>
    Thanks for the help bro.........
    instead of using the textarea i have used

    <input style="width: 800px; height: 40px;type="text" id="subdomain" placeholder="paste your text here" /> and it worked like charm,

    i have used the above method as it dont give user the freedom to decide the text area by dragging the corner of the tex box ,
    but only because of your suggestion i was able to do this , though i didn't even know ABC of JavaScript.
    Keep up the good work ...........,
    now i want to change the color of the area of the input text box , to some other color instead of the default white , is this also possible .......

  13. #13
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Scallio bro........
    hope you are doing good ,
    i have some new queries in this script as i want to modify it
    which have two cases depending on the URL entered by user in the input box

    1. If the URL does not have a "?" in the URL, add "?google" in the URL.
    2. If the URL already has a "?" add "&google" in the URL.

    Thanks in advance

  14. #14
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    What have you tried? I'm happy to help if you're stuck, but the purpose of this forum is not to let other people do your work for you.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  15. #15
    SitePoint Member
    Join Date
    May 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    What have you tried? I'm happy to help if you're stuck, but the purpose of this forum is not to let other people do your work for you.
    Thanks for answering i have done this with little bit of net search and the code you provided at first
    Code:
    <body>
    
    <p>Enter Your Link in the box below</p>
    
    <div>
        <input style="width: 800px; height: 40px;type="text" id="subdomain" placeholder="Paste Your  Link Here eg. http://www.google.com/gp/" />
    </div>
        
    <button id="theButton">Go</button>
    
    <script>
        
        document.getElementById('theButton').addEventListener('click', function(e) {
        var subdomain = document.getElementById("subdomain").value;
            
    //if '?' is not there indexOf will return '-1' else it will return the //position of '?'        
        if(subdomain.indexOf("?") == -1){
             var res = subdomain + '?google';
        }else{
            if(subdomain.indexOf("&") == -1){
             var res = subdomain + '&google';
            }else{
                subdomain=subdomain.substring( 0, subdomain.indexOf( "&" ) );
                var res = subdomain + '&google';
            }
        }      
        window.open(res);
        e.preventDefault();
        return false;
    });
    </script>
    Now i want to change the size of the Go button and also i want to make all the elements to be indented to center position right now all elements like the Text , Input Box and the Go button are having left indentation to change the size of Go button i tried using

    <button style="width: 80px; height: 20px; id="theButton">Go</button>

    It does changes the size of the Go button but makes it non functional because after making this change clicking on the go button is not doing anything,
    what might be wrong and also how to indents the elements.


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
  •