I have a simple text box -
<input type="text" class="form-control" id="inputID" name="ItemId" ng-model="inputItemId" ng-required="true" ng-blur="addValueToArray(inputItemId)"/>
The number of input boxes increase and decrease based on the user's choice (I have a simple add/subtract functionality that replicates the text boxes or removes them), but they ultimately are all stored in an array -
$scope.itemIDs = [];
$scope.addValueToArray = function(inputItemId)
{
$scope.validID = $filter('uppercase')(inputItemId);
$scope.itemIDs.push($scope.validID);
}
My $scope.itemIDs array holds all the IDs the user has entered in the various text boxes.
Say the values in this array right now are - ABC,ABD,ABE,ABZ for four different items.
What I wish to achieve now is, if a user decides to remove the second value ABD and replace it with ABW in the text box, based on how my function works, it ends up adding it after the last element of the array and looks like - ABC,ABD,ABE,ABZ, ABW.
Is there a way in angular where I could replace the entered value of the second value with the new one in the array instead of adding it in the end? Am I missing out on something?
Try something like this,
$scope.itemIDs = [];
$scope.addValueToArray = function(oldValue,newValue){
$scope.itemIDs[$scope.itemIDs.indexOf(oldValue)] = newValue;
}
Related
I have a checkbox function that when user checked on one of the specified value it will display an input text that will ask user to input a number and there will be another input text based on the number that user has put.
This is the example output
if user enter 2, there will be 2 input text will appear.
Now I have problem with pushing the tier name into my temp array. Below is what I have tried. But I'm still not getting any value inside my temp.
< script >
let temp = [];
$(document).ready(function() {
$("#staff_tier").change(function() {
let m = $(this).val();
$('#tier').html('');
var tier_num = 1;
for (var i = 0; i < parseInt(m); i++) {
$('#tier').append(`<label><b><span style="color:#e60000;">*</span><i> Tier (${tier_num++})</i></b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" placeholder="" id="tier_name" required >
</div>
`);
temp.push($('#tier_name').val());
}
console.log(temp);
});
}); <
/script>
What I'm trying to achieve is I want the input value got push into my temp. How do I fix this problem ?
There are a few things that you got wrong:
You're having a loop, but you always print an input field with the same id: <input id="tier_name">
You listen for a change on #staff_tier, but then you simply print some html code that is static. You need (after fixing #1) to add pieces (input fields), that also have listeners so that when they change - you get their value
After having separate inputs with listeners, you can have a global place where you store their values.
At this point, it would be much easier of you add any tiny reactive library (no need for React or anything huge). Search online, but any of the smaller ones would do the trick: Sinuous, Reef or even Preact.
I have an Input element in HTML (and a Javascript template) with empty Value. Throught AJAX and JQuery, I update the said value to a list of words split by comma. Each word should become green retangulars with an 'X' to remove it from the field. The same list of words works perfectly when I write it down in the code.
The problem is that when I put this very same string in the Value attrib. using JQuery, it just doesn't work properly. I just get plain text, and those fancy green retangulars only appear when I click inside the input field and hit TAB key. Then They become one item only and when I finally click to remove it, then they got split(!).
I have already tried using fadeOut() and fadeIn() and refresh method. Did not work.
Any ideas about this?
HTML:
<input id="tags_1" type="text" class="tags form-control" value="" />
AJAX/JQUERY:
var tags_x = tags_x.replace(/\,/g, ', ');
var tags_x = tags_x.split(',');
$('#tags_1').val(tags_x);
$('#tags_1').attr('value', tags_x);
$('#tags_1').fadeOut();
$('#tags_1').fadeIn();
Your id of the input is tags_1 but you are selecting it like #tags_1_tag. Why is that? I think maybe that could be the reason.
And by the way when you use var tags_x = tags_x.split(','); tags_x is an array now. If you want to put it in a value convert it to a string and then try to put it in the value attr. You can see an example below:
var new_x = tags_x.join('')
$('#tags_1_tag').val(new_x);
I try to do simple code for guessing notes by ear. I have tabs with several empty input fields and you need to put right numbers in these fields according to certain melody (for guitar fretboard) . One button shows first note, another button checks whether you put right or wrong number and depend on it approves or erase your number.
I know how to check every input field using its id's but can i do it such way that when i push 2nd button it get value from selected input and compare it to its placeholder or value attribute?
It is my codepen
https://codepen.io/fukenist/pen/BxJRwW
Script part
function showfirst() {
document.getElementById("fst").value = "12"
}
function show1other() {
var snote = document.getElementById("scnd").value;
if (snote == 9 ){
document.getElementById("scnd").value = "9";
}
else {
document.getElementById("scnd").value = "";
}
}
You can use document.querySelectorAll() to get all your inputs and loop over them.
Sample:
// Get all inputs as an array (actually NodeList, to be precise; but it behaves similar to an array for this use case)
var inputs = document.querySelectorAll('input');
// Function to reveal the first input's value
function showFirst(){
inputs[0].value = inputs[0].dataset.v;
}
// Function to check all values and clear input if wrong
function checkAll(){
inputs.forEach(function(input){
if(input.dataset.v !== input.value){
// Wrong answer, clear input
input.value = '';
}
});
}
<input data-v="12" size="2" value=""/>
<input data-v="9" size="2" value=""/>
<input data-v="8" size="2" value=""/>
<br/>
<button onclick="showFirst()">Show First</button>
<button onclick="checkAll()">Check All</button>
Notes:
I have used data-v to store the correct answer instead of placeholder as that attribute has a semantically different meaning
It may be out of turn but my two cents: Writing out entire songs like this by hand may become tedious. Consider using a JSON string or something similar to map out the tabs and use a templating framework to align them.. Some things you may need to look out for while designing something like this : Alignment of notes (successive notes, simultaneous notes), timing of the song, special moves like slide, hammer on etc.
It may be a better idea to make the Guitar Strings be a background element (either as a background-image or as absolutely positioned overlapping divs) (so You don't have to worry about the lines going out of alignment)
Reference:
HTMLElement.dataset
document.querySelectorAll
I have an issue with my code which might be quite obvious but I can't seem to find out the answer.
I have a drop down menu with pre-filled option values in it. Whenever a user clicks on any of the values, they get displayed on a text area using JavaScript. Here's my problem:-
If the user selects 'Hello World' from the drop down, it gets displayed in the text area. if the user types a string or number or anything after that in the text area, then selects the option 'How's your day going', it doesn't get concatenated to the text area, since the user made a change to the text area. How can I get it to concatenate the option values every time a different option is selected. Here's my code:-
HTML
<select name = 'type_of_call' id = 'type_of_call' onchange = 'run()'>
<textarea name = "comments" value = "comments" id = "comments" Required /></textarea>
JavaScript
function run(){
document.getElementById("comments").innerHTML += document.getElementById("type_of_call").value + ', ';
}
You want to set the textarea's value property, not the innerHTML property:
function run(){
document.getElementById("comments").value += ...;
}
Here's the function that checks if the form is complete.
So, what I'm trying to do:
If radio is not selected, throw a message.
If radio is "yes", but text is not entered, throw error.
If radio is "no" but text is entered, make the text empty.
If all is good, add stuff into `allResponses
The form was displayed 5 times, and input was as follows:
Yes a1
No
Yes a3
No
Yes
Now, this input should display an error since in 5th case, "yes" is selected but nothing is entered in the textbox.
However, I get this:
http://i.imgur.com/ya2CUp0.png
Also, the text is not being updated as in 1st and 3rd cases.
I don't know a lot about JS, so please provide me with as explained responses as you can.
EDIT: Complete code: http://pastebin.com/scNSNM2H
Thanks
You have this in a loop:
var exaggerationPart = document.getElementById('exaggeration').value
And then you check to make sure it has a value for each item. But you will get the same value each time.
You are creating multiple inputs with the same id, "exaggeration". This is invalid HTML. Id's must be unique. To correct this, you can increment the id the same as you are doing with other elements (such as, input[name='response"+thisJokeIndex+"']).
var exaggerationPart = document.getElementById('exaggeration' + thisJokeIndex).value
tipTD2.append("<input type='text' name='exaggeration' id='exaggeration" + tipIndex + "' size='70'>")
Working demo: jsfiddle.net/svvge/2
Edit: To clear the value of the text box, you must change the value property of the text box element. Right now you are just changing the value of a variable.
var exaggerationInput = document.getElementById('exaggeration' + thisJokeIndex).value;
var exaggerationPart = exaggerationInput.value;
exaggerationInput.value = '';