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!

How to validate some fields and selects on ng-click AngularJS

I have a list of some input fields and few select options, so I want them be required on ng-click and raise a message just over the particular required item in form of PopupMenu or kind of that, or what ever the suitable way to show require warning just over the field
Hierarchy in my case:
<form>
<input required
<input required
location form for multiple records (not form tag)
contact form for multiple contacts (not form tag)
submit button to post (input required), all locations and all contacts.
</form>
My Form:
<div class="form-inline">
<div class="form-group">
<input type="text" placeholder="Legal Name" ng-model="companyForm.legalName" required/>
</div>
<div class="form-group">
<input type="text" placeholder="EIN" ng-model="companyForm.ein"/>
</div>
<div class="form-group" id="selectFormationDiv">
<select id="formationListId"></select>
</div>
<div class="form-group">
<input type="checkbox" style="margin-top: 5px;" ng-model="companyForm.internal"/> <b>Internal</b>
</div>
</div>
Note this is not form, and not be called on ng-submit.
My Output:
My Desired output:
Please guide me through how do I code to get my desired output. Thanks

angular.module('app', [])
.error {
color: red;
}
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app'>
<form name="form" class="css-form" novalidate>
<input type='text' ng-model='temp1' required name='temp1' />
<span ng-show="form.temp1.$error.required && form.$submitted" class='error'>
field1 is required
</span>
<br>
<input type='text' ng-model='temp2' required name='temp2' />
<span ng-show="form.temp2.$error.required && form.$submitted" class='error'>
field2 is required
</span>
<br>
<input type="submit" value="Save" />
</form>
<hr>
<!--Solution without `<form>` tag: -->
<input type='text' ng-model='temp3' name='temp3' />
<span ng-show="!temp3 && $submitted" class='error'>field3 is required</span>
<br>
<input type='text' ng-model='temp4' name='temp4' />
<span ng-show="!temp4 && $submitted" class='error'>field4 is required</span>
<br>
<input type="button" ng-click='$submitted=true' value="Save" />
</div>

HTML/Javascript form

I am doing a simple form using HTML/CSS and Javascript. The idea is that the form will ask the user to type his name, email, age and phone number. After that whenever the user clicks on the "Done" button, these headers will disappear.
"Enter your name"
"Enter your age"
"Enter your email"
"Enter your phone"
When I wrote the javascript code, these headers didn't disappear. So what is the problem?
function display(){
var input1 = document.getElementById("userA").value;
document.getElementById("username").innerHTML = input1;
var input2 = document.getElementById("ageA").value;
document.getElementById("age").innerHTML = input2;
var input3 = document.getElementById("emailA").value;
document.getElementById("email").innerHTML = input3;
var input4 = document.getElementById("phoneA").value;
document.getElementById("phone").innerHTML = input4;
}
</script>
<div>
<h1>Personal Information</h1>
</div>
<div class="container">
<img src="download.png">
<form name='myform'>
<div class="form-input">
<h2 id="username">Enter your name</h2>
<input id="userA" type="text" name="username" >
</div>
<div class="form-input">
<h2 id="age">Enter your age</h2>
<input id="ageA" type="text" name="age">
</div>
<div class="form-input">
<h2 id="email">Enter your email</h2>
<input id="emailA" type="text" name="email">
</div>
<div class="form-input">
<h2 id="phone">Enter your phone</h2>
<input id="phoneA" type="text" name="phone">
</div>
<input type="submit" id="done" onclick="display()" value="Done" name="done">
</form>
<h1 id= "time"></h1>
</div>
</body>

You are submitting the form, that will reload the page, so all changes done by your javascript is lost.
Try changing the submit button to a normal button e.g.
change
<input type="submit" id="done" onclick="display()" value="Done" name="done">
to
<button type="button" onclick="display()" >Done</button>

Have a look at this - it is basically the same, except it doesn't submit the form (because of the return false)
function display(){
var input1 = document.getElementById("userA").value;
document.getElementById("username").innerHTML = input1;
var input2 = document.getElementById("ageA").value;
document.getElementById("age").innerHTML = input2;
var input3 = document.getElementById("emailA").value;
document.getElementById("email").innerHTML = input3;
var input4 = document.getElementById("phoneA").value;
document.getElementById("phone").innerHTML = input4;
return false;
}
<div>
<h1>Personal Information</h1>
</div>
<div class="container">
<img src="download.png">
<form name='myform'>
<div class="form-input">
<h2 id="username">Enter your name</h2>
<input id="userA" type="text" name="username" >
</div>
<div class="form-input">
<h2 id="age">Enter your age</h2>
<input id="ageA" type="text" name="age">
</div>
<div class="form-input">
<h2 id="email">Enter your email</h2>
<input id="emailA" type="text" name="email">
</div>
<div class="form-input">
<h2 id="phone">Enter your phone</h2>
<input id="phoneA" type="text" name="phone">
</div>
<input type="submit" id="done" onclick="return display()" value="Done" name="done">
</form>
<h1 id= "time"></h1>
</div>

javascript keeps refreshing the screen

I'm using this to validate my form so that any field left empty a message will appear. I'm getting the message to appear but it restarts the page right after.
html code:
<head>
<title> Flower Spotter</title>
<link rel="stylesheet" type="text/css" href="..//css/flower.css"/>
<script type= "text/javascript" src="..//js/flower.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="..//img/orchid.jpg" alt="bann"/><br/>
<h1 class="style1 style2">Flower Spotter </h1>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
</div>
<div id="formControl">
<form id="form" action="" method="post" onsubmit="validateForm();">
<fieldset>
<legend>Personal Information</legend>
<label> First Name: </label> <br/>
<input type="text" id="fname" name="fname"/> <br/>
<span id="f_error"></span><br/><br/>
<label>Last Name </label><br/>
<input type="text" name="lname" id="lname"/><br/><br/>
<span id="l_error"></span><br/><br/>
<label> Sex: </label><br/>
Male <input type="radio" id="msex" name="sex" value="Male"/>
Female <input type="radio" id="fsex" name="sex" value="female"/> <br/> <br/> <br/>
<label> Address: </label><br/>
<textarea id="address" name="address" rows="0" cols="0"></textarea>
<br/> <br/>
<span id="ad_error"></span><br/><br/>
<label>Email Address</label><br/>
<input type="text" id="email" name="email"/><br/><br/>
<span id="em_error"></span><br/><br/>
<label> Password: </label><br/>
<input type="password" id="pword" name="pword"/> <br/> <br/>
<span id="p_error"></span><br/><br/>
<label>Confirm Password: </label><br/>
<input type="password" id="cword" name="cword"/> <br/> <br/>
<span id="c_error"></span><br/><br/>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</fieldset>
</form>
</div>
<div id="footer">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
Javascript code:
function validateForm()
{
//delacring variables
var firstName, lastName, address, email, pword, cword;
check=false;
error=false;
firstName=document.getElementById("fname").value;
lastName=document.getElementById("lname").value;
address=document.getElementById("address").value;
email=document.getElementById("email").value;
pword=document.getElementById("pword").value;
cword=document.getElementById("cword").value;
//checking to see if anything was entered
if(firstName=="" || firstName==null)
{
//sending an error message to the user if the cell is empty
document.getElementById("f_error").innerHTML="You must enter your first name";
error=true;
return false;
}
else
document.getElementById("f_error").innerHTML="";
if(lastName=="" || lastName==null)
{
//sending an error message to the user if the cell is empty
document.getElementById("l_error").innerHTML="You must enter your last name";
error=true;
return false;
}
else
document.getElementById("l_error").innerHTML="";
if(address=="" || address==null)
{
document.getElementById("ad_error").innerHTML="You must enter your Address";
error=true;
return false;
}
else
document.getElementById("ad_error").innerHTML="";
if(email=="" || email==null)
{
document.getElementById("em_error").innerHTML="You must enter your Email Address";
error=true;
return false;
}
else
document.getElementById("em_error").innerHTML="";
if(pword=="" || pword==null)
{
document.getElementById("p_error").innerHTML="You must enter a password";
error=true;
return false;
}
else
document.getElementById("l_error").innerHTML="";
if(cword=="" || cword==null)
{
document.getElementById("c_error").innerHTML="Please confirm your password";
error=true;
return false;
}
else
document.getElementById("c_error").innerHTML="";
return true;
}
can someone please help me find the error.

Your form is getting submitted, even when your function returns false.
Change:
onsubmit="validateForm();"
to:
onsubmit="return validateForm();"
This should fix it.

html/javascript - Trying to validate the form

I did a website and made a form ,and I have done the most of the validation but I am stuck at one. what I am trying to achieve here is when the the submit button of the form is clicked, a alert message show appear on screen saying thanks'customer name' for feed back and you chose 'radiobutton' and your comment was 'textincommentfield'.for one or another reason validation is not working. Any help would be great and thanks in advance , btw I am new to this.
Code: http://jsfiddle.net/92tSw/
HTML:
<title> Contact</title>
<body>
<div class="container">
<div id="wrap">
<div id="logo">
<img class="p" src="images/logo.png" align="left">
</div>
<img class="d" src="images/title.gif" align="middle">
<div id="menu">
<div id="menu2">
<ul>
<li><a href="homepage.html" ><span>Home</span></a></li>
<li><a href="about.html" ><span>About Us</span></a></li>
<li><a href="clubs.html" ><span>Clubs</span></a></li>
<li><a href="shop.html" ><span>Shop</span></a></li>
<li><a href="contact.html" ><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<form>
<fieldset>
<legend style="font-size:20px; padding-top:20px;">Fill in the form Below to contact Us:</legend>
<p><label for="full name">Full Name:</label>
<input id="full name" type="text" size="40" name="customername" placeholder="Type first and last name" autofocus/></p>
<p><label for="Address">Address:</label>
<input type="text" name="address1" placeholder="Address Line 1" size="42%">
<input type="text" name="address2" placeholder="Address Line 2" size="42%">
<p><label for="Address"> </label>
<input type="text" name="city" placeholder="City/Town" size="20%">
<input type="text" name="postcode" placeholder="Post Code" size="20%"></p>
<p><label for="Telephone No.">Telephone Number:</label>
<input type="text" name="Telephone No." maxlenght="12"placeholder=" Enter Telephone No." size="42%"></p>
<p><label for="email">Email:</label>
<input name="email" type="email" size="25" placeholder="youremail#you.com" /></p>
<legend style="font-size:20px;" >Comments</legend>
<p><label for="quantity"> How great is the website?Choose one<em>*</em> :</label>
<input type="radio" name="myRadio" value="VG" >Very Great
<input type="radio" name="myRadio" value="G" >Great
<input type="radio" name="myRadio" value="NVG">Not Very Great
<input type="radio" name="myRadio" value="U" >Useless
<BR>
<BR>
<BR>
<BR>
<p><label for="comment">Your Message:</label>
<textarea cols="35" rows="5" name="comments" Placeholder="eg. please knock on the dooor, ring the bell etc." >
</textarea></p>
</fieldset>
<fieldset>
<input type="checkbox" name="Terms and Condition"value="Terms and Condition" required> Accept Terms and Condition<br>
<input id="bor" type="reset" value="Reset">
<input id="chor" type="submit" name="button" value="Submit" onclick="getMyForm(this.form)" >
</fieldset>
</div>
</div>
CSS:
form{ padding-top:100px; color:White;}
fieldset { background-color:#980000 ; margin: 1%;}
label { float:left; width:20%; text-align:right;}
legend{font-weight:bold;}
.foot {
padding-top:.75pt;
padding-bottom:.75pt;
padding-right:auto;
padding-left:auto;
width:100%;
}
JS:
function getMyForm(frm)
{
var myinfo = getRadioValue(frm.myRadio);
var customername = document.getElementById("customer").value;
var comment = document.getElementById("comment").value;
alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
}
function getRadioValue(radioArray){
var i;
for (i = 0; i < radioArray.length; i++){
if (radioArray[i].checked) return radioArray[i].value;}
return "";
}

It may be better to have the event on the form
<form id="form1" onsubmit="return getMyForm(this)">
To prevent the form from actually submitting, you have to return false; from the javascript method.
To submit the form programmatically in JS
frm.submit();
Or
document.getElementById("form1").submit();
Then return true; from the function under the right conditions to allow the submit to complete.
(I noticed you didn't include the action and method attributes on the form. I assumed this was just for the example.)

http://jsfiddle.net/92tSw/2/
Use JQuery if you are new to javascript.. its much more comfortable:
$(document).ready(function() {
$("#yourmockform").submit(function(e) {
var customername = $(this).find('#fullname').val();
var comment = $(this).find('#comment').val();
var myinfo = $(this).find('[name="myRadio"]:checked').attr('value');
alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
return false;
});
});