How can I set the text of this ASPX control using JavaScript? - javascript

I have the following input control in an ASPX page:
<input tabindex="0" class="_f_ql _f_rl textbox allowTextSelection placeholderText" role="textbox" aria-labelledby="MailCompose.SubjectWellLabel" autoid="_f_B2"></input>
I am only able to inject JavaScript into this page, and check if an input element with the above class is present, and I would like to change the value of the text that is inside of this textbox. Is there any way to do this with JavaScript?
So far, I can get the correct element using the following code, but setting the value on it does not work to set the textbox's text to Testing...:
var subjectElements = getNodeElementsContainingID(document.body, "_f_ql _f_rl textbox allowTextSelection placeholderText");
if (subjectElements.length > 0) {
subjectElements[0].value = "Testing...";
}
I don't want to inject jQuery as its overkill, but seeing as how I have the element I need, what can I do to it to set the text value on it?

Try
document.getElementsByClassName('_f_ql _f_rl')[0].value = 'Testing...';

Related

How to retrieve the label text and pass to a string in asp.net?

I am using a label with the text as numbers. The label text is populated from javascript as below:
document.getElementById("label").innerText = arrList[2];
I want to use this label text to pass to a string.
string a = label.Text.
It is not working. The label text is empty even it has the value.
Help me on this.
try this:
I am assuming You are using Server side ASP control as Label
something like this:
<asp:Label runat="server" ID="label" />
then it should be
document.getElementById('<%=label.ClientID%>').innerHTML = arrList[2];
Description:
While Rendering page inside browser ASP.Net run-time will change ID of Server Side Controls So You need to Specify those controls using label.ClientID their client id
The problem might be that, the id of the label is not just label. Right click on the label in browser, choose inspect element and you will find the id of the label.
It will be like ContentPlaceHolder1_label or ct100_label or something.
To avoid confusion like this, you should use ClientID:
document.getElementById('<%=label.ClientID %>').innerHTML = arrList[2];

How to Change textbox text into another textbox in asp.net C#?

I am having two text boxes on my web page as txtGivenName and txtDisplayName. Now I want to display txtGivenName text on txtDisplayName while entering text on txtGivenName by using keypress event or keydown event.
I have tried some code for achieve this but not able to get the textbox1 value on textbox2.
My Code is:
<asp:TextBox ID="txtGivenName" runat="server" onkeypress = "copyText()" ></asp:TextBox>
Script code is:
function copyText() {
var givenName = document.getElementById("txtGivenName");
var displayName = document.getElementById("txtDisplayName");
displayName = givenName;
}
but nothing happened while entering text on txtGivenName. Can anyone suggest me to achieve this or tell me any other way to achieve this?
(Note: I dont want to do this by OnTextChanged event, Bcoz it will populate the first text box value on second one after text enter got over only. While entering the text on first textbox we need to change the text on second textbox simultanously)
Thanks.
I got the exact answer for this feature by using below mentioned script code.
Solution:
function OneTextToOther() {
var first = document.getElementById('<%= txtGivenName.ClientID %>').value;
document.getElementById('<%= txtDisplayName.ClientID %>').value = first;
}
Take a look at the page source in the browser -- "txtGivenName" and "txtDisplayName" are not going to be the IDs of the text boxes because ASP.NET prepends the IDs based on the control hierarchy so they are globally unique.
You have two options -- use "<%=txtGivenName.ClientID%>" to get the true name of the text box in javascript, or set ClientIdMode="static" on the text boxes so the IDs are left alone.
function copyText() {
var givenName = document.getElementById("<%=txtGivenName.ClientID%>");
var displayName = document.getElementById("<%=txtDisplayName.ClientID%>");
displayName.value = givenName.value;
}
You can try keyup event but I know only Jquery method to do it.
<input class="one" type="text"/>
<input class="two" type="text"/>
$(".one").on("keyup", function(){
$(".two").val($(".one").val());
});
here is the demo: http://jsfiddle.net/pUpZA/
PS: the asp:textbox translates to input when you compile so its basically the same thing. use "CssClass=one" for your asp:textboxes

HTML get the value of an image field and use that value as a src for an image field

I have a HTML input field like this
<input type="text" id="Bild"/>
I want to get the value of the input field and store it in a String in my JSP page, something like this
<%
String theString= <input type="text" id="Bild"/>
%>
After that I want to use the string to as a source for my image field, like this
<img src= <%= theString %> >
I have no clue how to do this, and I've been staring at the screen for two hours not getting my head straight. How can I get the value of the input field to use for my image source?
I'm new to JavaScript so if I have to use this, please be very descriptive. Thanks.
Changes a pre-existing image's src when the byt button is clicked.
function bytUtBilden() {
// select <input id="Bild"/>
var bildenFalt = document.getElementById('Bild');
// select <img id="bilden"/>
var bilden = document.getElementById('bilden');
bilden.src = bildenFalt.value;
}
function begynna() {
// select element with id="byt"; when clicked, run bytUtBilden
document.getElementById('byt').addEventListener('click',bytUtBilden,false);
}
// when DOM is loaded, run begynna()
document.addEventListener('DOMContentLoaded',begynna,false);
Edit: Changed it so that it updates when the button is clicked. Also bytUtBilden() can be run from anywhere and it will do the same thing.
var path = $('Bild').val();
$('#imgid').attr('src',path);
Is there a reason to be going through a middle-man? Just grab the value with a direct DOM query as long as you know that the text field does already contain a value:
document.getElementById('Bild').value
In this example I used a button as the action, but you don't need that for the value to be query-able
http://jsfiddle.net/Py2E2/

Inner HTML with input values

have a brief question regarding innerHTML and input values that have been entered. See the brief example below (using jQuery for convenience):
http://jsfiddle.net/F7urT/2/
jQuery:
jQuery(document).ready(function($) {
$('.send').click(function() {
alert( $('.content').html() );
return false;
});
});​
html:
<div class="content">
<input type="text" name="input" value="Old Value" />
<input type="button" class="send" value="Send" />
</div>​
If you edit the input value, then click the 'Send' button, the alert shows that the innerHTML gotten contains the input with the "Old Value", rather than the value the user has entered. Why is this? And how can we get the HTML as a string with user entered input values?
The new value is stored as a property not an attribute, the value can be obtained by inputelement.value, modifying the value does not affect the attribute. If you want the html with the new value just set the attribute to the new value.
For check boxes and radio buttons set the checked attribute, set the innerHTML for text areas, for selects set the selected attribute on the option
http://jsfiddle.net/mowglisanu/F7urT/5/
this solution is better. works for more inputs.
$('input[type=text]').attr('value', function (i, val) { return val; });
$('input[type=checkbox],input[type=radio]').attr('checked', function () { return this.checked; });
$('textarea').html(function () { return this.value; });
$('select').find(':selected').attr('selected', 'selected');
You can't get it with .innerHTML (.html()). Writing into an element doesn't modify the html markup, nor will it change the value attribute in actual markup.
You can only access the current content by directly asking the element for its .value - value. Using jQuery, you can do that via .val() too.
$('#input_id').attr('value',$('#input_id').val()); will put the value into the html
DanCZ & Musa solutions works pretty good, but I had trouble with the textarea.
I have to implement this in a Typescript project and the only way I've found to make the textarea show the value is this :
textarea.innerHTML = textarea.value;

changing html tags with javascript and get the value on server side

I have this HTML tag:
<span id="pricea" runat="server">13323223</span> and I am changing this value with JavaScript:
<script type="text/javascript">
$(function () {
$("#pricea").hover(function () {
document.getElementById("pricea").innerHTML = "1234"
});
});
</script>
Now,when I do postback after clicking asp:Button, the span value returns to be the original value and I can't take the new value that was changed by the JavaScript.
I thought maybe use request.form("pricea"), but it seem to be working only for input fields, so my question is:
how can I get the value of this span (after it was change by the JavaScript) in server side?
thanks for any help
The HTML document is not posted back to the server, only the content in the fields in the form.
If you want to send the value back to the server, you have to put it in a form field. You can add a hidden field to the form where you can keep a copy of the content of the span:
<asp:Hidden name="pricea_copy" id="pricea_copy" />
Now when you change the span, you also change the hidden field:
document.getElementById("pricea").innerHTML = "1234";
document.getElementById("pricea_copy").value = "1234";
After the postback, you can access the changed value in the hidden field using pricea_copy.Value, and use that to set the content of the span tag for the new page.

Categories

Resources