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.

Here ya go: http://jsfiddle.net/EtELA/1/

If you have any questions, just ask.

:slight_smile:

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)

www.google.com/akadbaka/bomai/36587/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…

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.

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” />

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.

Simply replace


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

with


<textarea id="subdomain" placeholder="Type your subdomain, i.e., 'www'"></textarea>

:slight_smile:

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.

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 …

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

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

<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.