simple javascript error - Button click appends query string on form submit


I've got a simple form that when a button is clicked, it calculates a link via concatenation and outputs the link on the same page by overwriting an existing method. The page should not redirect anywhere, even to itself.

The problem is that it appends a query string to the URL (ie /linkgenerator.html becomes /linkgenerator.html?generatelink=Generate+Link#), which actually causes two things to happen :

1) The form submits the first time properly, and then immediately reloads the page again, losing your input. Once you submit it again on the reloaded page, you're okay.

2) The query string causes the script to not work -period- when running on the local file system in IE7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SRP Link Generator</title>
    <script language="javascript" type="text/javascript">
        function dogeneratelink()
        {
                var code1= document.getElementById("code1").value;
                var brand = document.getElementById("brand").value;
                var code2= document.getElementById("code2").value;

                var errors = checkerrors(prop, srp);
                if (errors)
                {
                    alert(errors);
                    return;
                }



                var link = "http://www." + brand + ".com/" + code1 + "/" +  code2;
                var a = document.getElementById("link");
                a.href = link;
                a.textContent = link;           
        }

        function doclear()
        {
            var a = document.getElementById("link");
            a.href = '';
            a.textContent = '';
        }

        function checkerrors(code1, code2)
        {
                var errors;
                var propset;

                if (code1.length != 5) 
                {
                    errors = "You must enter a valid Code 1";
                    code1set = 1;
                }

                if ((code2.length < 4) || (code2.length > 5))
                {
                    if (code1set == 1)
                    {
                        errors += " and Code 2";
                    }
                    else
                    {
                        errors = "You must enter a valid Code 2";
                    }
                }

                return errors;
        }

    </script>
</head>

<body>



    <form action="#">

        <h1>Link Generator</h1>

        <div class="row">
            <label>Code 1:</label>
            <input type="text" id="code1" />
        </div>

        <div class="row">

            <label>Brand:</label>
            <select id="brand">
                <option value="brand1">Brand 1</option>
                <option value="brand2">Brand 2</option>
                <option value="brand3">Brand 3</option>
            </select>
        </div>

        <div class="row">
            <label>Code 2:</label>
            <input type="text" id="code2" />
        </div>

        <div class="row">
        <div class="buttonrow">

        <input type="submit" onclick="dogeneratelink()" id="generatelink"  name="generatelink" value="Generate Link" class="button"/>
        <input type="submit" onclick="doclear()" id="clear" value="Clear" class="button"/>
        </div>
        </div>
     </form>

     <div id="generatedlink"><a id="link"></a></div>

</body>
</html>

I've tried taking the action="#" out, but it doesn't seem to do anything.

All I want is the link to be calculated and immediately displayed on the screen.

Looking forward to your feedback! Thanks!

edit The form now behaves properly on submit, thanks to your advice of changing the submit type to a button.

The script works perfectly in Firefox. Unfortunately, I need it to work in IE7, and it doesn't. The validation alerts are being properly called, but the correct link is not being displayed on the page. Can anyone figure out what I did wrong?

I am not getting any Javascript errors or warnings.

edit again The last error was caused because I was using "textContent" and not "innerHTML"

Everything works now!

You don't need a form submission because you don't have to post anything to the server, all works are done by client side. There are two ways to fix this:

add 'return false' to you onclick handler

<input type="submit" onclick="dogeneratelink(); return false" id="generatelink"  name="generatelink" value="Generate Link" class="button"/>
<input type="submit" onclick="doclear(); return false" id="clear" value="Clear" class="button"/>

change the input type to button

<input type="button" onclick="dogeneratelink()" id="generatelink"  name="generatelink" value="Generate Link" class="button"/>
<input type="button" onclick="doclear()" id="clear" value="Clear" class="button"/>

<form action="" onsubmit="return false;">

Replace <form action="#"> with <form> to post back to the current page, though this isn't a valid HTML technique, it works in all browsers.


Change the submit type in inputs. You don't need to send info somewhere else, then use a button

<button type="button" onclick="something();">Click Me!</button>

or styled a tag

<a href="#" class="button" onclick="something();">Click Me!</a>

Check out this working example, much simpler than what you're trying to do. Notice the link and where the link points to both change on clicking the button. You can add stuff to the textbox and it will change the link's href.

http://jsfiddle.net/BpEMA/1/

You've worked yourself into some very complicated code. Firstly, use jQuery (the learning curve is really small and the benefit is huge). Then, simplify what you're trying to do.