I am extremely new to JavaScript, so bear with me.

I have the following code:

<input id="test" name="test" type="text" value="" /> 
<input id="test" type="button" value="Go!" /> 
<script type="text/javascript">
    window.location.href="/" + document.getElementById('test').value;
</script>

I would like the code to only be executed upon a button click. The function is to add the user input data to the end of the url and then upon the button click, load that url.

As of now, when I load the page, it automatically executes and goes to the url.

I am extremely new to JavaScript, so bear with me.

I have the following code:

<input id="test" name="test" type="text" value="" /> 
<input id="test" type="button" value="Go!" /> 
<script type="text/javascript">
    window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
</script>

I would like the code to only be executed upon a button click. The function is to add the user input data to the end of the url and then upon the button click, load that url.

As of now, when I load the page, it automatically executes and goes to the url.

• javascript
• url
• button
• getelementbyid
• user-data

5 Answers 5

1. You have two input fields with the same ID, that's a no go! Change the second one to something different!

2. Put your current javascript code into a function

   function clickHandler(event) {
       // Your code...
   }
   

3. Attach an event listener to your container

   var myContainer;
   
   // assign element from DOM
   myContainer = document.getElementById(ID_OF_CONTAINER);
   
   // attach event handler
   myContainer.addEventListener('click', clickHandler);
   

That should do the trick

<input id="test" name="test" type="text" value="" /> 
<input id="test2" type="button" onclick="fnc()" value="Go!" /> 
<script type="text/javascript">
function fnc(){
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}

</script>

You need to wrap your code in a function, and then call the function based on an event. Here, the onclick event of the button. NOTE that IDs must be unique. Change your code to:

<input id="test" name="test" type="text" value="" /> 
<input id="test2" type="button" value="Go!" onclick="foo()" /> 
<script type="text/javascript">
function foo(){
    window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}
</script>

jsFiddle example

Note that ID's are unique, and that you would use an event listener for that

<input id="test" name="test" type="text" value="" /> 
<input id="button" type="button" value="Go!" /> 

<script type="text/javascript">
    document.getElementById('button').addEventListener('click', function() {
        var val = document.getElementById('test').value;
        window.location.href="http://www.thenewendurancefitness.com/" + val;
    }, false):

</script>

<form onsubmit="return submit()">
    <input id="test" name="test" type="text" value="" /> 
    <input id="submit" type="submit" value="Go!" />
</form>
<script type="text/javascript">
function submit() {
    location.href="http://www.thenewendurancefitness.com/"+document.getElementById('test').value;
}
</script>