HTML add value(s) to complete URL

ldr

Hi everyone,

I'm looking for help in creating a web page where I add my value on a box and then clicking on a button with a predefined web address, that button would add the value from the search box to complete the address.

I have been using excel and hyperlinks to do this but is not ideal.

Example:

entering a value on 1st box and entering my second value on 2nd box would insert the 2 different values on a very specific place on the web address to complete the address

can someone help?

thank you.

oscarBravo

Are the "very specific places" query parameters? As in, http://example.com?param1=value1&param2=value2 type of thing?

ldr

oscarBravo wrote: »

Are the "very specific places" query parameters? As in, http://example.com?param1=value1&param2=value2 type of thing?

thank you for the reply

Yes the values are specific and would complete the web address

it would be impossible to add all the values to the script, what i mean is the box A and box B value or values could be anything to complete the address

oscarBravo

You can achieve what I illustrated quite simply:

<form action="www.example.com" method="get">
  <input name="param1">
  <input name="param2">
  <input type="submit" value="Submit">
</form>

ldr

oscarBravo wrote: »

You can achieve what I illustrated quite simply:

<form action="www.example.com" method="get">
  <input name="param1">
  <input name="param2">
  <input type="submit" value="Submit">
</form>

that is pretty good, thank you

so now i have the 2 boxes for the values

the web address goes something like this:

http://www.*****.com/****valueA*****valueB******

then I would have buttons for the different web address


here is what i got so far:

<form action="www.example.com" method="get">
</p> Value A: <input name="param1"></p>
</p>Value B: <input name="param2"></p>
</p> Value C: <input name="param3"></p>
<input type="submit" value="Weblink">
<input type="submit" value="Weblink1">
</form>

ldr

using amazon has an example, lets say i want to search for this product B003XIDAPI on amazon and i know the prefix of the address is:

http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=

now on my box A i enter B003XIDAPI then i click button A for address (above) the result i would be looking for is:

http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=B003XIDAPI


i think i may have accomplished what i was looking for:



<script type="text/javascript">
function goToPage() {
var page = document.getElementById('page').value;
window.location = "http://www.amazon.co.uk/dp/&quot; + page;
}
</script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />


but what if the value i want to add is in the middle of the address?

ldr

whats wrong with the script below?

<form action="http://www.amazon.co.uk/dp/&quot; method="get">
</p> Value A: <input name="param1"></p>
</p>Value B: <input name="param2"></p>
</p> Value C: <input name="param3"></p>
<input type="submit" value="Weblink">
<input type="submit" value="Weblink1">
</form>

on box one i enter B003XIDAPI and this should complete the address but instead i get

http://www.amazon.co.uk/dp/?param1=B003XIDAPI

oscarBravo

The part of the URL that starts with a ? is the query string, and consists of key/value pairs separated by ampersands. The keys are taken from the names of the input fields, and the values from the values of the input fields. Your javascript solution builds the URL by concatenating strings, which is the approach to take if you need a URL that doesn't consist of a query string. The HTML form version can create the query string URL, if you name the fields correctly.

For example, the Amazon URL in post #6 can be achieved with something like this:

<form method="get" action="http://www.amazon.co.uk/s/ref=nb_sb_noss">
  <input type="hidden" name="url" value="search-alias%3Daps">
  <input name="field-keywords">
  <input type="submit" value="Search">
</form>

If you want to go the Javascript route, just pull the values from the various fields and concatenate them with the bits that need to go between them to make up the URL and set the window.location as you have done. So, where you have

window.location = "http://www.amazon.co.uk/dp/" + page;

you might have

var url = "http://www.amazon.co.uk/dp/" + field1 + '/blah/' + field2 + '/moreblah/' + field3;
 window.location = url;

where field1/2/3 are retrieved in the same way your "page" value currently is, but from different fields.

ldr

thank you for the help.

I am getting a bit confused, i understand now how to add the missing value to the end of the URL by entering the value on the box A

Where I am getting lost is where different values have to be entered somewhere in the middle of the URL

I have no preference if for using either JavaScript or the form but to be honest the form seems easier but dont know if it is possible to use for what I need.


Ideally on the page I would have only 3 boxes for possible values and i would have several bottoms (6) each button with one specific URL and that link from that button would retrieve the required value or values from the 3 boxes

<h1>TEST</h1>
<form action="http://www.amazon.co.uk/dp/&quot; method="get">
</p> Value A: <input name="param1"></p>
</p>Value B: <input name="param2"></p>
</p> Value C: <input name="param3"></p>
<input type="submit" value="Weblink">
<input type="submit" value="Weblink1">
</form>

but when i use the script above I get http://www.amazon.co.uk/dp/?param1+param2=B003XIDAPI

and only button one Weblink works

ldr

Just to add the script below doesnt really work has it creates a search on the page for the value entered

<form method="get" action="http://www.amazon.co.uk/s/ref=nb_sb_noss"&gt;
<input type="hidden" name="url" value="search-alias%3Daps">
<input name="field-keywords">
<input type="submit" value="Search">
</form>

ldr

this is getting crazy frustrating

fill like its so close but just cant get it right

Talisman

Have a look at this: Auto Generate Amazon, Barnes & Noble, and more Buy Links for...

It's the same principle as what you are trying to do.

ldr

Talisman wrote: »

Have a look at this: Auto Generate Amazon, Barnes & Noble, and more Buy Links for...

It's the same principle as what you are trying to do.

thank you for the reply, i followed your link but i cant see how would do what im trying to so.

on my previous posts im only using amazon as an example of URL because the links ill be using in the final product are internal only.

28064212

It's not possible with just HTML. A form can only have a single action, meaning the submit button can only send you to one page. Here's how to do it with Javascript:
[HTML]<html><body>
<script type="text/javascript">
function goToPage1() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.amazon.co.uk/dp/&quot; + page1 + "/tmp/" + page2;
}
function goToPage2() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.google.ie/search?q=&quot; + page1 + "&tmp=" + page2;
}
</script>
Value A: <input id="param1"><br>
Value B: <input id="param2"><br>
<input type="submit" value="Amazon" onclick="goToPage1()">
<input type="submit" value="Google" onclick="goToPage2()">
</body></html>[/HTML]

ldr

thank you for that,
i edited your Urls to the ones i have been using has for me it makes more sense

but when i click on google button doesnt take me anywhere depending of which box i fill in

the 1st function is just perfect


<html><body>
<script type="text/javascript">
function goToPage1() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.amazon.co.uk/dp/&quot; + page1;
}
function goToPage2() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.&quot; + page2 ".co.uk/dp/B003XIDAPI" ;
}
3
function goToPage3() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.&quot; + page2 ".co.uk/dp/" + page1;
}
</script>
Value A: <input id="param1"><br>
Value B: <input id="param2"><br>
<input type="submit" value="Amazon" onclick="goToPage1()">
<input type="submit" value="Google" onclick="goToPage2()">
</body></html>

28064212

You're missing a "+" after page2 in goToPage2 and goToPage3. You've also got a random "3" in between those two functions

ldr

New script link one works as wanted but link 2 is a no go

<html><body>
<script type="text/javascript">
function goToPage1() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.amazon.co.uk/dp/&quot; + page1;
}
function goToPage2() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.&quot; + page2; ".co.uk/dp/B003XIDAPI"
}
</script>
Value A: <input id="param1"><br>
Value B: <input id="param2"><br>
<input type="submit" value="Web 1" onclick="goToPage1()">
<input type="submit" value="Web 2" onclick="goToPage2()">
</body></html>

28064212

28064212 wrote: »

You're missing a + after page2 in goToPage2

A "+", not a ";"

ldr

thank you very much for all the help i think you hit the spot. i tested with the amazon links and i think it worked.

thank you very much for the help

<html><body>
<script type="text/javascript">
function goToPage1() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.amazon.co.uk/dp/&quot; + page1;
}
function goToPage2() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.&quot; + page2 + ".co.uk/dp/B003XIDAPI"
}
function goToPage3() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.&quot; + page2 + ".co.uk/dp/" + page1;
}
</script>
Value A: <input id="param1"><br>
Value B: <input id="param2"><br>
<input type="submit" value="Web 1" onclick="goToPage1()">
<input type="submit" value="Web 2" onclick="goToPage2()">
<input type="submit" value="Web 3" onclick="goToPage3()">
</body></html>

ldr

28064212 wrote: »

A "+", not a ";"

If for example one address that i am looking to complete on need the value from one of the boxes would i remove the:
example:
var page1 = document.getElementById('param1').value;

so if i only need the value from page2 would go from this:
function goToPage1() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.amazon.co.uk/dp/&quot; + page1;
}

to

function goToPage1() {
var page2 = document.getElementById('param2').value;
window.location = "http://www.amazon.co.uk/dp/&quot; + page2;
}


is this right?

ldr

one more question is there a way of protecting my script and stop anyone from copying it or modify it?

thank you

Gordon

ldr wrote: »

one more question is there a way of protecting my script and stop anyone from copying it or modify it?

thank you

Why? Does that include not being able to post it on bulletin boards in order to help other people with similar queries?

What do you mean by stopping people from copying the code - do you not want their web browser to copy it into the cache, or do you not want people to use the code on their website?

If it's the latter, considering much of it was built by people on this thread who wanted to help you, for free, maybe that wouldn't be prudent to ask here.

ldr

Gordon wrote: »

Why? Does that include not being able to post it on bulletin boards in order to help other people with similar queries?

What do you mean by stopping people from copying the code - do you not want their web browser to copy it into the cache, or do you not want people to use the code on their website?

If it's the latter, considering much of it was built by people on this thread who wanted to help you, for free, maybe that wouldn't be prudent to ask here.

yes I agree without the help of the people from this thread I wouldn't had got it done. And thank you very much to everyone that helped.

The reason I asked if was possible to stop people from copying or modify it is because the website is for internal use only and it is very important that the information that the website will be retrieving is accurate with no mistakes.