Why does the page reload after running this script

Question

I'm exploring javascript now. The following code runs correctly, but after I click the button, the page is refreshing. This is not desired. Any help would be appriciated. Thanks in advance.

<html>
<head>
</head>
<body >  
<form>
<input onchange="chk_change();" type="checkbox" id="chk_city" checked="checked"><label     for="chk_city">All cities</label></input><br>
<select id="sel1" style="display:none;margin:20 0 0 0;padding:3; width:100">
<option id="opt1">London
<option id="opt2">Moscow
<option id="opt3">Tokyo</option>
</select>
<br>
<button id="btn1" onclick="aa();">Go</button><br>
<p id="p1" style="border:1px solid black;width:200;height:50"></p>
</form>
</body>



<script type="text/javascript" >
function chk_change(){

var ch=document.getElementById('chk_city').checked;
    if (ch ==true){
     ch=document.getElementById('sel1').style.display='none';
    }
    else {
    ch=document.getElementById('sel1').style.display='block';
    }

}



function aa(){

sel = document.getElementById('sel1');

var text=(sel.options[sel.selectedIndex].text);
var ch=document.getElementById('chk_city').checked;
    if (ch ==true){
    document.getElementById('p1').innerText="All cities";
    }
    else{
    document.getElementById('p1').innerText=text;
    }
}

</script>


</html>

I see no reason that wouldn't work, but try removing the `
`, it could possibly be connected. — Mikk3lRo, May 14 '14 at 19:28
@Chris there is no jquery involved and it is not tagged with it — Huangism, May 14 '14 at 19:29
@Huangism It doesn't matter, the default action of a button is the same whether jQuery is involved or not. The accepted answer is not related to jQuery. — Chris Baker, May 14 '14 at 19:31

score 4 · Accepted Answer · answered May 14 '14 at 19:28

4

The default behavior of any button in a form is to be a submit button, which means that it will cause the page to reload. Set the property type='button' on the button and it will act just as a plain button, without submitting anything.

answered May 14 '14 at 19:28

Sam Hanley

4,707
7
35
63

1

You can ` – Rudie May 14 '14 at 19:29
It does, but I promise, it'll work. – Sam Hanley May 14 '14 at 19:29
I was literally yelling about it when I found this out at work. Don't know why I got a downvote -- it's 100% real. – Sam Hanley May 14 '14 at 19:30
http://www.w3.org/TR/html-markup/button.button.html – Chris Baker May 14 '14 at 19:30
`document.createElement('button').type` is apparently "submit". Kewl. Downvote not mine. – Rudie May 14 '14 at 19:30
Return false from the handler, prevent default, or button-button... all valid approaches. – Chris Baker May 14 '14 at 19:30
1

button-button =) HTML is so sensible and logical! – Rudie May 14 '14 at 19:31
You should see the button-button-button! When you click it, Xzibit pops out and hands you a button. – Chris Baker May 14 '14 at 19:32
@Rudie Better would be to set an `` – jmpp May 14 '14 at 19:32
@jmpp "better" in what regard? – Chris Baker May 14 '14 at 19:33
@jmpp Maybe better, but not the same. You can add markup inside a ` – Rudie May 14 '14 at 19:33
@Chris For not being "redundant" :) It's about preferences. – jmpp May 14 '14 at 19:34
@Rudie Yes. It depends of your purposes – jmpp May 14 '14 at 19:35
1

@jmpp I disagree. The redundancy is only a perception of the developer looking at the code, whereas the `button` tag with a type of "button" is the semantic choice for a button without any other semantics. An input that is a button is semantically a mess. – Chris Baker May 14 '14 at 19:35
Thanks to all. The Problem is solved due to – GGSoft May 14 '14 at 19:37

Why does the page reload after running this script

1 Answers1