i am trying to change text of label and textbox text on checkbox clicked.
i have noticed that asp.net fully support js .
<script type="text/javascript">
$(document).ready(function () {
$('#chkhtml').change(function () {
$('#Text1').prop("disabled", !$(this).is(':checked'));
document.getElementById('#Text1').innerHTML = 'newtext';
document.getElementById('#<%=rollLbl.ClientID %>').innerHTML = 'your text goes here';
document.getElementById('#testlbl').innerHTML = 'newtext';
});
});
</script>
However it only enable or disable text box but don't change text of any label or text box.
i have already tried .value .content etc but none of these work plzzz plzz help me .
You have mixed up jQuery and Javascript:
jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#chkhtml').change(function() {
$('#Text1').prop("disabled", !$(this).is(':checked'));
$('#Text1').val('newtext');
$('#<%=rollLbl.ClientID %>').html('your text goes here');
$('#testlbl').html('newtext');
});
});
</script>
Please amend below changes in your code, if you want to keep original.
<script type="text/javascript">
$(document).ready(function() {
$('#chkhtml').change(function() {
$('#Text1').prop("disabled", !$(this).is(':checked'));
document.getElementById('Text1').value = 'newtext';
document.getElementById('<%=rollLbl.ClientID %>').innerHTML = 'your text goes here';
document.getElementById('testlbl').innerHTML = 'newtext';
});
});
</script>
You need to change
document.getElementById('#Text1')
to
document.getElementById('Text1')
And the rest of such calls too. getElementById accepts an ID, not a selector.
you may try in jquery
$('#Text1').html('newtext');
$('#<%=rollLbl.ClientID %>').html('your text goes here');
or in plain javascript
document.getElementById('Text1').innerHTML = 'newtext';
document.getElementById('<%=rollLbl.ClientID %>').innerHTML = 'your text goes here';
you need to pass only the id of the element to getelementById(). but jquery uses css query selector so #name means it is an id and .name means it is a class
Related
I want to use jquery to always hide an element when it is checked, and show the element when it is unchecked. After doing some research I found the "is" attribute and so I created a simple html file as:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p id="test">This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<input type="checkbox" id="s">Click me</input>
</body>
</html>
Now for some reason, the jquery is not functional. Any help would be appreciated please. I also tried:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
And this doesn't work either.
This is simple in javascript. Please try the following:
var cb = document.getElementById('isAgeSelected');
var txtAge = document.getElementById('txtAge');
$(document).ready(function(){
cb.change= function(){
if(cb.checked) {
txtAge.style.display ='block';
} else {
txtAge.style.display ='none';
}
};
});
In JQuery, you can do the following:
$(document).ready(function(){
$('#s').on('change', function(){
if($(this).is(":checked")){
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});
});
You are only checking the checkbox once after the DOM is ready instead you should do it on its change event
$("#s").change(function(){
if($(this).is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
You can do this using following jQuery onchange event and .checked function
$(document).ready(function(){
$('#s').change(function(){
if(this.checked)
$("#test").hide(); // checked
else
$("#test").show();
});
});
Working URL:: https://jsfiddle.net/qn0ne1uz/
Good question !
now you were almost there.
$(document).ready(function(){ // <= !! you only evaluete the chackbox once (on document ready)
if($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
What you want to do is monitor checkbox the whole time, like so:
$('#s').bind('change', function() {
if ($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
example on jsfiddle
I'm guessing you are wanting to use the jQuery when the checkbox changes - at the moment you are just changing the hide / show it when the document loads.
Also ids need to be unique or jQuery will only get the first item with that id it comes to when you use the id selector. Change the test id to a class.
If you want the click me to change the state of the checkbox, turn it into a label (think you had it as a button) and target the input (using either for="input-id or wrap the label around the input and the text)
Try the following:
// this is to go in your document ready
$('#s').on('change', function() { // bind to the change event of the chackbox
// inside any change event, this is the js object of the thing that changed (ie the checkbox)
if (this.checked) {
$('.test').hide();
} else {
$('.test').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a heading</h2>
<!-- ids need to be unique so change this to a class or your jquery won't work -->
<p class="test">This is a paragraph.</p>
<p class="test">This is another paragraph.</p>
<input type="checkbox" id="s"><label for="s">Click me</label>
I want to change 'Enter text here' to 'something else'.
I cannot access to server files, so I need to do it with a javascript-code. The following code is not working:
<script language="JavaScript">
$(function() {
$(".ws-po-box:contains('enter text here')").text('something else');
});
</script>
EDIT: Typo only when asking, not in code.
Looks like a typo in your syntax. Try:
<script language="JavaScript">
$(function() {
$(".ws-po-box:contains('Enter text here')").text('something else');
});
</script>
Use jQuery.filter for selecting case-insensitive content as :contains selector deals with case-sensitive textContent
$(function() {
$(".ws-po-box").filter(function() {
return this.textContent.toLowerCase() === 'enter text here';
}).text('something else');
});
This is a followup question. I've been trying to grab the selected text from multiple iframe using rangy. The code seems to be working for 1st iframe .
i want to grab elements using the same button., for div it works k. but in iframe we need to specify the iframe and when i tried the array of iframes ., that is not working
Use jQuery $.each:
$(function () {
$('button').click(function () {
$.each(iframe, function(idx, vl) {
var selection = rangy.getSelection(iframe[idx]);
alert(selection);
});
});
});
Demo: http://jsfiddle.net/cWV3G/
Here is the Working Fiddle
Try getting the the Rangy iframe selection object and access the FocusNode property and get the selected text from that iframe like this:
JS:
$(function () {
$('button').click(function () {
iframe.each(function(i){
if(rangy.getSelection(iframe[i]).focusNode!=null)
{
var selection = rangy.getSelection(iframe[i]).focusNode.data;
alert("Iframe - "+(i+1)+ " selected text : '" +selection+"'");
}
});
});
});
Hi I'm trying to replace a title when clicking on it by a text input in order to modify the title, I'm using this code :
<div style="font-size: 70%;"><h2 class="outer"><?php echo $designation; ?> </h2></div>
this div is loaded using another script and therefore is not on the original page, so I think we must use the delegate method.
Here is the jquery script I'm using to turn its background color to pink:
<script src="jquery-1.10.2.min.js">
$(document).ready(function(){
$("#right").delegate("h2","click",function(){
$("h2").css("background-color","pink");
});
});
</script>
Any idea how to replace the title in this div by a text input tag ? and any idea how to submit the modification to the database once I click outside the input field ? thank you
Your HTML:
<h2 style="cursor:pointer;">Click Me</h2>
Your JS:
$( "body" ).delegate( "h2", "click", function() {
$( this ).html( '<input type="text" value="yourValue">' ).find('input').focus();
$("input").focusout(function(){
$("h2").html( this.value );
}).click(function(e){
e.stopPropagation();
return true;
});
});
For submit your input you can use simple $.ajax POST request into ".focusout" function OR something like Aust $.post code. This is your options. just send your data.
See Demo for details.
In order to "update" the title you need to replace the html in the h2 element with an input element which is set to the current title. Then you need to add a listener so when the user clicks out of that input box it sends an AJAX request to some other site on your server that is setup to update the database with the new title. This code does the trick
$(function(){
$('#right').on('click', 'h2', function(){
var $h2 = $(this);
var old = $h2.html();
if(/<input type="text"/.test(old))
return;
$h2.html('<input type="text" value="' + old + '"/>')
.find('input')
.focus()
.on('blur', function(){
var value = this.value;
$.post('/new_title.php', {title: value})
.done(function(){
$h2.html(value);
})
.fail(function(){
$h2.html(old);
alert('Could not update title');
});
});
});
});
Make sure you change the url in $.post to the url where you setup your listener. An example listener would be like:
new_title.php
<?php
require('DB.class.php'); //Require your DB Class
if($_POST && $_POST['title']){
DB::updateTitle($_POST['title']);
}
?>
Not sure if I understand correctly what you were trying to achieve. But where does the element with id "right" come from? Is this the one that is loaded from another script? In that case, try
$(document).ready(function(){
$(document).on('click', '#right', function(){
$("h2").css("background-color","pink");
})
});
To replace div content, use code:
$('div').html('<input type="text" name="abc" />');
Why doesn't the following work for me?
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>
Because your script runs BEFORE the label exists on the page (in the DOM). Either put the script after the label, or wait until the document has fully loaded (use an OnLoad function, such as the jQuery ready() or http://www.webreference.com/programming/javascript/onloads/)
This won't work:
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>
This will work:
<label id="lbltipAddedComment">test</label>
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
This example (jsfiddle link) maintains the order (script first, then label) and uses an onLoad:
<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
});
</script>
Have you tried .innerText or .value instead of .innerHTML?
Because a label element is not loaded when a script is executed. Swap the label and script elements, and it will work:
<label id="lbltipAddedComment"></label>
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
Use .textContent instead.
I was struggling with changing the value of a label as well, until I tried this.
If this doesn't solve try inspecting the object to see what properties you can set by logging it to the console with console.dir as shown on this question: How can I log an HTML element as a JavaScript object?
Here is another way to change the text of a label using jQuery:
<script>
$("#lbltipAddedComment").text("your tip has been submitted!");
</script>
Check the JsFiddle example
Using .innerText should work.
document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';
Try this:
<label id="lbltipAddedComment"></label>
<script type="text/javascript">
document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>
Because the script will get executed first.. When the script will get executed, at that time controls are not getting loaded. So after loading controls you write a script.
It will work.