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

Question

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!

J.S. Taylor · Accepted Answer · 2011-04-28 15:22:32Z

3

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

edited Apr 28, 2011 at 15:22

answered Apr 28, 2011 at 14:57

J.S. Taylor

7614 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kjl Over a year ago

I went for option 2. This fixed the issue of the query string, and now works properly in FF, however it does not work in IE7 (the most important browser for me). The form validates properly for me, and I get the correct alerts, but the link does not get displayed. Will you please take a look and see what I am doing wrong there?

kjl Over a year ago

Nevermind - figured it out - was using "textContent" instead of "innerHTML"

bxfckrclooo · Accepted Answer · 2011-04-28 14:43:13Z

1

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

answered Apr 28, 2011 at 14:43

bxfckrclooo

5981 gold badge4 silver badges8 bronze badges

Comments

Max · Accepted Answer · 2011-04-28 14:43:15Z

0

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.

answered Apr 28, 2011 at 14:43

Max

7,1397 gold badges49 silver badges62 bronze badges

Comments

Alfabravo · Accepted Answer · 2011-04-28 14:46:33Z

0

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>

answered Apr 28, 2011 at 14:46

Alfabravo

7,5786 gold badges49 silver badges83 bronze badges

Comments

Milimetric · Accepted Answer · 2011-04-28 14:53:54Z

0

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.

answered Apr 28, 2011 at 14:53

Milimetric

13.5k4 gold badges49 silver badges57 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related