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 can I append new/updated innerHTML to a p tag that doesn't have a class or id?

I'm writing out a test script where I'm wanting to select an existing p tag in a form and update the copy being used. I don't have access to the original code and having to use JavaScript only to make updates until it's approved by the client's tech lead and test results.
My original code is:
var p = document.querySelector(".form-bg form p").innerHTML;
p.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.';
However, the p tag's content isn't being updated and hitting barriers stating the code is undefined or isn't a function.
So, I attempted using .appendChild() with a thought process of creating a new element and hiding the existing if I can't update the existing copy.
My updated code using .appendChild() is:
let updatedCopy = document.createElement('p');
updatedCopy.id = 'testCopy';
updatedCopy.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company';
document.getElementsByClassName('form-bg').appendChild(updatedCopy);
I've tried running this within the browser, but haven't been successful yet. Any guidance would be greatly appreciated! :)
Lastly, here's the HTML snippet with the form that's needing to be modified:
<div id="lightbox_shell">
<div class="test-w_contact-lightbox-individuals">
<div class="form-main-bg">
<div class="close-bg">
<button class="close" type="button">close</button>
</div>
<!-- Form Starts Here -->
<div class="form-bg">
<div class="legend">
Provide your information so an agent can reach you.
</div>
<form method="post">
<input name="offering" type="hidden" value="Individual"> <input name="language" type="hidden" value="English">
<div class="contact-fields">
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text firstname" data-manual="1"><input class="required" id="firstname" maxlength="150" name="firstname" placeholder="First Name *" title="First Name" type="text"></span>
</div>
<div class="flex_2col">
<span class="input-text lastname" data-manual="1"><input class="required" id="lastname" maxlength="150" name="lastname" placeholder="Last Name *" title="Last Name" type="text"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text phone" data-manual="1"><input class="required" id="phone" maxlength="12" name="phone" placeholder="Phone Number *" title="Phone Number" type="tel"></span>
</div>
<div class="flex_2col">
<span class="input-text zipcode" data-manual="1"><input class="required" id="zipcode" maxlength="5" name="zipcode" placeholder="Zip Code *" title="Zip Code" type="tel"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text email" data-manual="1"><input class="required" id="email" maxlength="255" name="email" placeholder="Email *" title="Email" type="email"></span>
</div>
<div class="flex_2col">
<div class="requirement-info">
* fields are required
</div>
<ul class="misc">
<li>
<p>Would you like an agent to call asap?</p><label class="checkbox"><input name="yesmeet" type="checkbox"> Yes</label> <label class="checkbox"><input name="nomeet" type="checkbox"> No</label>
</li>
</ul>
</div>
<div class="clearfloat"></div>
</div>
</div>
<p style="font-size: 13px;line-height: 100%;margin: 15px 0 14px;">By hitting submit, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.</p>
</form>
</div>
<div class="raq-complete-panel">
<div class="thanks">
<div class="title">
Thank You!
</div>
<p>An agent will call you<br>
<span class="eta">within 15 minutes.</span></p>
</div>
<div class="info">
<p>Your confirmation number is <span class="number"></span>.</p>
<p>If you have any questions regarding your request, contact us at <a class="textlink" href="mailto:email#test.com">email#test.com</a></p>
<p>Please provide your confirmation number listed above for reference.</p>
</div>
</div>
<div class="clearfloat"></div>
</div>
</div>
</div>

Your first try was so close. You want your assignment to be like this:
var p = document.querySelector(".form-bg form > p");
then you can set the innerHTML.
p.innerHTML = "Your new text";

Why does type="email" break my buttons?

When I have my email field on a form defined this way:
<div style="padding-top: 1em">
<div class="fieldLabel">
<legend>Email Address</legend>
</div>
<input [(ngModel)]="surveyFormData.email" type="email" style="width: 20em;" name="email" />
</div>
Buttons further down the page stop getting click events when the users touches or fills out the email field. If I remove the type="email" from my <input /> tag the buttons continue to work but leaving the type="email" in there breaks my buttons.
Here is the code for my button:
<input type="button" value=" + " (click)="onPlusElectedPosition()">
This is all code from an existing Angular app that I am taking over. And I am new to Angular so I have no doubt that I am missing something simple.
Amy asked for code for my button, so here it is:
onPlusElectedPosition() {
var newPosition:AlumniRole = new AlumniRole();
if(isNullOrUndefined(this.surveyFormData.electedPositions)) {
this.surveyFormData.electedPositions = new Array(0);
}
this.surveyFormData.electedPositions.push(newPosition);
}
So the form I am working on is rather long which is why I did not post the whole thing initially. Keep reading for my full source code:
<div class="wrap">
<h1>
Community Outreach
</h1>
<p>
<span class="carolinaBlue">Purpose:</span> To quantify the UNC School of Law's <span class="carolinaBlue">
Legacy
of Leadership
</span> via Carolina Law alumni's stories of service, volunteerism, and leadership across the state
and nation. Information gathered will be utilized in a variety of Carolina Law communnications/marketing pieces (for instance,
an online presence with interactive maps) designed to illustrate Carolina Law alumni's leadership in the communities
where they live and work.
</p>
<form #ofd="ngForm">
<h2>Personal Information</h2>
<fieldset>
<div style="display: inline-block;">
<div style="display: inline-block; padding-right: 1em;">
<legend>First Name</legend><input [(ngModel)]="surveyFormData.firstName" name="firstName" type="text" style="width: 20em;" />
</div>
<div style="display: inline-block; padding-right: 1em;"><legend>Middle Name</legend><input [(ngModel)]="surveyFormData.middleInitial" name="middleInitial" type="text" style="display: inline-block; width: 20em; " /></div>
<div style="display: inline-block; padding-right: 1em;"><legend>Last Name</legend><input [(ngModel)]="surveyFormData.lastName" name="lastName" type="text" style=" display: inline-block; width: 20em;" /></div>
</div>
<div style="padding-top: 1em" >
<div class="fieldLabel">
<legend>UNC Law Class Year</legend>
</div>
<input type="number" [(ngModel)]="surveyFormData.classYear" name="GraduationYear" min="1960" max="2019" style="width: 6em;" placeholder="YYYY" />
</div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Home Address</legend></div><input [(ngModel)]="surveyFormData.streetAddress" name="streetAddress" type="text" style="width:30em;" /> </div>
<div style="display: inline-block; padding-top: 1em">
<div style="display: inline-block; padding-left: 12em; padding-right: 1em;">
<legend>City</legend><input [(ngModel)]="surveyFormData.city" name="City" style="width: 14em;" />
</div>
<div style="display: inline-block; padding-right: 1em;">
<legend>State</legend><input [(ngModel)]="surveyFormData.state" name="State" style="width: 10em;" />
</div>
<div style="display: inline-block; padding-right: 1em;">
<legend>ZIP Code</legend><input [(ngModel)]="surveyFormData.postalCode" name="postalCode" style="width: 7em;" />
</div>
</div>
<!-- leaving this next line as is causes my problems, removing the type="email" "fixes" my problem but removes the validation rules -->
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Email Address</legend></div><input [(ngModel)]="surveyFormData.email" type="email" style="width: 20em;" name="email" /></div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Employer Name, Title</legend></div><input [(ngModel)]="surveyFormData.employerName" name="employerName" type="text" style="width: 24em;" /></div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Practice Area(s)</legend></div><input [(ngModel)]="surveyFormData.practiceArea" name="practiceArea" type="text" style="width: 24em;" /></div>
<!-- </div> -->
</fieldset>
<h2>Volunteer Leadership Roles</h2>
<p>Please share your commitment to community leadership by noting all organizations you have voluntarily served below.</p>
<div *ngFor="let eachRole of surveyFormData.leadershipRoles; let i=index">
<leadership-role [idx]="i" [role]="eachRole" (deletePosition)="deleteLeadershipRole($event)" #role></leadership-role>
</div>
<input type="button" value=" + " (click)="onPlusLeadershipRole()">
<!-- <h2>Elected Office</h2>
<p>Please share your commitment to public service by noting all elected positions you have held below.</p> -->
<h2>Public Service Roles</h2>
<p>Please share all elected and/or nonelected public service positions you have held, including military service, below.</p>
<div *ngFor="let eachPosition of surveyFormData.electedPositions; let i=index">
<elected-position [idx]="i" [role]="eachPosition" (deletePosition)="deleteElectedPosition($event)" #role></elected-position>
</div>
<input type="button" value=" + " (click)="onPlusElectedPosition()">
<h2>Pro Bono Legal Services</h2>
<p>Please share your commitment to Pro Bono service by noting the hours you commit, and the clients you serve annually.</p>
<fieldset>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="0-25">1-25 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="26-50">26-50 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="51-100">51-100 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="gt100">>100 hrs
<p class="extraSpace">Please provide a description of the type(s) of pro bono service you engaged in</p>
<textarea [(ngModel)]="surveyFormData.proBonoDescription" name="proBonoDescription" rows="8" cols="60"></textarea>
</fieldset>
<h2>Talking to Students About Community Leadership and Public Service</h2>
<fieldset>
<p>
<input [(ngModel)]="surveyFormData.checkedTalkToStudents" type="checkbox" name="mentoring">
Please check this box if you are willing to speak to Carolina Law 3L students about how to get
involved in public service and what it means to be a leader in your community.
</p>
</fieldset>
<!-- removed per Matt Marvin and Adam Stiffler on 9/14/2017
<h2>Other Information and/or Feedback</h2>
<p>Please share any other information and/or provide feedback you wish to share with the Carolina Law Advancement Office</p>
<textarea [(ngModel)]="surveyFormData.feedback" name="feedback" rows="8" cols="60"></textarea>
-->
<div><button class="extraSpace" type="button" value="Send" (click)="onProcessForm()">Send</button></div>
</form>
</div>

How to show or hide the heading in php

Hi i need to hide the text once i click on add button and the form should be displayed.Here is my code.
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
<div class="last" style="width: 710px;">
<p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
</div>
</div>
//Here is add button and go back button if i click in this add button form should be displayed else t should show the same text.//
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;">
<a class="large awesome oranges" >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;">
<a class="large awesome orange" href="property.php">Go Back </a>
</div>
<p>You haven't added any Co-owners Yet.</p>
//My form starts from here//
<h2>Owner Property details</h2>
<input type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
If i open the page iam getting this form but in this Owner Property details should be shown only when i click on add a property owner.Remaining all other should be Hidden it should show only form thats it.

Replace your code with this:
Note: This requires a working internet connection for fetching JQuery library over internet
<html>
<head>
<title>Title of website</title>
<style>
.hidden
{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('.add-property').click(function () {
$('.hidden').toggle('slow');
$('#add-owner-div').addClass('hidden');
$('#go-back-div').addClass('hidden');
});
});
</script>
</head>
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
<div class="last" style="width: 710px;">
<p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
</div>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;" id="add-owner-div">
<a class="large awesome oranges add-property" >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;" id="go-back-div">
<a class="large awesome orange" href="property.php">Go Back </a>
</div>
<p>You haven't added any Co-owners Yet.</p>
<h2>Owner Property details</h2>
<div class="hidden" style="display:none">
<form>
<input type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
</form>
</div>
</html>
If you have any other css libraries or bootstrap you can include in head tag
PHP is not an option to do this. If you want it to do with PHP dependent value you can use JQuery ajax.

Your add button should be like this
<a class="large awesome oranges" id="add_btn">Add a property Co-owner</a>
Put your form elements inside form
<form nam="myform" id="myform" style="display:none">
<input type='hidden' value="<?php echo $username; ?>" name='email'> <p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" ></p> <p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" ></p></form>
Js:
$("#add_btn").on('click',function(){
$("#myform").show();
}

Submit Button not disappearing with ng-disabled

I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?

Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form

Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive

It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">