Getting html out of multiple input labels with the same class - javascript

So this is my code so far...
function doAlertings()
{
var inputlabels = $('.inputLabel').each(function(i, obj) {
});
alert(inputlabels);
}
This will alert all 12 of my input labels one after another however they are all blank. But when I use...
var inputlabels = $('.inputLabel').html();
alert(inputlabels);
That will alert only the first input label and stop there. Anyone got an idea of how to get the html out of each one?
Help is much appreciated.
Thanks

Use $(this).text() to get the text of each element in each loop
$('.inputLabel').each(function(i, obj) {
alert($(this).html()); // console.log($(this).text());
});

Pay attention to indentation - messy indentation and formatting makes code obscure and you easily overlook a mistake, like in your case.
After you format your code properly, you get:
function doAlertings()
{
var inputlabels = $('.inputLabel').each(function(i, obj) {
// do nothing
});
alert(inputlabels);
}
So, you clearly see, you are calling the alert function just once.
If your intent is to alert contents of the labels, this would be the way:
function doAlertings()
{
var inputlabels = $('.inputLabel').each(function(i, obj) {
alert( $(obj).html() );
});
}

Related

Result not match for text area (jQuery)

I have a question which concerns jquery.urlive plugin. This plugin is used to graph content from other website and generate to HTML element, so I use it to
develop my personal project. I have a problem which I don't know how to solve, should I customize the library or are there solutions?
I would like to duplicate text area more than 2 (let's say I have done with duplication), but they are the same functions, which means when there is url in the text area one and then the result will appear for result one and others are the same.
Obviously my problem when there was url on text are one, all the results for other text are also shown.
Here is my code: http://jsfiddle.net/samphors/4KftC/77/
Thanks for helping.
You need to call the urllive only for the changed element
$('.demo').on('input propertychange', function () {
var $this = $(this),
$ct = $this.next();
$this.urlive({
container: $ct,
callbacks: {
onStart: function () {
$ct.html('<span class="loading">Loading...</span>');
},
onSuccess: function (data) {},
noData: function () {
console.log('y')
$ct.html('');
}
}
});
}).trigger('input');
Demo: Fiddle
if(f.match(urlPattern) && d == true){
var o = f.match(urlPattern), link = o[0];
$(".frame").attr("src",link);
d = false;
}
try this
http://jsfiddle.net/4KftC/79/

jquery pass a custom function to click event does not work

This may be a stupid question but I'd like to get some clarification on the matter. I have a function that loops through an array and copies values from input A to input AA (B to BB, and so on). But I want this function to execute when a hidden div is visible only. So I was trying to do this:
$('#showSave').on('click', function () {
copyInputValues();
$('#divModal').css('display', 'block');
});
Then I also tried this to no avail:
$('#showSave').click(copyInputValues);
This is my custom function:
function copyInputValues() {
var minInputs = ['abel1', 'abel2', 'abel3', 'abel4'];
$.each(minInputs, function (i, val) {
$('#l' + val).change(function () {
$('#modalL' + val).val($(this).val());
});
});
}
What is wrong with these scripts? I'm not very versed on javascript or jquery. I'm kinda learning and I've found stackOverflow to be a great source of information.
Thanks again for your help!
You can use
if ($('#divModal').css('display') == 'block') {
copyInputValues();
}
OR
if (!$("#divModal").css('visibility') === 'hidden') {
copyInputValues();
}
OR
if($('#divModal').is(':visible')) {
copyInputValues();
}

Jquery get value and display in span

i've got a select field with few options, each of them has assigned "value" attribute and they got names. Upon selecting one of the options, I want one to be filled with the title, second one with the value. Title works fine, but I can't get it to catch the assigned "value="asd"" value.
$(".itemclass").on("change", function () {
$("span.iclass").text(this.options[this.selectedIndex].textContent);
$("span.impl").text(this.options[this.selectedIndex].val());
});
What am I missing?
Here's how you can access the selected option:
$(".itemclass").on("change", function () {
var selectedOption = $(this).find("option:selected");
$("span.iclass").text(selectedOption.text());
$("span.impl").text(selectedOption.val());
});
Or alternatively if you prefer to use the DOM node:
$(".itemclass").on("change", function () {
var selectedOption = $(this).find("option:selected").get(0);
$("span.iclass").text(selectedOption.textContent);
$("span.impl").text(selectedOption.value);
});
Ok I did a little fiddling pardon the pun.
Here is what I came up with.
$(".itemclass").change(function()
{
$("#Name").text(this.options[this.selectedIndex].textContent);
$("#Value").text(this.options[this.selectedIndex].value);
});
Here is my fiddle
http://jsfiddle.net/nH2a3/
Here is where I found your solution Check out the answer for this question for the why.
HTMLInputElement has no method 'val'
Use this:
$(".itemclass").on("change", function () {
$("span.iclass").text(this.options[this.selectedIndex].textContent);
$("span.impl").text($(this).val());
});
You can give it a try with this code:
$(".itemclass").on("change", function () {
$("span.iclass").text($(this).find("option:selected").text());
$("span.impl").text($(this).find("option:selected").val());
});

Appending existing onClick value

I am using javascript and need to grab the value of an existing onclick and append to it. I am not trying to replace the current onclick, I am trying to append to the front, or end, of it. But all different iterations of this effort are failing.
Quick example:
<pre>
<a href="blah" id="tabA" onclick="alert("this");"
<script>
function test() {
alert("that") ;
}
document.getElementById('tabA').onclick = "test();" + document.getElementById('tabA').getAttribute('onclick') ;
</script>
</pre>
When using the .onclick event you should use function and then the action:
document.getElementById("tabA").onclick = function()
{
alert("hello world")//this will work
}
document.getElementById('tabA').onclick = "test();" + document.getElementById('tabA').getAttribute('onclick') ;//fail since events are not variables to store values.
So, what you whatever you are tring to do, in that way it wont work.
I don't know if I had got your point.
My solution is
tabA
<script>
function test() {
alert("that") ;
}
var oldClick = document.getElementById('tabA').getAttribute('onclick') ;
var newClick = function(){
test();
eval(oldClick);
}
document.getElementById('tabA').onclick = newClick;
</script>
when I click the 'tabA', it alerts 'that' then 'this'.
http://jsfiddle.net/x3Xds/
I know this is quite old but, I needed to do the same thing.
I got around this by using an event;
obj.addEventListener('click', function(){ test(); }, false);

Refer to immediate selector object with jQuery?

I'm trying to learn some jQuery, and I setup a test page with the following code:
<a id='encode' href='javascript: void(0)'>encode</a> |
<a id='decode' href='javascript: void(0)'>decode</a> |
<br/>
<textarea id='randomString' cols='100' rows='5'></textarea>
<script type='text/javascript'>
$(document.ready(function () {
$('#encode').click(function() {
$('#randomString').val(escape($('#randomString').val()));
});
$('#decode').click(function() {
$('#randomString').val(unescape($('#randomString').val()));
});
});
</script>
The idea is I can put something in the textarea and click either "encode" or "decode", and it will either escape or unescape what I put into the textarea.
This code works just fine, but my question has to do with how I am changing the value of the textarea. In my code, I am selecting the textarea value twice: once to (un)escape it, and once again to change the value. IMO this seems clunky and maybe unnecessary. I thought maybe I could do something like this instead:
$('#randomString').val(escape(this));
But this seems to refer to the object of the link I clicked, not the #randomString selector, so is there some other magic word I can use to reference that $('#randomString')?
$('#randomString').val(escape(this));
This does not get the object you want. It is effectively the equivalent of doing this:
var foo = escape(this);
$('#randomString').val(foo);
this only means something different when you start a new scope with a function definition.
jQuery does offer this kind of functionality with a callback option:
$('#randomString').val(function (idx, oldVal) {
return escape(oldVal);
});
The second parameter is the current value of the element; the return value sets a new value for the element.
You can try this
$(document.ready(function () {
$('#encode').click(function() {
var $randomString = $('#randomString');
$randomString.val(escape($randomString.val()));
});
$('#decode').click(function() {
var $randomString = $('#randomString');
$randomString.val(unescape($randomString.val()));
});
});
The short answer, if I understand you correctly, is no. There isn't a way to refer to $('#randomString') where you're talking about. It's just a parameter to the val method, so it's just plain JavaScript syntax, no jQuery "magic".
To accomplish the task at hand and make the code cleaner and less clunky, I would save off the jQuery object for #randomString so you don't have to keep creating it:
$(document.ready(function () {
var $rndStr = $('#randomString');
$('#encode').click(function() {
$rndStr.val(escape($rndStr.val()));
});
$('#decode').click(function() {
$('#rndStr').val(unescape($rndStr.val()));
});
});
You could make it a little generic:
$.fn.applyVal = function(func) {
return this.each(function() {
$(this).val( func( $(this).val() ) );
});
};
Then the following call is enough:
$('#randomString').applyVal(escape);

Categories

Resources