I'm painfully new to jQuery and I need to grab the value on change of a text input box with an id of id[2][t] and display that text in a div to be styled later on (also styled with jQuery).
This is the input box code:
<input id="id[2][t]" name="id[2][t]" maxlength="20" type="text">
This is the div I am trying to display it in:
<div id="textpreview"></div>
This is what I have tried, among other variation with no success:
$(document).ready(function() {
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = $('#id\\[2\\]\\[t\\]').text();
$("#textpreview").val(txtval);
});
});
I know the brackets are a problem but they need to remain for other reasons.
Any ideas?
$( document.getElementById( "id[2][t]" ) ).change( function(){
$( "#textpreview" ).text( this.value );
} );
You might consider revising your IDs (though I'm guessing they might be auto-generated). According to this question your IDs are invalid against the spec
Use the attribute selector instead:
var sel = $("[id='id[2][t]']");
sel.change(function() {
$("#textpreview").val(sel.text());
});
Plain Old JavaScript:
var elem = document.getElementById('id[2][t]');
elem.onchange = function()
{
var elem = document.getElementById('textpreview');
elem.removeChild(elem.firstChild)
elem.appendChild(document.createTextNode(this.value));
}
Ahhh... now doesn't that feel better?
You have val and text backwards. Swap them:
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = $('#id\\[2\\]\\[t\\]').val();
$("#textpreview").text(txtval);
});
val is used to get the value of the textbox. text to set the text within the div.
You can further simplify the code by using this instead of re-querying the element.
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = this.value;
$("#textpreview").text(txtval);
});
You can try using the attribute selector instead of the id selector.
$('[id="id[2][t]"]')
Related
This is my code which is used to edit an input when clicked on it and then save in the db.
$(document).ready(function() {
$('.editable').on('click', function() {
var that = $(this);
if (that.find('input').length > 0) {
return;
}
var currentText = that.text();
var $input = $('<input>').val(currentText);
$(this).append($input);
// Handle outside click
$(document).click(function(event) {
if(!$(event.target).closest('.editable').length) {
if ($input.val()) {
that.text($input.val());
var div_id = $(this).closest('#commentbox').attr('id');
div_id = div_id.replace('comment-', '');
alert(div_id);
$.post( "updateComment.php", {id: div_id,message: $input.val()})
}
that.find('input').remove();
}
});
});
});
Var div_id is not retrieving it at all.
And I want to retrieve only the number from the id from this however it does not work. I've been trying several solutions and this last one isn't working either
<div id="comments">
<div class="commentbox" id="comment-90">...</div>
<div class="commentbox" id="comment-91">...</div>
</div>
This part of code is basically a problem:
var div_id = $(this).closest('#commentbox').attr('id');
Firstly, you are trying to get closest element from document as this points to document in that part of your code (you meant probably event.target instead).
Secondly, you are trying to find the closest element with id == 'commentbox', as this is what #<selector> means. You should use some other attribute for that purpose - probably best would be some class selector and then use the .attr('id') on it.
I need to find exactly that td row which contains value priview '2'
I know the td row first half id, but it is dynamic: MovementNumber_M_* (Where * can be from 1 to Milion)
So need to search all rows from MovementNumber_M_1 to MovementNumber_M_9999 which contains MovementNumber_M_*.value=2 and returning directly that td row id which contained that value.
Can you help me? Thanks in advice.
Right and helpfull answers guaranteed ;)
//EDIT
function DgIdOnClick (e,r){
var MovementNumber = document.getElementById(e).value;
//alert('MovementNumber: '+MovementNumber+' Type :'+r);
var result = $('[id^="MovementNumber_M_"][value='+MovementNumber+']');
result.each(function(){
alert($(this).attr("id"));
});
}
OK value=1 is for init and thats why are alerting all rows but if value is 2 then jq is not finding him WHY ?
The function DgIdOnClick is inicialized #
$( document ).ready(function() {
var SecondDiagnosis=$( "span[id^='lov_Dg2Id_D_']" );
var SpanBlock2=SecondDiagnosis.find('a');
var eventH2=SpanBlock2.attr( "onclick" );
SpanBlock2.attr("onclick", "DgIdOnClick(document.getElementById('MovementNumber_D_'+parentElement.getAttribute('id').substring(12)).id,2);"+eventH2);
var FirstDiagnosis=$( "span[id^='lov_DgId_D_']" );
var SpanBlock=FirstDiagnosis.find('a');
var eventH=SpanBlock.attr( "onclick" );
SpanBlock.attr("onclick", "DgIdOnClick(document.getElementById('MovementNumber_D_'+parentElement.getAttribute('id').substring(11)).id,1);"+eventH);
});
function DgIdOnClick is on other .js file
If i am alerting IN DgIdOnClick alert(document.getElementById('MovementNumber_M_2').value)//MovementNumber_M_2 Then value is 2 but jq is not founding it
This alerts the ID's of each row containing that value
var result = $('[id^="MovementNumber_M_"][value="2"]');
result.each(function(){
alert($(this).attr("id"));
});
http://jsfiddle.net/q8QaG/
Update:
This alerts the id of all inputs with the value of 2, even on input update
$("#button").click(function(){
$('[id^="MovementNumber_M_"]').each(function(){
var value = $(this).val();
if(value == 2){
alert($(this).attr("id"));
}
});
});
http://jsfiddle.net/q8QaG/3/
$('#TableID').find('td').filter(':contains("SOME_TEXT")');
The previous 2 answers have the string encoding similarly incorrect. This should be it:
$('[id^="MovementNumber_M_"][value="2"]');
You can use combination of Attribute Starts With Selector [name^="value"] and Attribute Equals Selector [name="value"]
var myElement= $("[id^='MovementNumber_M_'][value=2]");
As per comment, if you need id use attr()
var myElementId = $("[id^='MovementNumber_M_'][value=2]").attr('id');
I want to set the text in a span from a text area's value when the page has loaded.
I have a span:
<span id='message'></span>
I have a text area which I set the value for with a rails variable:
<%= f.text_area :text_message, value: #user.text_message, id: 'text_message' %>
When the page has loaded I want the span's text to be the same as the text areas text. Something like (which doesn't work):
(document).ready(function() {
var message_text = $("#text_message").value;
$("#message").html(message_text);
});
jquery object doesn't have the definition of value it is in javascript.
Use val() function for it.
var message_text = $("#text_message").val();
and you also forgot to use $with document object
$(document).ready(function() {
var message_text = $("#text_message").val()
$("#message").html(message_text);
});
Js Fiddle Demo
You are trying to use DOM object property value with jQuery object. You need to use val() instead of value. The value attribute could only be assessed with javascript DOM object but not with jQuery object.
Change
var message_text = $("#text_message").value
To
var message_text = $("#text_message").val();
OR, use indexer to convert the jQuery object to DOM object.
var message_text = $("#text_message")[0].value;
on dom ready use
$(document).ready(function() {
var message_text = $("#text_message").val();
$("#message").text(message_text);
});
$(document).ready(function() {
var message_text = $("#text_message").val();
$("#message").html(message_text);
});
You need to use text() or html() instead of .value to grab the content.
$(document).ready(function() {
var message_text = $("#text_message").text();
$("#message").html(message_text);
});
Working example
Use text() to set the text insted of html() DEMO
$(document).ready(function() {//$ is missing here
var message_text = $("#text_message").value
$("#message").text(message_text);
});
When ypu set the text the span wiil be for example0:
<span id="message">hi</span> //here hi is set as text
I am looking to move or copy the contents of an HTML element. This has been asked before and I can get innerHTML() or Jquery's html() method to work, but I am trying to automate it.
If an element's ID begins with 'rep_', replace the contents of the element after the underscore.
So,
<div id="rep_target">
Hello World.
</div>
would replace:
<div id="target">
Hrm it doesn't seem to work..
</div>
I've tried:
$(document).ready(function() {
$('[id^="rep_"]').html(function() {
$(this).replaceAll($(this).replace('rep_', ''));
});
});
-and-
$(document).ready(function() {
$('[id^="rep_"]').each(function() {
$(this).replace('rep_', '').html($(this));
});
});
Neither seem to work, however, this does work, only manual:
var target = document.getElementById('rep_target').innerHTML;
document.getElementById('target').innerHTML = target;
Related, but this is only text.
JQuery replace all text for element containing string in id
You have two basic options for the first part: replace with an HTML string, or replace with actual elements.
Option #1: HTML
$('#target').html($('#rep_target').html());
Option #2: Elements
$('#target').empty().append($('#rep_target').children());
If you have no preference, the latter option is better, as the browser won't have to re-construct all the DOM bits (whenever the browser turns HTML in to elements, it takes work and thus affects performance; option #2 avoids that work by not making the browser create any new elements).
That should cover replacing the insides. You also want to change the ID of the element, and that has only one way (that I know)
var $this = $(this)
$this.attr($this.attr('id').replace('rep_', ''));
So, putting it all together, something like:
$('[id^="rep_"]').each(function() {
var $this = $(this)
// Get the ID without the "rep_" part
var nonRepId = $this.attr('id').replace('rep_', '');
// Clear the nonRep element, then add all of the rep element's children to it
$('#' + nonRepId).empty().append($this.children());
// Alternatively you could also do:
// $('#' + nonRepId).html($this.html());
// Change the ID
$this.attr(nonRepId);
// If you're done with with the repId element, you may want to delete it:
// $this.remove();
});
should do the trick. Hope that helps.
Get the id using the attr method, remove the prefix, create a selector from it, get the HTML code from the element, and return it from the function:
$('[id^="rep_"]').html(function() {
var id = $(this).attr('id');
id = id.replace('rep_', '');
var selector = '#' + id;
return $(selector).html();
});
Or simply:
$('[id^="rep_"]').html(function() {
return $('#' + $(this).attr('id').replace('rep_', '')).html();
});
From my question, my understanding is that you want to replace the id by removing the re-_ prefix and then change the content of that div. This script will do that.
$(document).ready(function() {
var items= $('[id^="rep_"]');
$.each(items,function(){
var item=$(this);
var currentid=item.attr("id");
var newId= currentid.substring(4,currentid.length);
item.attr("id",newId).html("This does not work");
alert("newid : "+newId);
});
});
Working Sample : http://jsfiddle.net/eh3RL/13/
How can by jQuery get value inside tag b?
<span>
<b>hi_1</b>
<b>hi_2</b>
<b>hi_3</b>
<b>hi_4</b>
<span>
I want this output with jQuery: hi_1, hi_2, hi_3, hi_4
Please give me example in jsfiddle.
Are you looking for something like this?
http://jsfiddle.net/ZDYnq/
$(document).ready(function() {
var textArr = [];
$('span b').each(function() {
textArr.push($(this).text());
});
alert(textArr.join(', '));
});
To get the value inside a specific HTML tag in jQuery you can use the text function. This combined with a selector gets the output you're looking for
$('span b').each(function() {
console.log($(this).text());
});
JSFiddle
JSFiddle with commas
This is cool
var x = $("span b").map(function() {
return $(this).text();
}).toArray().join(", ");
Demo here
Discussed here