Develop Reference

Getting radio button group values using only CSJS

I've read a similarly entitled article but it didn't really provide a client sided solution.
I have a radio button group that will determine whether or not other things will be visible or hidden. I have code that will retrieve the value of this RBGroup in a xp:scriptBlock.
function getPTValue (bName) {
var pt=null;
for(var i=0; i<document.forms[0].elements.length; i++){
if(document.forms[0].elements[i].name=="#{id:PayType}" ){
if(document.forms[0].elements[i].checked == true){
pt=document.forms[0].elements[i].value;
break; //remove this if for check box groups and collect multiple values above instead
}
}
}
return pt
}
Here is the radio button group;
<xp:radioGroup
id="PayType"
value="#{FInvoiceDoc.PayType}"
defaultValue="Hourly"
style="color:rgb(0,0,0)">
<xp:selectItem itemLabel="Hourly" itemValue="Hourly"> </xp:selectItem>
<xp:selectItem itemLabel="Fixed" itemValue="Fixed"></xp:selectItem>
<xp:eventHandler event="onclick" submit="true" refreshMode="norefresh">
<xp:this.script><![CDATA[payTypeVis();]]></xp:this.script>
</xp:eventHandler>
</xp:radioGroup>
This works great while the document is in edit mode, but if I open it in readonly mode, the above routine gets executed, but doesn't return the value of the radio button group.
It appears that in read-mode, it shows the the payType radio-button group as a quasi-computed field. No buttons, just the value. I try retrieving it with a XSP.getElementById("#{id:payType}").innerHTML and I get the value but with lots of HTML tags around it. (.value returns nothing)
How do I properly retrieve a radio button group value on a document in read mode using strictly CSJS?

The value of the field will not change in read mode, so for handling it in read mode, set a CSJS variable using the Script Block control and pulling directly from the bound field. Script Block controls allow you to run SSJS / Java as well, so:
var invDocPayType = "#{javascript:FInvoiceDoc.PayType}";
Set the rendered property so it only shows if the document is in read mode, so:
if (view.isRenderingPhase()) !FInvoiceDoc.isEditable();
Then in CSJS, check whether that variable exists (i.e. you're in read mode), otherwise get the value directly from the radio button dynamically.

I could think of a (possible) solution and a workaround.
The (possible) solution is to enable the "showReadonlyAsDisabled" property for your radio group. By (possible) i mean that i'm not 100% sure whether this exists for radio groups. But if it does your control should be rendered as a "control" with values in your html markup, with a "readOnly" attribute applied to it. Can't test this before tomorrow morning.
If this doesn't work you could also copy your value to a hidden field using the radio group's onchange event, then read that helper field's value which should be mich easier to retrieve.
Update:
just gave it a try: the "(possible)" solution unfortunately is not possible at all for radioGroups, so forget it.
You're most likely stuck with some other solution, as lined out in my 2nd option, or as #stwissel described it (his option #1). My workaround then would look a bit like this:
my radioGroup is bound to a field named rbGroup. There is also a simple data field on the same form named rbvalue, and on the Xpage I have an editBox control bound to rbvalue which is hidden through a css display:none statement. For this editBox I have the showReadonlyAsDisabled property set to true (for editBoxes this works):
<xp:inputText
id="rbGrpHelper"
value="#{doc1.rbValue}"
showReadonlyAsDisabled="true">
</xp:inputText>
The onchange event handler for my radioGroup performs some simple code copying the radio's selected value to rbvalue, and it performs a partial refresh on a div containing the rbGrpHelper editBox:
doc1.replaceItemValue("rbValue", doc.getItemValue("rbGroup"))
Now if my xpage is open in read mode, because of the showReadonlyAsDiabled property my hidden helper field looks like this in its HTML markup:
<input type="text"
value="1" id="view:_id1:rbGrpHelper"
name="view:_id1:rbGrpHelper"
readonly="readonly"
style="display:none"
class="xspInputFieldEditBox">
That way the rbGrpHelper is always up to date, and you can use your CSJS code to access the selected value.

Short: Don't
Long: By nature of forms, a readonly mode does not have input elements in it like radio buttons, inputboxes etc. You have a series of options:
You did bind your radio group to #{FInvoiceDoc.PayType}, so you could compute a hidden field (using a computed text with passthrou like <xp:text value="&lt:input type=\"hidden\" value=\"#{FInvoiceDoc.PayType}\"" escape="false"></xp:text>. Then simply use that value client side
If you need to switch even in read mode, you need to compute the radio group too, so it is switchable
Use a set of SSJS functions showSection_InterestingName(doc) {....} to compute the value true/false to show the sections in read mode (or use showSection(doc, sectionName). This way you abstract the computation from the display a little and it is easier to read for the dev after you
Hope that helps

How to disable Sharepoint textbox?

I am trying to disable a textbox in SharePoint WSS3 and force a specific value (given by another JavaScript function) but I can't seem to find the right way of doing it. I have come across different issues. Let's say I have a normal single line text value named prova and another one named Description. Description is required, prova is not.
First Issue: If the field IS required, even if there is something in the textbox, SharePoint says otherwise and does not allow me to insert the entry.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='Description']").attr("disabled", "disabled");
$("input[title='Description']").val(value);
});
Second Issue: If the field IS NOT required SharePoint doesn't say anything but it inserts a blank value instead of the one given.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='prova']").attr("disabled", "disabled");
$("input[title='prova']").val(value);
});
I have a feeling that tells me that there is some kind of SharePoint JavaScript function somewhere that listens for KeyUp or something. I have really no idea what to do now...
EDIT: It looks like the problem is related to disabling the textbox, if I comment the line where I disable the textbox it works in both scenarios. Maybe if I catch the insert request I can re-enable the textbox before SharePoint do the actual post. No idea how to do it though...

Your problem really is related to disabling the textbox first. By default disabled textboxes are not contained in the POST request in IE.
See this post: Disabled form inputs do not appear in the request or this one: how to save data by disabled text box?
What you actually want to do is set the readonly attribute of the field, not disable it (readonly="readonly"). The problem with that is that the readonly state sometimes looks the same as the default state, so you also have to add some CSS to make it look greyed out.

How does Javascript interact with HTML via document.getElementById?

I hope that I'm not asking a question that has been answered before - I was unable to find anything regarding this subject specifically.
I've been tasked with creating a "Hangman" game via Javascript. My professor has given us an HTML markup of the game, as well as styled it with CSS. I have to write the Javascript to make the game work. The code is contained within an external file.
The HTML has a form that accepts the initial word for hangman:
<div id="enterWordContainer" align="center">
Enter a six letter word for hangman: <input id="hangManWord" type="text" value="" />
<input type="button" value="Submit" onclick="saveWord();"/> </div>
How do I begin to manipulate the text that I would input in my HTML document?
I've tried creating a variable that would contain the text:
var userGuess = document.getElementById("hangManWord").value;
Shouldn't this put the form's input into a Javascript variable?

When executed right after (or at) page load, the assignment userGuess = document.getElementById("hangManWord").value sets the variable userGuess to the empty string, because that’s what the value property is set to, due to the HTML attribute value="".
When the input control is used by the user to change the value, this will not change the value of the userGuess value.
Within the saveWord function, you can use document.getElementById("hangManWord").value to get the current value of the control. You cannot get the value before a value has been input, though. You can, if you wish, use e.g. var userGuess = document.getElementById("hangManWord"), creating a reference to the input element (a reference to the whole element node object, instead of just getting the current value of one property thereof) and then use userGuess.value later.

Yes it will put form's input into the userGuess variable. BUT you have to insert your code into form submit event handler and this is function "saveWord();" that i believe you have to implement.
What it will eventually do is get your input value only when it has been submitted.

html input field "value id" combination

I am trying to understand what exactly the combination
... value id= ...
in
<input type="text" name="session_key" value id="session-key-login">
does. Note, that the value is immediately followed by id.
My problem is whenever such a combination occurs in an input field (for example in Facebook login page "email or phone" field (only) and everywhere in the LinkedIn login page), the
document.getElementById(..).focus()
method fails. I am sure the "value id" combination does something non-trivial, since Facebook uses it only for one field, while all other fields come without that empty value field preceeding id.
Thanks in advance.

They are two totally different attributes. Note that attributes are separated by spaces, so even when specified with no = afterwards, as in your example, it's a distinct attribute, and not combined with the following one.
value defines the value of the input (the value that will be prefilled when the page is rendered). If left empty (as in your example), it does nothing. If you did, say, value="hi", however, the text box would be prefilled with "hi"
id specifies the unique identifying name of the input. It is used to access the element in the DOM, using JavaScript, e.g. document.getElementById('session-key-login')

I think I found the answer to my focus() problem.
What I found was on a page, invoking focus() once focuses on the required element. However, a second invocation on the same element fails, unless one make the page lose the previous focus explicitly, for e.g. by invoking the blur() method on the same element.
I might be wrong, but my guess is that Facebook focuses on the "email" field implicitly/automatically on load and thus my second focus does not do anything. Though it works on other fields.
So, explanation by Steven Moseley holds tight :)
Thanks,
Nikhil

How to hide an HTML input field with javascript

I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.

I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.

Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.

document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.

The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.