Input individually clears the value of v-model - javascript

Using vue, is there any way to clear the input value individually?
Because a lot of input will be used, writing in this way will have a lot of functions.
But you can’t use loops, because there are actually different fields
<input v-model="name" type="text" placeholder="name">
<span #click="clearName()" v-if="this.name.length > 0">x</span>
<input v-model="email" type="text" placeholder="email">
<span #click="clearEmail()" v-if="this.email.length > 0">x</span>
<input v-model="address" type="text" placeholder="address">
<span #click="clearAddress()" v-if="this.address.length > 0">x</span>
method:{
clearName(){
this.name=''
}
clearEmail(){
this.email=''
}
clearAddress(){
this.address=''
}
}

You can use a common method name that accepts an argument. For example:
// JS
clearField(fieldName) {
this[fieldName] = '';
}
// HTML
<input v-model="name" type="text" placeholder="name">
<span #click="clearField('name')" v-if="this.name.length > 0">x</span>
<input v-model="email" type="text" placeholder="email">
<span #click="clearField('email')" v-if="this.email.length > 0">x</span>
<input v-model="address" type="text" placeholder="address">
<span #click="clearField('address')" v-if="this.address.length > 0">x</span>

Make one function and pass the property name as parameter then access it using [] :
clear(property){
this[property]=''
}
or just do an inline instruction :
<input v-model="name" type="text" placeholder="name">
<span #click="name=''" v-if="this.name.length > 0">x</span>

Related

How can I select multiple span elements?

If I select my span element by ID it gets executed but I want to select multiple span elements. I tried with class and name but it also not working.
const uname = document.getElementById('fname')
const form = document.getElementById('form')
const errorElement = document.getElementById('formerror')
form.addEventListener('submit', (e) = \ > {
let messages = \ [\]
if (uname.value === '' || uname.value == null) {
messages.push("Name is required")
}
if (messages.length\ > 0) {
e.preventDefault()
errorElement.innerHTML = messages.join(', ')
}
})
<div id="error">
<form name="signupform" action="signupdetails.php" method="get" id="form">
<input type="text" class="text" placeholder="Username" id="fname"><b><span id="formerror"></span></b>
<input type="text" class="text" placeholder="Roll:no" name="froll"><b><span id="formerror"></span></b>
<input type="email" class="text" placeholder="Email" id="femail"><b><span id="formerror"></span></b>
<i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i>
<input type="password" class="text" placeholder="Password" id="password1" name="fpass">
<i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i>
<input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass">
<button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
</form>
</div>
An id should be unique in the entire document, see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
Use a class on your span elements and query them with document.querySelectorAll('.formerror').
const uname = document.getElementById('fname')
const form = document.getElementById('form')
const errorElements = document.querySelectorAll('.formerror')
console.log(errorElements)
<div id="error">
<form name="signupform" action="signupdetails.php" method="get" id="form">
<input type="text" class="text" placeholder="Username" id="fname"><b><span class="formerror"></span></b>
<input type="text" class="text" placeholder="Roll:no" name="froll"><b><span class="formerror"></span></b>
<input type="email" class="text" placeholder="Email" id="femail"><b><span class="formerror"></span></b>
<i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i>
<input type="password" class="text" placeholder="Password" id="password1" name="fpass">
<i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i>
<input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass">
<button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
</form>
</div>
Just had a somewhat similar issue to this, & as others have already mentioned. You will want to change this snippet of code below in you're javascript
document.getElementById('formerror')
To instead
document.querySelectorAll(".formerror") // Be sure to also change from and ID to instead using classes for the form error
Also as ID's are only meant to be used once, trying to assign them and use them more than once should not work as they are meant to be unique to one element. So this is why you should instead transition to adding them as classes instead.
Now as for when you are trying to access you're span elements by Javascript, since there is more than one span element. You will need to ensure that you use the "querySelectorAll" function as this will allow you to target all of you're span elements. Otherwise if using just the "querySelector" it will only apply to the first span element, while the other two span elements remain un affected.
Hope this could help to add a bit of insight and clear some things up for you.
First change the id to a class attribute, because the id should be unique to the entire document.
<span class="formerror"></span>
Then Instead of using document.getElementById(), use document.querySelectorAll(".formerror").
It will solve your problem.

Is there a vanilla JavaScript way to change the value of an input field

What I am trying to achieve is for the value of the id="origin" input field to be updated as you type in the id="pickup" field.
const pickup = document.querySelector('#pickup')
const dropoff = document.querySelector('#dropoff')
const origin = document.querySelector('#origin')
const destination = document.querySelector('#destination')
const submit = document.querySelector('#submitForm')
pickup.addEventListener('input', (e) => {
origin.value = e.target.value
})
.hidden {
opacity: 0;
}
<form>
<div class="form-group">
<label for="pickup">Pickup</label>
<input type="text" class="form-control" id="pickup" aria-describedby="pickupHelp">
<input type="text" class="form-control hidden" id="origin" value="empty">
<small id="pickupHelp" class="form-text text-muted">Enter your pickup location</small>
</div>
<div class="form-group">
<label for="pickup">Drop-off</label>
<input type="text" class="form-control" id="dropoff" aria-describedby="dropoffHelp">
<input type="text" class="form-control hidden" id="destination" value="">
<small id="dropoffHelp" class="form-text text-muted">Enter your drop-off location</small>
</div>
<button type="submit" class="btn btn-primary" id="submitForm">Submit</button>
</form>
I found the solution I was looking for. Sorry for not clearly stating what I wanted to do.
pickup.addEventListener('input', (e) => {
//changed to .defaultValue instead of just .value
origin.defaultValue = e.target.value
})

Addition, Subtraction and Division simultaneously on JavaScript

I have this text box:
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared" class="form-control" />
</div>
I want to divide sum_cleared by 0.85 then multiply the result by 0.94 and subtract it from the original value that is typed in sum_cleared and show the final result in:
<div class="form-group">
<label>Sum of Total</label>
<input type="text" name="sum_total" id="sum_total" class="form-control total" readonly/>
</div>
I want to do this dynamically using the onchange and oninput events so it updates the value of sum_total as the user types the value on sum_cleared.
What is the easiest way to accomplish this?
Thank you so much
I was able to do it doing the following:
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared"
class="form-control"
oninput="GetTotal(this.value)" onchange="GetTotal(this.value)"/>
</div>
<div class="form-group">
<label>Total Commission</label>
<input type="text" name="sum_total" id="sum_total"
class="form-control total" readonly/>
</div>
Then adding a small script:
<script type="text/javascript">
function GetTotal(valNum) {
document.getElementById("sum_total").value=valNum/0.85*0.94-valNum
}
</script>
you can do like:
const input = document.querySelector('#sum_cleared');
const output = document.querySelector('#sum_total');
input.addEventListener('input', update);
input.addEventListener('change', update);
function update() {
const updated = input.value - ((input.value / 0.85) * 0.94);
output.value = updated;
}
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared" class="form-control" />
</div>
<div class="form-group">
<label>Sum of Total</label>
<input type="text" name="sum_total" id="sum_total" class="form-control total" readonly/>
</div>

(ngModelChange) delete last symbol (Angular)

I have 2 inputs where I enter value and concat it into new one
Here is code from HTML
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.firstName" required maxlength="32">
<validation-messages [formCtrl]="firstNameInput"></validation-messages>
</div>
<div class="form-group">
<label>{{l("LastName")}}</label>
<input #lastNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.lastName" required maxlength="32">
<validation-messages [formCtrl]="lastNameInput"></validation-messages>
</div>
And concat value I show in this field
<div class="form-group">
<label>{{l("OrganizationName")}}</label>
<input #organizationName="ngModel" class="form-control" type="text" name="organizationName" [(ngModel)]="landlord.organizationName" required maxlength="500">
<validation-messages [formCtrl]="organizationName"></validation-messages>
</div>
Here is code from ts file
onNameChange() {
this.landlord.organizationName = `${
this.landlord.firstName ? this.landlord.firstName : ''
} ${this.landlord.lastName ? this.landlord.lastName : ''}`;
}
My problem, that last character is deleted from firstName or lastName
How I can fux this stuff?
Your ngModelChange event is firing before the model is actually updated, so with the current value at the time the event is fired, prior to the change. Likely to do with the ordering of (ngModelChange) and [(ngModel)] in your template.
Change your event to fire on (input) and it will get the most recent value.
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" (input)="onNameChange($event)" [(ngModel)]="landlord.firstName" required maxlength="32">
</div>
OR
Change the order of your attributes in your template:
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" [(ngModel)]="landlord.firstName" (ngModelChange)="onNameChange()" required maxlength="32">
</div>
Stackblitz: https://stackblitz.com/edit/angular-p7ecgh

How to dynamically add a new input if other are filled Angular

I have three inputs:
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
How to add a new input if this three inputs adn previous are filled ?
I am using angular route and I would rather use Angular.
Thanks.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" class="form-control" ng-model="field1" placeholder="Email" />
<input type="text" class="form-control" ng-model="field2" placeholder="Email" />
<input type="text" class="form-control" ng-model="field3" placeholder="Email" />
<input ng-show="field1.length && field2.length && field3.length" type="text" class="form-control" ng-model="field4" placeholder="Email" />
</div>
Assign each input a model and then use ng-show to only display the 4th input if the length of the models are truthy (ie: nonzero).
in your controller keep track of all the inputs that you need, starting from
$scope.inputs = [{value: ""}, {value: ""}, {value: ""}];
in your template you are going to iterate on this array to show the inputs yoou have
<div ng-app="main" ng-controller="MainController">
<div ng-repeat="input in inputs track by $index">
<input type="text" class="form-control" placeholder="Email" ng-model="input.value"/>
<button ng-click="remove($index)">Remove</button>
</div>
<button ng-click="addInput()">Add Input</button>
</div>
So when the remove button of an input is clicked that input gets removed if there are more than 3 inputs present
If the add input button is pressed we append an input text with a remove button
$scope.remove = function(index){
if($scope.inputs.length > 3){
$scope.inputs.splice(index, 1);
}
}
$scope.addInput = function(){
$scope.inputs.push({value: ""})
}
here is an example codepen

Categories