How to change value in asp Label using javascript - javascript

I have create a function onchange when there a textbox value change. I able to show the result into label using innerHTML using Javascript. But when come to code behind, ASP.Net VB is not able to get the label.text value. Is there any way to show the result in this label?
<asp:Label ID="lblreserve1" runat="server" text="**HERE**" Visible="true"></asp:Label>
<input type="text" name="reservation-time" id="reservation-time" class="form-control" value="01/01/2016 - 01/25/2016" onchange="myFunction1(this.value)"/>
function myFunction1(reservedate) {
var x = document.getElementById("reservation-time").value;
document.getElementById("<% =lblreserve1.clientID %>").innerText = x;
}
MsgBox(lblreserve1.Text)

I think this is an XY problem. I don't think you want to change that label.
I imagine you have a textbox that is serving double duty. If the label says one thing, the textbox contains data that means one thing; if the label says something else, the textbox contains some other data. This is a really unusual way to accomplish what is a very common web UX.
Instead, create a series of label/textbox pairs and enclose them in DIV elements. Hide all DIVs but one of them. When you wish to "change" the label, unhide the DIV containing the label/textbox you want, and hide everything else.
When the form posts back to the server, all three textboxes will post back too. The server can tell which label was shown because its textbox will contain a value. Thus the server can infer the value of the label that was being shown when the form was submitted.

Related

Onselectedindexchanged does get fired sometime

Aspx page :
fileupload
dropdownlist subject
Textarea
User can write anything in textarea.There is no sequence, that user can first write text or upload file.Dropdownlist has onchange and selected indexchanged event.Onchange event calling javascript function which convert '<',to it's html encode character if textarea contain.On selectedindex change appropriate script of that subject code get added into textarea replacing previous one.It is not necessary that user should select subject for script,can write it's own.Every thing is working properly over here.When I selecting file other than text I want hide dropdownlist subject and want to make index at zero.
Suppose I uploaded text file,selected subject which inserted script into textarea,now I want to select img rather than text file,if I do, dropdownlist get disable and show first value document.getElementById('ddlSubject').selectedIndex = 0.Textarea is empty.Every thing is working properly here .But when I again select textfile,textarea and dropdownlist get enable.If I choose one subject which was selected previously,serverside event of dropdownlist did not get fired.If I choose other subject it call server side function.How to handle this
Please make sure you have the property of the control set as AutoPostBack = true. Furthermore, it'll be easier if you could share a code snippet.

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

Set value to hidden column with jquery

I am trying to set value to a hidden column. Previously i have achieved this by doing:
var bc = $("select[title='Broadcast Channel']").val();
$("select[title='Execution Channel']").val(bc);
This works fine as I am able to get the column which exist in html source.
Now I am trying to set value to a hidden column which I have hidden in Sharepoint 2010 list setting. And I am not able to find it under html source (e.g. <input type=hidden....>).
How can I set value to this hidden column?
Not sure if the following method will be acceptable to you, but here goes...
In sharepoint, make the input field non-hidden. Instead, make it invisible at document.ready() using JQuery. If the input field is given a specific ID/class name, you can get a reference to the same, and set the text (using text() function), or for more complex situations, consider enclosing it all in a div.
Best Regards,
Gopal Nair.
In share point make the field as text input and then using jquery make it hidden and then set the value. try something like
$('input[type="text"][title="abc"]').attr('type','hidden').val("abc");
There is a common problem that if an element is hidden from back end code, normally it is simply not rendered in the html generated. Elements that needs to be manipulated at the front end need to be shown but hidden using html or js code.

Unable To Access Label Text in Code Behind file when setting it through Javascript

I have a label control in my Page
<asp:Label ID="EmpType" runat="server" Text=" " ></asp:Label>
I am setting its value through Javascript using the following code
var lblEmpType = document.getElementById('<%=EmpType.ClientID %>');
lblEmpType.innerText = "Hi";
The value is getting displayed in the Page correctly but when i try to access "EmpType.Text" from code behind file, the value is " " ... I want to access the value of the label which i have set through javascript..
If want to know the label's new value, you will have to use a hidden field on your page that gets its value set to the same thing as the label in your javascript code, and then you can look at the hidden field's value on postback.
ASP.NET Label controls are rendered as a span tag in html, which does not have any value to postback natively (that only works with actual input fields like textboxes and select lists). That's why there is nothing changed when you check again in your code behind after posting the form.

Javascript/C#: Appearing Textarea OnClick

I have an html list. Within this list are a series of images, some information and a button. When the user clicks the button, I want a textarea and a button to appear below the associated image within the list. The user then fills out the textarea with some machine learning feedback and clicks the button to send a postback to the server.
How do I write Javascript that will appear on a button press, but is still at the same time associated with the parent image?
I would like an answer in straight Javascript, not jQuery, as I'm still learning Javascript. I'm using C# 4.0 and ASP.net.
I have several possible implementation ideas:
Create a Javascript function that writes html using Response.Write that contains the textarea and button. I couldn't use an asp:button so I don't really know how I would accomplish a postback.
Have a single hidden asp:button and asp:textbox that get populated when the magic appearing button is pressed. The magic button would pass an id to the asp:button and activate a click. I might need a hidden label to store the value of the id.
I think #2 is the best and probably easiest method, but I don't know the best way to make an appearing panel in Javascript.
If you want to use ASP.NET as well, add the textareas in a repeater-type control and surround the textbox elements in a simple tag. give each div a unique id which can be determined using the textbox ClientID property generated by .NET. Then, create a single javascript function that takes in an id as an argument and sets that element's visibiity to true or falase depending on its current state. This way you have only one javascript function that can handle showing or hiding any of your textboxes and your postbacks are still intact using ASP.NET postbacks.
Your javascript function would be something like...
function showHideTextBox(divID)
{
if(document.getElementById(divID).style.visibility == "visible")
{
document.getElementById(divID).style.visibility = "hidden";
}
else
{
document.getElementById(divID).style.visibility = "visible";
}
}
For your button that need to show or hide the textboxes, set their OnClientClick events to the function. For example...
string divID = "div" + myDynamicTextBox.ClientID;
btn.OnClientClick = "showHideTextBox('" + divID + "')";
Hope that helps!

Categories

Resources