Develop Reference

How to control the disability state of HTML inputs using Javascript

I have been trying to cycle between the disability states of two inputs on my website by using a button attached to some JavaScript. My current code has two buttons in use which both disable one input and enable the other, however this is not very practical. I wanted to know how I can use one button and one script to cycle between the disability states of my inputs, this is my current code:
<script>
function switch_monthlyexpense()
{
document.getElementById("monthlyexpenses").disabled=false;
document.getElementById("monthlypexpenses").disabled=true;
}
</script>
<script>
function switch_monthlypexpense()
{
document.getElementById("monthlyexpenses").disabled=true;
document.getElementById("monthlypexpenses").disabled=false;
}
</script>
<button class="btn btn-primary" onclick="switch_monthlyexpense()" id="monthlyexpensestoggle">Expenses</button>
<button class="btn btn-primary" onclick="switch_monthlypexpense()" id="monthlypexpensestoggle">P Expenses</button>
<form id="expenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
<input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
</div>
<span class="input-group-text" id="dsign5">$</span>
</form>
<form id="pexpenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
<input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
</div>
<span class="input-group-text" id="psign4">%</span>
</form>

<script>
// use a variable to note which one is disabled
let selected = "monthlyexpenses"
function switchDisabled () {
// toggle the from "monthlyexpenses" to "monthlypexpenses" or vice versa
selected = selected === "monthlyexpenses" ? "monthlypexpenses" : "monthlyexpenses"
// check if the DOM disabled state is the same as the selected
document.getElementById("monthlyexpenses").disabled = selected === "monthlyexpenses";
document.getElementById("monthlypexpenses").disabled = selected === "monthlypexpenses";
}
</script>
<button class="btn btn-primary" onclick="switchDisabled()" id="switch-button">Switch</button>
<form id="expenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
<input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
</div>
<span class="input-group-text" id="dsign5">$</span>
</form>
<form id="pexpenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
<input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
</div>
<span class="input-group-text" id="psign4">%</span>
</form>

disabled is an attribute so you can set it by:
document.getElementById("myId").setAttribute('disabled', '');
And to enable the element:
document.getElementById("myId").removeAttribute('disabled');
Your first function will look like:
function switch_monthlyexpense()
{
document.getElementById("monthlyexpenses").removeAttribute('disabled');
document.getElementById("monthlypexpenses").setAttribute('disabled', '');
}

How to show value after submit button in angular?

I made a form in Angular where, when user submit a form - new value show be shown under the form, I tried everything as per my knowledge but nothing works, currently labels of below form is showing without click, I need to show everything once where clicked submit button!
My interface:
HTML FILE
<div class="form-field col-lg-12">
<input class="submit-btn" type="submit" value="click" (click)="update">
</div>
<div class="form-field col-lg-12">
<input class="submit-btn" type="submit" value="click" (click)="update">
</div>
<div *ngIf="display">
<section class="admin-form">
<form class="contact-form row">
<div class="form-field col-lg-6" >
<label class="label" for="name">Article ID</label>
<label class="label infolabel" for="name">Fc409702-683e-11eb-Bc5e-54ee750463ec</label>
</div>
<div class="form-field col-lg-6 ">
<label class="label" for="company">Title</label>
<label class="label infolabel" for="company">SKF India Logs Nearly 2-Fold Rise In Q3 Net Profit</label>
</div>
<div class="form-field col-lg-6">
<label class="label" for="message">Publication, Edition</label>
<label class="label infolabel" for="message">Times Of India, Mumbai</label>
</div>
<input class="submit-btn" type="button" value="Delete" data-toggle="modal" data-target="#popup1">
</div>
</form>
</section>
</div>
TS FIle
export class MainComponent implements OnInit {
constructor() { }
display = true;
ngOnInit(): void {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
}
update(){
this.display = !this.display;
}
}

On (click) you call update which I'm guessing is a function in your .ts.
If so, your .ts file can have something like this:
display: boolean = false;
/*...*/
update() {
...
this.display = true;
...
}
Then you *ngIf=display will trigger and show whatever is contained within

In the click handler, update should have (), like so:
<div class="form-field col-lg-12">
<input class="submit-btn" type="submit" value="click" (click)="update()">
</div>
<div class="form-field col-lg-12">
<input class="submit-btn" type="submit" value="click" (click)="update()">
</div>

how to call a js function in html

enter code hereI have an issue with my html. I am trying to save an input to my localstorage. For some reason, whenever I inspect my website I don't see the word I typed in my field. In other words it is not loading the input to my localstorage.
I am new to html and javascript and I am hoping you guys can help me out. I'm providing a picture to demostrate what I am trying to approach.
function getInput(){
var nameInput = document.getElementById('inputName').value;
localStorage.setItem('text', dataInput);
var dateInput = document.getElementById( 'inputDate').value;
localStorage.setItem('text1', dateInput);
}
<form class="form-horizontal">
<fieldset>
<legend>Endorse me</legend>
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Date</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputDate" placeholder="Date">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button onCLick="getInput()" type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</fieldset>
</form>

Angular get all form input value

I have this form:
<form class="form-horizontal" role="form" name="form" ng-submit="update(profile)">
<div class="form-group">
<label class="col-md-2 control-label">Facebook</label>
<div class="col-md-10">
<div class="input-group">
<input type="text" ng-model="profile.facebook" class="form-control" placeholder="Facebook" />
<span class="input-group-btn">
<button ripple-button color="facebook" icon="facebook"></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Instagram</label>
<div class="col-md-10">
<div class="input-group">
<input type="text" ng-model="profile.instagram" class="form-control" placeholder="Instagram" />
<span class="input-group-btn">
<button ripple-button color="instagram" icon="instagram"></button>
</span>
</div>
</div>
</div>
</form>
My Controller:
Profile.get((resp)=>{
$scope.profile = resp.result;
});
//resp.result is: {"id":"Hf561b6fd32aec6ea","name":"Example","nickname":"Example 1", "facebook":"example","instagram":"example"}
$scope.update = (profile) => {
console.log(profile);
}
Here's the workflow: First all I will get profile from the server and put all ng-model profile.* value. And user can edit the value and submit.
The Problem: I want to get all value from the form at once. My ng-submit is working properly and it return profile value.
My question is how can I only get the form key and value based on form instead of getting all the profile key?
my console.log return this:
{"id":"Hf561b6fd32aec6ea","name":"Example","nickname":"Example 1", "facebook":"thisischange","instagram":"thisischange"}
Thanks.

You can get it using jQuery:
var object = {};
$('.form-horizontal').serializeArray().forEach(pair) {
object[pair.name] = pair.value;
});

Form gets submitted even if the required fields are left empty in angular JS

I am newbie to angular JS and i have created a form which is
HTML
<div data-ng-controller="ReservationController"
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-10">
<label>Guest Name</label>
<input type="text" class="form-control" placeholder="" ng-model="res_guest_name" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>Phone</label>
<input type="phone" class="form-control" ng-model="res_member_phone">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>FAX</label>
<input type="phone" class="form-control" ng-model="res_member_fax">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>Email</label>
<input type="email" class="form-control" ng-model="res_member_email" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-8 col-sm-10">
<button type="submit" class="btn btn-success" ng-click="res_save()">Save Changes</button>
</div>
</div>
</form>
</div>
CONTROLLER
function ReservationController($scope, $http, $cookieStore,$location,$filter) {
$scope.res_save = function()
{
var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
alert('success');
});
}
}
My form gets submitted even after the required fields are left empty. it shows the error, then it gets submitted.

Obviously it will submit the form you didn't handled the submission of form.You just managed the errors :-)
Use ng-disabled="myForm.$invalid"
where myForm is the name field on form
<form class="form-horizontal" name="myForm" role="form">
<button type="submit" class="btn btn-success" ng-disable="myForm.$invalid" ng-click="res_save()">Save Changes</button>
If you don't want the button to be disable till then you can use
<button type="submit" class="btn btn-success" ng-click="res_save(myForm.$valid)">Save Changes</button>
And in controller
$scope.res_save = function(valid)
{
if(valid){
var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
alert('success');
});
}
}

You are not checking for Form valid state before saving it , don't expect angular to magically stop saving when form is invalid.

You should look into the documentation for ng-submit. If you move the res_save function into an ng-submit on the form (and removed the ng-click on the submit input) it will validate against required fields, prevent execution of the function until they are valid.