I'm working with this jQuery code:
$('#selection').bind("change", function(){
var selected = $(this).find('option:selected');
var datavar = selected.text().toLowerCase();
//alert(datavar);
//alert('looking for '+datavar+$('#test').data(datavar));
//alert($('#test').data('var1'))
});
http://jsfiddle.net/Zwe6h/
The purpose is to choose what data variable you wish to extract from the #test element by using the #selection element. it should alert you as to what the value of that data variable is.
The datavar variable is set correctly as alert(datavar); prints out the correct value.
However, the second test alert (which is the purpose of this test) displays it as undefined. The third test alert simply tests to make sure you can explicitly call the data variables by hard-coding the variable.
I am not understanding why it is coming back with undefined. I tested the type of datavar, and it is indeed a string, so I would expect it to behave just as it would if it were hardcoded. Can someone shed some light on this?
Try this:
alert('looking for '+datavar + $('#test').data($.trim(datavar)));
Issue is with some newline chars (casued by html formatting) in the text selected as they are not included between the option start and end tag. So you just need to trim it.
Fiddle
Or fix your options to include the text in between closing and ending tags.
<select name='selection' id='selection'>
<option value='1'>var1</option>
<option value='2'>var2</option>
</select>
Fiddle2
Related
I know this is probably a piece of cake for all, but im really not any good with javascript.
I would like to set the value of html input with javascript.
I have an input like this:
<input id="input-data" value=""/>
I would like to set the text of the value with javascript, meaning that if id pass value like "CocaCola" to input, it should display "CocaCola" in input
This is how i try
document.getElementById("input-data").value = "CocaCola";
But no data gets displayed in input. When i run debugger and put value as my watch, the "CocaCola" is stored in value.
What on earth am i missing?
Make sure your code is under HTML tag, like this:
<input id="input-data" value=""/>
<script>
document.getElementById("input-data").value = "CocaCola";
</script>
Or you can use:
window.onload = function(){
document.getElementById("input-data").value = "CocaCola";
}
It works any time and anywhere.
Your JavaScript code to set value is right.
You can also try jQuery to set value like this,
$('#input-data').value = 'CocaCola';
We have the following script which runs on a change to a drop-down - updates the price based on the currency code chosen. This basically gets the value of the drop-down and updates the priceamm and preicecurr fields within the text on the page.
<script>
function run() {
var f = document.getElementById("dropPrice");
priceamm.innerHTML = f.options[f.selectedIndex].value;
var e = document.getElementById("dropPrice");
pricecurr.innerHTML = e.options[e.selectedIndex].text;
}
HTML
<select id="dropPrice" onchange="run()" class="fa-select">
<option value = "a">aaa</option>
<option value = "b">bbb</option>
Question
Now, we would also like to load the drop-down to one of the options (selected) when loading the page (onload). We are able to populate the variables in the text but not the drop-down to show option bbb. In php this is quite easy but we are a bit lost with javascript. We tried something on these lines onload but does not work:
document.getElementById("dropPrice").value = "<?php echo $geo_price ;?>";
With jQuery this is probably easier but once again no luck:
window.onload = function() {
jQuery(document).ready(function($){
document.getElementById('dropPrice').find('option[value=<?php echo $geo_price ;?>]').attr('selected','selected');
});
}
Any help is appreciated. Thanks
The jQuery selector part is incorrect. You are mixing plain JS with jQuery. When you call document.getElementById('dropPrice') a regular DOM element is returned, but then you call find which is a jQuery method to be used on a jQuery element. So, you either need to wrap the first part to return a jQuery element like so:
$(document.getElementById('dropPrice'))
.find('option[value="b"]').attr('selected', true);
Or, select it via jQuery in the first place like:
$('#dropPrice [value="b"]');
However, your first example:
document.getElementById("dropPrice").value = "b";
should work. That makes me wonder if the value that is being echoed by PHP is correct and/or if there are other JS errors being thrown that would cause that code not to run.
Why am I getting the alert box in
$(function() {
$('#users').each(function() {
var select = $(this);
var option = select.children('option').first();
select.after(option.text());
select.hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="users" name="users">
<option value="bad"><script>alert('xss');</script></option>
</select>
though I have the encoded version (<script>alert('xss');</script>) in the option text ??
I am trying to prevent showing the alert because I have encoded html in the option text.Can someone tell me what am i missing?
https://jsfiddle.net/hf1fbhmg/
I have encoded html in the option text.
That doesn't matter because you are getting a text representation of it (with text()). (Even if you were getting an HTML representation, the rules for how browsers convert the text in the DOM back to HTML might give you unexpected results anyway).
You then use select.after(that_text);. If you pass a string that looks like HTML (which you are) to after then jQuery will treat it as HTML. You need to explicitly treat it as text.
For example:
select.after(
jQuery("<span />").text(that_text)
);
am stuck over a small issue here.
I want to set the value of a input using JavaScript but jQuery is not displaying the full sentence.
var name = "Richard Keep";
But when I use try to do this
$('input#nameid').val(name)
to this input
<input type="text" id="nameid">
the value is set to Richard alone instead of Richard Keep.
How do I make the jQuery echo the entire string and not just the first word in a string? Thanks
EDIT:
<td id="To_be_collected_port" onclick="requestPopup()" class="tr-selected">
<div class="pop-td To_be_collected_port">
</div>
this is the content am fetching
</td>
This will display this only.
var str = $('#To_be_collected_port').text();
then
$('.xyz').html("<input type=\"text\" name=\"text\" id=\"selected-service-text\" value="+str+">");
You're missing escaped double quotes around the value attribute:
value="+str+"
should be:
value=\""+str+"\"
Fiddle - works now
Explanation of why it was displaying "this"
This means your input tag is effectively composing to this:
<input type="text" ... value=this is the content am fetching>
value = "this"
is, the, content, am, fetching = attributes without any value
That is odd behaviour. Here are a few things you can try
1) add a console log just before putting the value in the field. if it does not properly show the entire name then you probably have some code manipulating the variable.
console.log(name);
$('input#nameid').val(name);
2) stupid suggestion but is your input field visually not to small? Maybe it added the entire name but you just don't see it.
3) use an onchange event on the field to check if something was changed after you updated the input field.
I have a select input where I'm setting the multiple attribute via jQuery. I then have a console.log confirming that code functions correctly, then if i console.log again its no longer there. Any suggestions?
thisQuestionHTML is just a block of HTML code (2 divs wrapped around a select statement I'm casting as a jQuery object.
line 1: $(thisQuestionHTML).find('.answerValue').attr('multiple','multiple');
line 2: console.log($(thisQuestionHTML).find('.answerValue').attr('multiple','multiple'));
line 3: console.log($(thisQuestionHTML));
Line 1 : this is the non-debug code I'm expecting to actually set it
Line 2: this debug code is confirming its being set. It returns the select statement complete with the multiple="multiple"
<select class="answerValue" data-questionid="a0NJ0000008ZwjOMAS" multiple="multiple"></select>
Line 3: this debug code returns the select statement without the multiple attribute.
<div class="control-group">
<span class="control-label">MS picklist question</span>
<div class="controls">
<select class="answerValue" data-questionid="a0NJ0000008ZwjOMAS"></select>
</div>
</div>
You're creating a new jQuery object on each of the three lines because thisQuestionHTML is just a HTML string. jQuery isn't updating the string, thisQuestionHTML is never changed.
Line 2: this debug code is confirming its being set.
This^ is not true, you are setting the value once again (note the two arguments to attr()).
Store a reference to the object instead of creating new each time:
var obj = $(thisQuestionHTML);
obj.find('.answerValue').attr('multiple','multiple');
console.log(obj); // contains updated select
use filter()
$(thisQuestionHTML).filter ('.controls .answerValue').attr('multiple','multiple');