Concatenate values from drop down along with user input - javascript

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 += ...;
}

Related

Automatically fill out textarea field from my database when selecting dropdown menu item

How can I automatically fill a textarea field with the text from the database and automatically display the associated text when selecting an item from the dropdown menu.
Textarea field were I want to post the data in:
<textarea
class="dropDown" Name="dropdownItem" Type="Text" id="dropdownItem" placeholder="New Option"
></textarea>
Thats only a quick try that prints out the same input as the dropdownItem from my database.
<script>
var select = document.getElementById('select');
var input = document.getElementById('TextAreaTemplate');
select.onchange = function(){
input.value = select.value;
}
</script>
I already connect to the database, but I just don't know how to do this.
Do I need more JavaScript?
What you are doing here is only putting the value from your input to your textarea.
You need to make a query to your database with the value you get from your input.
I guess your connection is made via PHP (since you put the PHP tag), so I would recommend you to use AJAX request to create your query with the value from your input.
Then, your response should contain the associated text to display in the textarea.
I found this resource which show the basis of AJAX and PHP if you need, but you probably can find better.

SharePoint JavaScript read value of rich text multiline field

I have a SharePoint solution and I will like to validate the Rich Text Multiline field. I have the following code incorporated.
The problem is that when save is initially selected the function picks up the value in the text box. If there is a validation error I will display an error message explaining to the user what must be changed. When the value in the text box is changed and save is selected a second time the original value is being picked up and not the update value in the text box.
How can I pick up the updated value in the multiline rich text box each time save is selected?
function findFieldControl(fieldTitle)
{
var control = $('[title="' + fieldTitle + '"]');
return control;
}
function PreSaveAction(){
var commentsBox = findFieldControl('Comments')
alert(commentsBox.val());
}

AngularJS - Replace values in array based on input text box changes

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;
}

Populating two separate input fields with unique text values passed in by multiple buttons using javascript

Working on a small personal project with jQuery and JavaScript. This is a one page app on a static website.
The game (if you can call it that) asks the user to select 2 characters from the selection area and pressing enter transfers the input to the "battle-area" where when you hit the "fight" button random numbers are subtracted form the characters hitpoints as attack dmg.
I am stuck on the selection part. I need two separate input fields populated with unique names. I am able to write text into the field and transfer it but I want the input fields to be populated by clicking on the individual pictures on the screen. My code seems to populate both fields at once. I can hardcode two buttons to each populate one input field, the problem is that I have about 15 image buttons and I need to be able to click either of those to populate the fields.
function selectFighter(name) {
var x = name;
var input = $('#fighter1_name').val();
$('#fighter1_name').val(x);
if ($('#fighter1_name').val() != "") {
$('#fighter2_name').val(x);
}
}
I have tried to add a condition that checks the first input field for a value and if it is NOT empty, to instead write the input into the second field. But that is causing one button click to populate both fields. I need one button click to populate one field, and then when I click another button to populate the other, empty field.
I am passing in a name with an onclick event: onclick="selectFighter('bob');"
Problem is when I click the image, both fields are populated with the same name. I want to be able to click an image to populate one input field, and then click a different image and put that name in the input field.
This should do the trick. We're checking if the first field has a value - if so, we populate the second one - otherwise the first one.
function selectFighter(name) {
if ($('#fighter1_name').val()) {
$('#fighter2_name').val(name);
} else {
$('#fighter1_name').val(name);
}
}
Add a class to the elements you click, and an ID, and remove all inline javascript.
Then add a script tag with the event handler targeting the elements
$('.toBeClicked').on('click', function() {
var x = $(this).data('name'); // note that "name" is not a good name for a variable
var f1 = $('#fighter1_name');
var f2 = $('#fighter2_name');
f1.val() === "" ? f1.val(x) : f2.val(x);
});
$('#clear').on('click', function() { $('input[id^=fighter]').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toBeClicked" data-name="bob">Bob</button>
<button class="toBeClicked" data-name="jon">Jon</button>
<button class="toBeClicked" data-name="ann">Ann</button>
<br><br>
Fighter 1 <input id="fighter1_name"><br>
Fighter 2 <input id="fighter2_name">
<br><br>
<button id="clear">Clear</button>

JS and jQuery - loop through textboxes and store 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 = '';

Categories