We Keep Coding

Webpage loses interactivity with JavaScript when a form is submitted

I have a single page website that has three buttons (styled with jQuery Mobile) as a menu which, when clicked, show different content that is contained on hidden "div". However, on the main page I have a form connected to mysql which lets users join in, but when you fill the form and click the button "submit", the page "kind of reloads" and the header buttons don't work anymore. So, when form is submitted on main div, menu stops to work (it doesn't display and hide content anymore) Is there any solution to this?
(I've included a snippet but here the problem is not seen as I can't connect it to mysql).
function updateContent(hash) {
var newClass = hash.substring(1);
var newContent = $("." + newClass).html();
$("#content").html(newContent);
$("#content").css("display", "none");
}
if (window.location.hash) {
updateContent(window.location.hash);
}
$(".contentUpdate").click(function() {
updateContent($(this).attr("id"));
$("#content").fadeIn();
$(".contentUpdate").removeClass("ui-btn-active");
});
.hiddenContent {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="menu">
<div data-role="navbar">
<ul>
<li><a class="contentUpdate" id="#swim">Swim</a></li>
<li><a class="contentUpdate" id="#cycle">Cycle</a></li>
<li><a class="contentUpdate" id="#run">Run</a></li>
</ul>
</div>
<!-- /navbar -->
</div>
<div id="content">
FORM
<div id="joinForm">
<form method="post">
<label for="name">Name and Surname(s)</label>
<input type="text" id="name" placeholder="Adam Smith" value="" name="name" />
<label for="email">Email</label>
<input type="text" id="email" placeholder="example#esade.edu" value="" name="email" />
<label for="phone">Phone</label>
<input type="text" id="phone" placeholder="+34 671 542 893" value="" name="phone" />
<fieldset data-role="controlgroup">
<p>Choose the sports you're interested in:</p>
<input type="checkbox" id="swimming" name="swimming" value="" />
<label for="swimming">Swimming</label>
<input type="checkbox" id="cycling" name="cycling" value="" />
<label for="cycling">Cycling</label>
<input type="checkbox" id="running" name="running" value="" />      <label for="running">Running</label>
</fieldset>
<div align="right">
<button type="submit" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" name="submit" id="submit" value="submit">Submit</button>
</div>
</form>
</div>
</div>
<div class="hiddenContent swim">
swim
</div>
<div class="hiddenContent cycle">
cycle
</div>
<div class="hiddenContent run">
run
</div>
Thank you!

show/hide a div based on click in another div

I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.
The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery
So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function. What am I missing?
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" display = 'none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
Relevant portion of javascript
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
('#wrapper').show();
})
});
Please suggest.

You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.
Try the following:
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
$('#wrapper').show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" style='display:none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>

Form Display through JQuery not working

I am trying to display different fields of the form according to selection. It is working properly till few stages. At 6th page, the page refreshes automatically without any input from my side. My code is below. Please help me gettiig out of this error. The actual working page can be found here.
function next(idshow,hide){
$("#page"+hide).hide();
$("#page"+idshow).show();
return false;
}
<html>
<head>
<title>My Survey </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-md-12" id="page1">
<h1>WELCOME TO ONLINE
SURVEY </h1>
<button id="1" onclick="next(2,1)">NEXT</button>
</div>
<div class="col-md-12" id="page2" style="display:none">
<center><h1>IMPORTANT</h1> </center>
<p> If you Accept the terms and conditions and provide a relevant information, then you may get UPTO 1 year free trial of apps developed by company in future. </p>
<button id="2" onclick="next(3,2)">NEXT</button>
</div>
<div class="col-md-12" id="page3" style="display:none">
<h2><center> This app is only for survey and not responsible for any claims made by company.</center></h2>
<h3> <center>TERMS AND CONDITIONS </center></h3>
<p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done). </p>
<p>2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE BOUND TO THE CLIENT: <br>
a) You must provide all information which is asked by the company. <br>
b) In future, if required you provide more information if asked. <br>
c) If after accepting the terms and condition, not providing or non-cooperating in collecting relevant information, the company have all authority to cancel the contract . <br>
d) In future company has all powers to change the terms and conditions without prior notice. <br>
e) If any new clause to be added also accepted by the client. <br> </p>
<button id="3" onclick="next(4,3)">ACCEPT</button>
</div>
<div class="col-md-12" id="page4" style="display:none">
<p align="center"><strong>ARE YOU PROFESSIONAL?</strong></p>
<p><form name="myform" method="POST"> <input type="radio" name="r1" onclick="next(5,4)" value="YES">YES </p>
<p> <input type="radio" name="r1" onclick="next(17,4)" value="NO">NO </p>
</div>
<div class="col-md-12" id="page5" style="display:none">
<h2> Personal Information</h2>
<p>Profile Picture <input type="file" id="pic" class="myinput" name="sbm" align="left" accept="image/*" value="Browse"> </p>
<p>
FIRST NAME :
</p>
<p>
<input type="text" class="nm" name="name" id="name">
</p>
<p>
MIDDLE NAME:
</p>
<p> <input type="text" class="nm" name="mname" id="nm">
</p>
<p>
LAST NAME :
</p>
<p>
<input type="text" name="lname" class="nm" id="nm">
</p>
<p>
QUALIFICATION
</p>
<p>
<input type="text" name="qual" id="qual">
</p>
<p>
</p>
<p id="hd1"> example(MBBS,BHMS,DHMS ETC)
</p>
<p id="hd2">
DESGINATION:
</p>
<p> <input type="text" name="desg" id="desg">
</p>
<p>
</p>
<p>example(genral practioner, surgeon, skin specialist etc)
</p>
<p>
EXPIRENCE:
</p>
<p>
<input type="text" name="expi" id="expi">
</p>
<p>
<button id="5" onclick="next(6,5)">NEXT</button>
</p>
</div>
<div class="col-md-12" id="page6" style="display:none">
<h1> This is Page 6 </h1>
<button id="6" onclick="next(7,6)">NEXT</button>
</div>
<div class="col-md-12" id="page17" style="display:none">
<h1> This is Page 17</h1>
<button id="17" onclick="next(18,17)">NEXT</button>
</div>
<div class="col-md-12" id="page18" style="display:none">
<h1> This is page 18 </h1>
</div>
</form>
</body>
</html>
Please help me understand what problem is there actually??

You should specify type="button" in your button attributes tag like this
<button type="button" id="5" onclick="next(6,5)">NEXT</button>
If you are using button without specifying the type it will work as submit button for containg form.
your previous button 1,2,3,4 works because they are not inside form tag

You need to prevent form's submitting action by adding onsubmit="return XXX();" in your form element.

The button submits the form, as its default function. It doesn't reach the return false in your function and I am suspecting because of the little content on this pages.
Since you are including JQuery, you can do:
$(document).ready(function(){
$('button').click(function(e){
e.preventDefault();
$(this).closest('div.col-md-12').hide();
$('#page' + $(this).data('show')).show();
});
});
This will give all buttons an onclick event and you will not have to repeat the onclick and function on each one.
The above will hide the button's parent div with class col-md-12 and show the div with id page + the value from the button (see below)
Then the button should become:
<button data-show="2">NEXT</button>
On data show attribute you enter the id of the next div you want to show.

Id's assigned to buttons are only numbers id should start with
character and can contain alphabets,numbers and '_'.
Your form tag should start after body open.
Validate duplicate Id's in your page.
Replace add button type as "button". e.g. <button type="button" id="b1">
Fix these problems your html page will work properly.
Added working code below
<html>
<head>
<title>My Survey</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script>
function next(idshow, hide) {
$("#page" + hide).hide();
$("#page" + idshow).show();
//return false;
}
</script>
</head>
<body>
<div class="col-md-12" id="page1">
<h1>WELCOME TO ONLINE SURVEY</h1>
<button type="button" id="b1" onclick="next(2,1)">NEXT</button>
</div>
<div class="col-md-12" id="page2" style="display: none">
<center>
<h1>IMPORTANT</h1>
</center>
<p>If you Accept the terms and conditions and provide a relevant
information, then you may get UPTO 1 year free trial of apps
developed by company in future.</p>
<button type="button" id="b2" onclick="next(3,2)">NEXT</button>
</div>
<div class="col-md-12" id="page3" style="display: none">
<h2>
<center>This app is only for survey and not responsible for
any claims made by company.</center>
</h2>
<h3>
<center>TERMS AND CONDITIONS</center>
</h3>
<p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR
FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done).
</p>
<p>
2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE
BOUND TO THE CLIENT: <br> a) You must provide all information
which is asked by the company. <br> b) In future, if required
you provide more information if asked. <br> c) If after
accepting the terms and condition, not providing or non-cooperating
in collecting relevant information, the company have all authority to
cancel the contract . <br> d) In future company has all powers
to change the terms and conditions without prior notice. <br> e)
If any new clause to be added also accepted by the client. <br>
</p>
<button type="button" id="b3" onclick="next(4,3)">ACCEPT</button>
</div>
<div class="col-md-12" id="page4" style="display: none">
<p align="center">
<strong>ARE YOU PROFESSIONAL?</strong>
</p>
<p>
<input type="radio" name="r1" onclick="next(5,4)" value="YES">YES
</p>
<p>
<input type="radio" name="r1" onclick="next(17,4)" value="NO">NO
</p>
</div>
<form name="myform" method="POST" action="">
<div class="col-md-12" id="page5" style="display: none">
<h2>Personal Information</h2>
<p>
Profile Picture <input type="file" id="pic" class="myinput"
name="sbm" align="left" accept="image/*" value="Browse">
</p>
<p>FIRST NAME :</p>
<p>
<input type="text" class="nm" name="name" id="name">
</p>
<p>MIDDLE NAME:</p>
<p>
<input type="text" class="nm" name="mname" id="mnm">
</p>
<p>LAST NAME :</p>
<p>
<input type="text" name="lname" class="nm" id="lnm">
</p>
<p>QUALIFICATION</p>
<p>
<input type="text" name="qual" id="qual">
</p>
<p></p>
<p id="hd1">example(MBBS,BHMS,DHMS ETC)</p>
<p id="hd2">DESGINATION:</p>
<p>
<input type="text" name="desg" id="desg">
</p>
<p></p>
<p>example(genral practioner, surgeon, skin specialist etc)</p>
<p>EXPIRENCE:</p>
<p>
<input type="text" name="expi" id="expi">
</p>
<p>
<button type="button" id="b5" onclick="next(6,5)">NEXT</button>
</p>
</div>
</form>
<div class="col-md-12" id="page6" style="display: none">
<h1>This is Page 6</h1>
<button type="button" id="b6" onclick="next(7,6)">NEXT</button>
</div>
<div class="col-md-12" id="page17" style="display: none">
<h1>This is Page 17</h1>
<button type="button" id="b17" onclick="next(18,17)">NEXT</button>
</div>
<div class="col-md-12" id="page18" style="display: none">
<h1>This is page 18</h1>
</div>
</body>
</html>

Show only the requested forms using JS

As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible.
How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"?
So, if the user clicked on the "send an invite" button, the sent an invite form will appear and the blue buttons will disappear "you can go back by clicking the back button".
Is it possible to use dynamic ID dedication using JS to achieve this? as I will have more than 2 options on some pages etc... For example, give the <a class="button button-box"><p>Send an invite</p></a> an id "#send-and-invite-form", it will then find the form that has that ID and show it. Then hide the div that contains those boxes until clicked back.
Here is a simplified HTML structure:
<div>
<a class="button button-box"><p>Send an invite</p></a>
<a class="button button-box"><p>Add manually</p></a>
</div>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>

Keep both the forms hidden at first and give a ID to each <a> and also to the <form>
Then
$("#id-of-btn1").click(function(){
$("#form-1").toggle();
});
and
$("#id-of-btn2").click(function(){
$("#form-2").toggle();
});
EDIT:
This could be a solution to make it completely independent of ID/Classes.
If you give a class to div containing all the <a> then
$(".class-of-div a").click(function(){
var t=$(this).index();
$("body").find("form").hide();
$("body").find("form:eq("+t+")").toggle();
});
This will work for corresponding <a> and <form> only,so make sure that you have them in order.

.show{display:block;}
.hide{display:none;}
<a class="button button-box" id="lnkInvite" ><p>Send an invite</p></a>
<a class="button button-box" id="lnkManually"><p>Add manually</p></a>
<form data-parsley-validate class="hide">Send an Invite Form</form>
<form data-parsley-validate class="hide">Add manually form</form>
<script type="text\javascript">
$().ready(function(){
$("#lnkInvite").click(function(){
/*Toggle the show hide css class*/
});
$("#lnkManually").click(function(){
/*Toggle the show hide css class*/
});
});
</script>

You can achieve this with the help of :target pseudo selector. This is pure CSS solution:
form {
display: none;
}
form:target {
display: block;
}
<div> <a class="button button-box" href="#send-and-invite-form"><p>Send an invite</p></a>
<a class="button button-box" href="#add-manually"><p>Add manually</p></a>
</div>
<form id="send-and-invite-form" data-parsley-validate>
Invite
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
<form id="add-manually" data-parsley-validate>
Manually
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
It is also possible to have default tag preselected, however it requires changing order of forms and using tricky selector:
form, form:target ~ #send-and-invite-form {
display: none;
}
#send-and-invite-form, form:target {
display: block;
}
Demo: http://jsfiddle.net/dfsq/5633tu4c/

Simmple solution using js and style attributes.
<html>
<head>
<script>
function showhide1(){
document.getElementById("form1").style.display='block';
document.getElementById("form2").style.display='none';
}
function showhide2(){
document.getElementById("form2").style.display='block';
document.getElementById("form1").style.display='none';
}
</script>
</head>
<body>
<div>
<a class="button button-box" onclick="showhide1()"><p>Send an invite</p></a>
<a class="button button-box" onclick="showhide2()"><p>Add manually</p></a>
</div>
<form data-parsley-validate id="form1" >
<fieldset>
<div>
<input name="" type="email" placeholder="Email address1" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate id="form2">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<script>
document.getElementById("form2").style.display='none';
document.getElementById("form1").style.display='none';
</script>
</body>
</html>

Keep both forms hidden until the button for each is clicked. Clicking the respective button will show the required form AND hide the button. Click back hides the form and shows the button again.
I implemented for the invite section. You will have to implement for the manual as well, but hopefully this points you in the right direction. Also, I skipped the jQuery, but obviously this is your choice.
CSS
.hidden{
display: none;
}
HTML
<div> <a id="inviteButton" class="button button-box"><p>Send an invite</p></a></div>
<form id="inviteForm" class="hidden">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a id="backButtonInvite">Back</a></div>
</form>
Javascript
var inviteButton = document.querySelector("#inviteButton");
var inviteForm = document.querySelector("#inviteForm");
var backButtonInvite = document.querySelector("#backButtonInvite");
inviteButton.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
this.classList.toggle("hidden");
});
backButtonInvite.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
inviteButton.classList.toggle("hidden");
});
Here is the fiddle.

Conditional Logic on my form, One option will take you to next

So the actual scenario is...
I have a form on a page that needs some conditional logic.
form fields...
Then, I have a bunch of questions for my customer which would determine what (form) would be displayed or not.
(i.e) What type of Marketing list are you looking for?
(options) Saturated or Targeted
If they choose Saturated, Then Saturated displays
If they choose Targeted, Then Targeted displays
either one or the other, both forms cannot be displayed at the same time.
and so on...
one prompt leads you to the next.
I would greatly appreciate any help I could get on this
This is the code I have so far:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var url = window.location.href;
var option = url.match(/option=(.*)/);
if (option !== null) {
$(".link ." . option[1]).trigger('click');
}
$(".link").bind('click', function () {
$('#intro-tekst').hide();
$('.boxes').hide();
$('.link').removeClass('selected');
$(this).removeClass('link');
$('#' + $(this).prop('class')).show();
$(this).addClass('link selected');
});
});
</script>
<body>
<p>
Who Do You Want to Mail to?
<ul>
<li>Business</li>
<li>Residents</li>
<li>Have a list?</li>
</ul>
</p>
<div class="boxes hidden" id="business">
What Type of Business List Do You Want?
<ul>
<li>Saturation</li>
<li>Targeted</li>
</ul>
</div>
<div class="boxes hidden" id="saturation">
Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
<ul>
<li>Zipcode</li>
<li>Radius</li>
</ul>
</div>
<div class="boxes hidden" id="zipcode">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="radius">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="targeted">
<div id="intro-tekst">Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
<ul>
<li>Zipcode</li>
<li>Radius</li>
</ul></div>
</div>
<div class="boxes hidden" id="zipcode">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="radius">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="residents">
<div id="intro-tekst">What Type of Consumer List Do You Want?
<ul>
<li>Saturation</li>
<li>Targeted</li>
</ul></div>
</div>
</div>
<div class="boxes hidden" id="have-list">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
</body>

This gets you most of the way there: http://jsfiddle.net/rym2g/
The only thing it doesn't do at the moment is close all the other panes when you choose something further up the list. That I leave to you. :)
<form>
<ul class="form-nav">
<li>AAA</li>
<li>BBB</li>
</ul>
</form>
<form class="hidden" id="a-1">
<ul class="form-nav">
<li>aaa</li>
<li>bbb</li>
</ul>
</form>
<form class="hidden" id="a-1-1">
<p>A-1-1</p>
</form>
<form class="hidden" id="a-1-2">
<p>A-1-2</p>
</form>
<form class="hidden" id="a-2">
<ul class="form-nav">
<li>111</li>
<li>222</li>
</ul>
</form>
<form class="hidden" id="a-2-1">
<p>A-2-1</p>
</form>
<form class="hidden" id="a-2-2">
<p>A-2-2</p>
</form>
And JavaScript:
$(document).on("click", "ul.form-nav a", function(event) {
event.preventDefault();
var id = event.target.href.replace(/^[^#]+/, "");
console.log("Going to: " + id);
$(id).show().focus();
});