I have 14 rows of 5 td cells. In each one is a radio button. I want the user to be able to click anywhere in the table cell in order to select its radio button. Each row is created thus:
#for (int i01 = 1; i01 <= 5; i01++) {
<td id="tablecellradiobutton" onMouseover="this.bgColor='88,150,183'" onMouseout="this.bgColor='white'" onclick="#('Q01' + i01).checked = true">
#Html.RadioButton("Q01", i01, Q01 == i01.ToString(), new { id = "Q01" + i01 })
</td>
}
However, my onClick is falling over, giving me the error:
Compiler Error Message: CS1012: Too many characters in character literal
This really ought to be damn simple to do without a JavaScript (or jQuery) function, but I think I'm becoming resigned to needing one. But could someone help me to correct my code?
I can't correct your existing code, but you are going to have multiple instances of thesame id:
<td id="tablecellradiobutton"...
you need to create individual ids for each td - probably appending the tr and td index number to the existing id would be the go.
I would use jQuery and using find() get the input within the td that was clicked and set its checked property to true. Note the use of the document.on... which will allow dynamically added content to be targeted as well as static content. Don't forget the $(document).ready... if you don't already have it.;
$(document).on('click','td',function(){
$(this).find('input [type="radio"]').prop('checked',true)
});
Related
Im a newbie trying to make a progressive website. I want the users to go through 7 tests on each level and only if they complete 4/7 tests successfully will they be allowed to progress to the next level (webpage). How do i add this condition check of 4/7 successful completions to my button which will take the user to the next page?
Set the button's display to none in css
#buttonToNextPage{
display : none;
}
Using a variable in javascript to keep track of the number of tests your user has answered. The variable can start from 1 and go upto 4
var testAnswered = 1;
Every time the user answers a new test, you can increment the number by 1 by triggering a function. After incrementing, within the function u should check if the value has reached 4.If yes, you display the button using javascript. The function must look something like this:
function newTestAnswered(){
testAnswered = testAnswered + 1;
if(testAnswered == 4){
document.querySelector('#buttonToNextPage').style.display = block;
}
}
Hope this helped☺
i am currently working on to display the value in textboxes after adding row to the table. I am new to angular and seems i could not find the solution. At the moment, everytime i click on the Add button, the table will add new row but somehow the value that i have entered previously are gone. I need to make the value stays in the textbox every time the user adds new row.
Here is the source code that i have done:
https://stackblitz.com/edit/angular-hxduqp
Thank you.
That happens when you have multiple inputs with the same name.
One way to fix it is by giving your input names a suffix of your iterator i:
<input ... [name]="'from' + i" ...>
Here is your StackBlitz corrected:
https://stackblitz.com/edit/angular-bgdgpr?file=src/app/app.component.html
You just remove the name from the form control if not required else you need to provide the unique name to each control.
Working copy is here - https://stackblitz.com/edit/angular-gpq9nc
I am working on a web based form that needs to have the flexibility to add as many entries as the user needs. This means that a chunk of my form needs to be able to repeat it's self an undefined number of times it might be 1 or 2 or it could be 50. Is there a method of dynamically repeating form elements?
For completion, here is a pure JS solution:
You can create a JavaScript variable which contains the HTML text for the elements you want to create:
var formHtml = "<input type='text' name='inp'>"
And then you can insert the formHtml variable to the end of a DOM element called yourId by:
document.getElementById("yourId").innerHTML += formHtml;
Update: JSFiddle link: https://jsfiddle.net/zjd3g0cy/
You can append input field to the form using
$('.selector').append("<input type='text' name="xyz[]" />");
I have this code in HTML:
<table cellspacing = "0" cellpadding = "0" width = "100%" border="0">
<td class="TOlinha2"><span id="Co">140200586125</span>
I already have a VBA function that accesses a web site, logs in and goes to the right page. Now I'm trying to take the td tags inside a table in HTML. The value I want is 140200586125, but I want a lot of td tags, so I intend to use a for loop to get those tds and put them in a worksheet.
I have tried both:
.document.getElementByClass()
and:
.document.getElementyById()
but neither worked.
Appreciate the help. I'm from Brazil, so sorry about any English mistakes.
There is not enough HTML to determine if the TOlinha2 is a consistent class name for all the tds within the table of interest; and is limited only to this table. If it is then you can indeed use .querySelectorAll
You could use the CSS selector:
ie.document.querySelectorAll(".TOlinha2")
Where "." stands for className.
You cannot iterate over the returned NodeList with a For Each Loop. See my question Excel crashes when attempting to inspect DispStaticNodeList. Excel will crash and you will lose any unsaved data.
You have to loop the length of the nodeList e.g.
Dim i As Long
For i = 0 To Len(nodeList) -1
Debug.Print nodeList(i).innerText
Next i
Sometimes you need different syntax which is:
Debug.Print nodeList.Item(i).innerText
You can seek to further narrow this CSS selector down with more qualifying elements such as, the element must be within tbody i.e. a table, and preceeded by a tr (table row) and have classname .TOLinha2
ie.document.querySelectorAll("tbody tr .TOlinha2")
Since you mentioned you need to retrieve multiple <td> tags, it would make more sense to retrieve the entire collection rather than using getElementById() to get them one-at-a-time.
Based on your HTML above, this would match all <span> nodes within a <td> with a class='TOlinha2':
Dim node, nodeList
Set nodeList = ie.document.querySelectorAll("td.TOlinha2 > span")
For Each node In nodeList
MsgBox node.innerText ' This should return the text within the <span>
Next
So I am making a data entry program where the user presses buttons to generate new inputs (numbers text etc.) and when finished the lists are generally between 100-10000 items.
The program has been coming along well, but now I am at a point where one set of data entered must generate the coices for an array [1,2, . . .] which is part of a later set of data.
So what I have done is setup buttons with the ID based on the earlier inputs. (The whole data set is saved as a JSON)
And what I want to do is when the button is pressed it looks pressed and writes to an HTML element the ID of the button which will later be read and saved to JSON.
My problem is centered on getting the correct information back to the user.
function doStuff(container){
for (var u = 0, c = someJSON.length; u < c; u++){
var someButton = document.createElement('button');
someButton.id = someJSON.id;
someButton.className = 'someButton';
someButton.onclick = function() {
writeIDToHTML(container,someButton,someButton.id);
}
container.appendChild(someButton);
}
}
function writeIDToHTML(container,theButton,theID){
console.log("theID")
console.dir(theID)
}
This prints only the last ID in the loop. How do I get each ID to each button?
The other thing to do is to give the button a pressed look.
Bonus points if it is reversable.
You should not add a listener on each element. The way to do it is adding a listener on the container and get the id of the clicked event (via event.target). This is called event delegation.
I could explain it, but this guys made a perfect answer to your question : http://davidwalsh.name/event-delegate
Btw, you should consider using a library like jquery to manipulate your DOM. It implements event delegation and advanced cross browser DOM manipulation utilities. For instance, you would not need to add a 'container' property since you can access it by the parent() method.