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!

Cordova Framework7 template sub pages javascript doesn't works

I have a index.html page in Framework7 template which acts like master page, and sub pages for example contact.html ;
<div class="pages">
<div data-page="contact" class="page no-toolbar no-navbar">
<div class="page-content">
<div class="navbarpages navbarpagesbg">
<div class="navbar_left">
<div class="logo_text">BLIX</div>
</div>
<div class="navbar_right navbar_right_menu">
<img src="images/icons/white/menu.png" alt="" title="" />
</div>
<div class="navbar_right">
<img src="images/icons/white/user.png" alt="" title="" />
</div>
<div class="navbar_right">
<img src="images/icons/white/cart.png" alt="" title="" /><span>3</span>
</div>
</div>
<div id="pages_maincontent">
<h2 class="page_title">CONTACT</h2>
<div class="page_single layout_fullwidth_padding">
<h2 id="Note"></h2>
<div class="contactform">
<form class="" id="ContactForm" method="post" action="">
<label>Name:</label>
<input type="text" name="ContactName" id="ContactName" value="" class="form_input required" />
<label>Email:</label>
<input type="text" name="ContactEmail" id="ContactEmail" value="" class="form_input required email" />
<label>Message:</label>
<textarea name="ContactComment" id="ContactComment" class="form_textarea textarea required" rows="" cols=""></textarea>
<input type="submit" name="submit" class="form_submit" id="submit" value="Send" />
<input class="" type="hidden" name="to" value="youremail#yourwebsite.com" />
<input class="" type="hidden" name="subject" value="Contacf form message" />
<label id="loader" style="display:none;"><img src="images/loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
</form>
</div>
<h3>Our Location</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193578.74109041138!2d-73.97968099999997!3d40.70331274999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York+NYC%2C+New+York%2C+Statele+Unite+ale+Americii!5e0!3m2!1sro!2s!4v1425027721891" width="100%" height="200" frameborder="0" style="border:0"></iframe>
<blockquote>
Adress: New York 23066 / Pacific Street / Brooklyn <br />
Email: email#yourwebsite.com <br />
Mobile: +900 456 567 77
</blockquote>
Call Us Now!
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
When I add bottom page this javascript ;
<script type="text/javascript">
alert('Hello World!');
</script>
It doesn't trigger and it doesn't give any error. When I add it to bottom of index.html page or my-app.js file it works. But I need some specific javascripts in sub pages. How can I achive this? Thanks.

Page Events: https://framework7.io/docs/page.html#page-events
On your index page, include a whatevername.js file and put page specific logic inside it. (Alternative ways with routing and components)
Inside that js file, target the page by it's data-name, and the page event you want it to be run at.
Example: on my html page called home
<div class="page" data-name="home"> with whatever normal html the page has inside it.
In my js file I would run js on it by using this
$$(document).on('page:init', '.page[data-name="home"]', function (e) {
//whatever code here
alert('Hello World!');
})
So on the home page, on its init event, it will trigger the javascript that has alert hello world.
Starting from a template will make it easier to see how different parts work within F7. https://framework7.io/templates/ The Single View is a good starting point.

jQuery .live working in browser but on android phone

I am using phonegap to build my and I am trying to create a function that will refresh certain elements on pages in my app. I have been following another solution I found here
Jquery-Mobile: How to reload/refresh the internal page
The code is working perfectly in my browser but I can't get it to work on my android. I have tried changing to several different versions of both jQuery and jQuery mobile but neither works. I am new to working with phonegap and jQuery so would appreciate any help.
Javascript:
<script type="text/javascript">
$('#page_3').live('pageshow',function(event, ui) {
// refresh specific element
$('#refresh').val('');
});
$('#page_2').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
</script>
HTML:
<body>
<div data-role="page" id="page_1" >
<div data-role="content" name="contentlogin">
Navigate to page 2
Navigate to page 3
Yeah Page 1
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 2<br />Refresh All Elements<br /><br />
<label for="basic1">Text Input 1 (Refresh):</label>
<input type="text" name="name1" id="basic1" value="" />
<label for="refresh1">Text Input 2 (Refresh):</label>
<input type="text" name="name21" id="refresh1" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 2
</div>
</div>
<div data-role="page" id="page_3" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 3<br />Refresh Specific Elements<br /><br />
<label for="basic">Text Input 1:</label>
<input type="text" name="name" id="basic" value="" />
<label for="refresh">Text Input 2 (Refresh):</label>
<input type="text" name="name2" id="refresh" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 3
</div>
</div>
</body>

Clear only specific fields in HTML form when submitting

I have the following HTML form code:
<div data-role="popup" id="-add" data-theme="c" class="ui-corner-all" data-dismissible="false" data-overlay-theme="a" style="min-width:550px;">
<div data-role="content"> Delete
<form id="item-form" action="#" formaction="process" data-ajax="false">
<input type="hidden" name="type" value="hidden1" />
<input type="hidden" name="how" value="hidden2" />
<input type="hidden" name="loc" value="hidden3" />
<input type="hidden" name="itemtype" value="hidden4" />
<div align="left">
<h3> Add</h3>
</div>
<div class="popup-hrule"></div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<label for="location_name">Name</label>
<input type="text" name="location_name" id="location_name" value="">
</div>
<div class="ui-block-b" data-schema="types">
<label for="type_name">Type</label>
<select name="type_name" id="type_name">
<option data-item=".textarea:name; .value:id; .repeat:true"></option>
</select>
</div>
<div class="ui-block-a">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="">
</div>
<div class="ui-block-b">
<label for="city">City</label>
<input type="text" name="city" id="city" value="">
</div>
<div class="ui-block-a">
<label for="state">State</label>
<input type="text" name="state" id="state" value="">
</div>
<div class="ui-block-b">
<label for="zip">Postal</label>
<input type="number" name="zip" id="zip" value="">
</div>
<div class="ui-block-a">
<label for="_lat">Latitude</label>
<input type="number" name="_lat" id="_lat" value="">
</div>
<div class="ui-block-b">
<label for="_lon">Longitude</label>
<input type="number" name="_lon" id="_lon" value="">
</div>
</div> <a data-role="button" data-inline="true" onclick="$(this).closest('[data-role=popup]').popup('close');">Cancel</a>
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
</form>
</div>
</div>
Since this is an ADD form I would like to close the form and clear all the fields except for the hidden ones at the top which are flags that tell me what I have to do with the data. When I execute the code it clears all the data in the form including the hidden fields so the second time I can't add a new record.
A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.

You're clearing all input elements:
$(this).closest('form').find('input').val('');
If you want to clear only some of them, you need to target specifically the ones you want. For example, if you want to clear all non-hidden input elements:
$(this).closest('form').find('input[type!="hidden"]').val('');
Worst case would be that you have to turn this one line of code into a couple of lines of code to identify the elements you want. But as long as there's some jQuery-selectable pattern to identify the ones you want, that's what you need to do.

A best approach for me would be to close the form completely so I
don't have to erase the fields in the form which are going to get new
data when I try to open it again.
$("#item-form").remove();
If the hidden fields are populated from server, you can reset the form, so all form fields will be reset to value which were there during page reload.
$('#item-form')[0].reset();
The plain JS way of doing it
document.getElementById("item-form").reset();
Updated after discussion with OP
Cancel
function resetForm() {
$('#item-form')[0].reset();
$(this).closest('[data-role=popup]').popup(‌​'close');
}

Change this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
For this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input[type!=\'hidden\']').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
So that you are selecting just those input elements with type not equal to hidden.

How to clear text field value of an external page in jQueryMobile

I have two pages index.html and external.html.In index.html i have two text field. Inserting some text in those text field and clicking on a button i goes to external.html page.This external.html page has one button linking to index.html. When in click in that button it moves me to index.html.
Now the problem is when i move from external.html to index.html, the text fields remainds its previous value. i wanted it to clear its previous value when coming to index.html page. How to do that, please help me.
index.html
<section id="firstpage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>First</h1>
</header>
<div data-role="content" >
<script type="text/javascript" >
$( function(){
$( '#name_field' ).val( "" );
});
$(document).ready(function () {
$('.clearme').focus(function() {
$(this).val("");
});
});
</script>
<label for="name" >Name:</label>
<input type="text" name="name" id="name_field" value="" class="clearme" placeholder="Enter Name"/>
<label for="email">Email:</label>
<input type="email" name="email" id="email_field" value="" placeholder="Enter Email Id" />
<input type="submit" id="button" value="External Page" data-theme="b" onclick="_gotopage( 'http://localhost/test/external.html' );"/>
</div>
<footer data-role="footer" data-theme="d" >
</footer>
</section>
external.html
<section id="secondpage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>External</h1>
</header>
<div data-role="content" >
<script type="text/javascript" >
</script>
<input type="submit" id="comment_enter_button" value="Index Page" data-theme="b" onclick="_gotopage( 'http://localhost/test/index.html' );"/>
</div>
<footer data-role="footer" data-theme="d" >
</footer>
</section>
script.js
function gotopage( gotopage )
{
$.mobile.changePage($( gotopage ), { transition: "slide"});
}
function _gotopage( page )
{
$.mobile.changePage( page);
}

Is something like this what you're looking for?:
$(document).on('pageshow', function () {
$('.clearme').val("");
});