I want to send an input value to more than one data. I searched but couldn't find it, how can I do it?
How can I do without method?
<input type="text" v-model="money_transfer.amount"/>
money_transfer: {
amount: '',
source_amount: '',
target_amount: '',
},
You can use this syntax to pass input value to multiple variables:
<input
:value="money_transfer.amount"
#input="money_transfer.amount = money_transfer.source_amount = money_transfer.target_amount = $event.target.value"
>
Related
So I made this codepen here https://codepen.io/shodoro/pen/xxYqXqv?editors=1111
I am trying to get whatever I type into my input form to display in my console, but everytime I type something it just shows " "
Right now I understand that I set my data to be " ", but I don't know how to make what I type to display
heres the html
<form>
<input type="text" placeholder="Street" id="street" onchange="updateInfo()">
<input type="text" placeholder="City" id="city" onchange="updateInfo()">
<input type="text" placeholder="Zipcode" id="zipcode" onchange="updateInfo()">
</form>
Here's the javascript
function updateInfo() {
const url = ""
const data = {
Street: '',
City: '',
Zipcode: '',
}
document.getElementById('street').value = data.Street
console.log('hi', data.Street)
}
Note eventually I will want to integrate this with a backend API, so whatever I type will update into the API data, but for now I just want to confirm my inputs work first
You are not getting the data you are typing as you are not looking for it.
Forms are submitted on button clicks unless the type of the form button is specifically not submit type. You need to prevent your form from submitting using the preventDefault method.
Add to that, you are assigning the empty field of the Data object into the input field's value. I think what you are trying to achieve is
data.Street = document.getElementById('street').value;
Change this
document.getElementById('street').value = data.Street
to
data.Street = document.getElementById('street').value
I'm using the ajduke:bootstrap-tagsinput` package and I'm trying to store the array in:
$('#dealTags').tagsinput('items')
in my deals collection, but the value of:
$(e.target).find('[name=dealTags]').val()
comes back as undefined. I'm a newbie to Meteor and Javascript, so sorry if this is a dumb question. Here is the form field:
<div class ="controls">
<input id="dealTags" type="text" class="form-control" value="" placeholder="Add some tags..." data-role="tagsinput">
</div>
And here I try to insert the data to my collection in the Template
var deal = {
dealTitle: $(e.target).find('[name=dealTitle]').val(),
venueName: $(e.target).find('[name=venueName]').val(),
when: $(e.target).find('[name=when]').val(),
dealTags: $(e.target).find('[name=dealTags]').val()
};
And my collection method doing the actual writing to DB
Meteor.methods({
dealInsert: function(dealAttributes) {
check(Meteor.userId(), String);
check(dealAttributes, {
dealTitle: String,
venueName: String,
when: String,
dealTags: String
});
Thanks!
I think you need to use the select element instead of input to have val() return an array. (see documentation)
<div class ="controls">
<select multiple id="dealTags" type="text" class="form-control" value="" placeholder="Add some tags..." data-role="tagsinput" />
</div>
Another solution is to keep using the input element, but call .tagsinput('items') instead of val()
var deal = {
dealTitle: $(e.target).find('[name=dealTitle]').val(),
venueName: $(e.target).find('[name=venueName]').val(),
when: $(e.target).find('[name=when]').val(),
dealTags: $(e.target).find('[name=dealTags]').tagsinput('items')
};
I am new to HTML forms and I was wondering how I can easily (or not) change it's input to a JavaScript variable. Here is my code:
<head>
<title>Begin</title>
<link type="text/css" rel="stylesheet" href="begin.css"/>
</head>
<body>
<form action="begin-create-done.html" method="get">
First Name: <input type="text" name="firstname">
<br>
Last Name: <input type="text" name="lastname">
<br>
<br>
New Username: <input type="text" name="user">
<br>
Password: <input type="password" name="pass">
<br>
Repeat Password: <input type="password" name="rpass">
<input type="submit" value="Submit">
</form>
</body>
</html>
I want each part of the form (e.x. First Name, Last Name, New Username, etc.) to be it's own JavaScript variable. Thank you very much!
Accessing HTML input elements from JavaScript
Assuming you don't have other elements with same names, you can access input values from JavaScript by name as follows:
var firstName = document.getElementsByName("firstname")[0].value;
You now have the value from firstname field in JavaScript variable called firstName. Just keep repeating and you got the other input fields too. You can then proceed and wrap these statements to a function and call it when input data changes. For example:
function formChanged() {
var firstName = ...
var lastName = ...
}
Now register this function call to change / keyup events and you have a function that monitors changing form values:
<input type="text" name="firstname" onkeyup="formChanged()" onchange="formChanged()"/>
Should you prefer a more structured approach, or if you have more than one form on the page, you could:
Create an object that will hold all form values and update them. After that you could simply access them with formValues.inputName.
Store your default values in an array (in the same order as your inputs).
Execute a function that will take care of outputting the default values & updating the object when the values are changed. It takes the form (selected by Id, Class, whatever) and an array of default values as parameters.
// create the object that will hold the input values
var formValues = {};
// store code in the function for a more 'modular' approach
function inputObj(formNR, defaultValues) { // where defaultValues is an array
var inputs = formNR.getElementsByTagName('input');
for ( var i = 0; i < inputs.length; i++) {
if(inputs[i].type === 'text' || inputs[i].type === 'password') {
formValues[inputs[i].name] = defaultValues[i]; // store default in object
}
inputs[i].value = defaultValues[i]; // output default in input
inputs[i].addEventListener('keyup', function() { // update object on change
formValues[this.name] = this.value;
}, false);
}
}
// build a little array with the defaultValues for each input
var defValues =['defaultFirstName','defaultLastName','defaultUser',
'defaultPass','defaultPass'];
// this will push all inputs from the given form in the formValues object.
inputObj(document.forms[0], defValues);
// Access the values like this, eg.
console.log(formValues.firstname); // will return 'defaultFirstName'
See it in action here. Or with CodeView. Note: The code in the example has some additions to show the object's values on the page.
Try to first create a function that grabs the value from the input field:
<script>
function XX()
{
var first2 = document.getElementById("firstname").value;
}
</script>
Then you have to fire it up when the input changes with onchange:
FirstName: <input type="text" id="firstname" name="firstname" onchange="XX()">
I am trying to build a diary for travellers with html5 local storage.
The idea is that you fill in a form: Name, picture, date, location.
and at the other page this information will be showed
I'm stuck because I don't know how I can give more value`s to 1 key
and how I can automatically change the key after information from the
form has been saved.
<form id="localStorage" method="post" action="">
<label>Kies foto:</label>
<br/>
<input type='file' id="afbeelding" />
<br/>
<br/>
<label>Onderschrift:</label>
<br/>
<input type="Onderschrift" name="Onderschrift" id="Onderschrift" class="Opslaan" required />
<br/>
<br/>
<button onclick="opslaan()" type="button">Verstuur</button>
</form>
function opslaan() {
var inputOnderschrift = document.getElementById("Onderschrift");
localStorage.setItem("onderschrift", inputOnderschrift.value);
}
As far as I know Local storage is for string key/value pairs. Though you can build a custom object, stringify it and store it, similar to this:
var myObject = { name: 'myname', address: 'myaddress' };
localStorage.setItem("myObject", JSON.stringify(myObject));
Then on the way back use JSON.parse(); to return it back into an object and re-populate your form.
You can store an object with the user data (JSON stringified).
For example:
var userData = {
'name': '',
'picture': '',
'date': '',
'location': ''
};
var inputOnderschrift = document.getElementById('Onderschrift');
userData.name = inputOnderschrift.value;
var inputPicture = document.getElementById('Picture');
userData.picture = inputPicture.value;
// etc.
localStorage.setItem('userData', JSON.stringify(userData));
In your next page you can retrieve the data like this:
var userData = JSON.parse(localStorage.getItem('userData'));
var name = userData.name;
var picture = userData.picture;
I made an array to put more value`s in 1 key and it worked
Let's say, we have an object like:
$scope.company = { name: { de: '', en: '' } };
and an input field saying:
<input type="text" ng-model="company.name[currentLanguage]" />
<button ng-click="currentLanguage='de'">Deutsch</button>
<button ng-click="currentLanguage='en'">English</button>
If the user fills in this field, the field receives the ng-valid class. If the user then changes the language ($scope.currentLanguage in fact), the input field is correctly updated (gets empty), but it has still the ng-valid class, which is wrong. The expected behavior would be rather ng-pristine. How to update this in real time?
Would be great to know that.
Cheers
PS. There isn't any more code. That's just it.
PS2. It is another Problem as you suggest in the duplicate thread. I do not use ng-repeat.
Once an input's value is changed in any way, it doesn't reset to ng-pristine unless you force it to.
You could manage the classes in your controller like so:
$scope.currentLanguage = 'de';
$scope.company = { name: { de: '', en: '' } };
$scope.setCurrentLanguage = function(str) {
$scope.currentLanguage = str;
var input = angular.element(document).find('input')[0];
if ($scope.company.name[str] == '') {
angular.element(input).removeClass('ng-dirty');
angular.element(input).removeClass('ng-invalid');
angular.element(input).addClass('ng-pristine');
} else {
angular.element(input).removeClass('ng-pristine');
angular.element(input).addClass('ng-dirty');
}
}
and in the html:
<input type="text" ng-model="company.name[currentLanguage]" />
<button ng-click="setCurrentLanguage('de')">Deutsch</button>
<button ng-click="setCurrentLanguage('en')">English</button>