Accessing Text Label Value Javascript - javascript

Currently, I have a piece of java script that makes a table of cells where each cell has an ordered list of its number, a label, and a text box. A snippet of this code is written below:
<table id="drawAllQuestionsTbl">
<tbody><tr><td class="tbl">
<ol start="1">
<li>Sport 1: <input type="text" name="tq_g_0_guess" size="15"></li></ol></td></tr><tr><td class="tbl">
For brevity, I cut a lot of the extra stuff. In reality, this table is filled with around 10 replicas of this cell, where each cell has an ordered list with a label and text box. For the text box in this ordered list for instance, I can successfully access its value using document.getElementsByName("tq_g_0_guess"). However, my question is how to get the value of the label "Sport 1" next to this text box. Any ideas?

The following will give you the text of the li node. This will be Sport 1:.
var elParent = document.getElementsByName("tq_g_0_guess")[0].parentNode;
var labelText = elParent.innerText;
console.log(labelText); // Sport 1:
You can leverage labelText to further format the text to the desired result.
If you only want Sport 1, then you can substring the everything up to the colon
labelText.substr(0, labelText.indexOf(':'));

What about:
document.getElementsByName("tq_g_0_guess")[0].parentNode.innerText

writing in JavaScript:
var child = document.getElementsByName("tq_g_0_guess")[0]; // ok, must add a [0] after this.
var preTextNode = child.previousSibling;
var textContent = preTextNode.textContent; // this is the text you want.

Related

Get dynamic id attribute value from an element

I need to check if a text value is displayed into a dynamic field after expand the row.
I paste part of the code where the info is displayed. For the following code I have 10 rows in the screen with different IDs.
Post a screenshot with code, to not loose the code formatting.
Step by step of the text.
file name cypress.png
expand first row and check if the file name is displayed at attribute value for the dynamic field
If name not find in first row, expand next and check until find it.
New question:
How can I get the value attribute to compare it with the name of the file uploaded? I try to use invoke(attr, value) but it does not work.
<div class="bx--text-input__field-outer-wrapper">
<div class="bx--text-input__field-wrapper">
<input id="scenario-name-63add9a59b4cb45bc67d7bab"
type="text"
class="bx--text-input bx--form-item"
readonly=""
value="cypress1.png">
</div>
</div>
The issue is the id of the field that is dynamic.
I am able to list all the ids using the cypress code below.
//Expand all rows -** I know about multiple click but the idea is to use this block to do the loop**
cy.get('.bx--table-expand__svg')
.each(function($expand){
cy.wrap($expand).click()
})
**//Here I can list the id for each row, but I cant get the text for attribue value.**
cy.get('input[id*=scenario-]')
.each(function($scn,index,$scenarios){
cy.log($scn,index)
})
**//I try to use INVOKE, but it gets char by char e not the entire value.
//Here I can list the id for each row, but I cant get the text for attribue value.
There's a jQuery function that will do this
cy.get('input[id*=scenario-]')
.each(function($scn) {
const id = $scn.attr('id')
console.log('Exact id is: ', id)
})

Concatenate values from drop down along with user input

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

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

Display X & Y Value of Selected row/cell in a HTML Table

I have created a HTML table with clickable cells (td) within that table (Similar to Excel)
I have an input field (read only)
<input type="text" readonly="">
I want to display the coordinates of where the user is clicked when they click on the table in this input field.
For example if a user is clicked on a cell which corresponds on X axis to Name 2 and Y axis to 16, then I want the input field to say "Name 2 | 16"
It is a reference display so the users can see what they are clicked on in a cluttered grid. Excel does this when u click on any cell within Excel.
I have created a jsfiddle here
http://jsfiddle.net/37PGT/
Looking for some assistance.
Add an id of cellRef to the input, then in your mouseup handler add this code:
var row = $(this).closest('tr').index() + 1;
var cell = $(this).index();
$('#cellRef').val(row + ' | ' + cell);
Updated fiddle
To get the label of the row (so you can format the input to be Name 1 | 1, use this line to set row:
var row = $(this).closest('tr').find('td:first').text();
Well I can suggest the following:
var rowIndex= jQuery.ArrayIn($(this).parent(),$('#tableID tr'));
var columnIndex=jQuery.ArrayIn($(this),$(this).parent().children('td'));
It may be possible that your script would become busy for such operation. I rather would recommend you that you store your custom attribute such as row Number and column number on each <td> and that would even make your operation not only easy but also scale-able to provide much more functionality than just selection.

how to add a color to a line in sharepoint 2007 list that has a specific text?

I would like to know how to add a color to a line in sharepoint 2007 list
if in one field there is a specific text contained ?
for example :
I have a list that have three fields:
list1
1.id
2.name
3.full description
now i want to show only the first and the second field to the user.
list1
id name
1 abc
2 edv
second thing, i want to give a color (let say red) to a row that contains in the hidden
field - "full description", a text with the word for example 'color'.
I found a javascript code that i can add to the aspx page :
(document).ready(function(){
$Text = $("td .ms-vb2:contains('color')");
$Text.parent().css("background-color", "red");
});
but it's only works if the the "full description" is shown.
can someone give me an idea ?
thanks,
gadym
Have you considered creating a data view with conditional formatting? See http://office.microsoft.com/en-au/sharepointdesigner/HA100996241033.aspx
That way you won't have to do this ugly javascript hacking :)
One idea could be to use a calculated column to search the other field for the prescence of your text string - then base the jQuery logic on that calcualted column.
However you mention a description field which is probably defined as "Multiple lines of Text" and these can't be used in calculated columns.
How about outputting the Description field but then using some jQuery to hide it from view with .hide()?
I can't give you the exact javascript to do this right now but if you need any inspiration then Christophe's blog is a great place to start.
From your question I understood that you could highlighted the row which comes a particular text (color) , but couldn't hide that column. In the blow code I have hided that column. You may need to change the column index.
<script>
$(document).ready(function(){ $Text = $("td .ms-vb2:contains('color')"); $Text.parent().css("background-color", "red");
var myelement = $Text.parent().parent();
$(myelement).find("td:nth-child(3)").hide();
$(myelement).find("th:nth-child(4)").hide();
});
</script>
Please let me know, is this helps you?

Categories