Develop Reference

Simple jquery/javascript dropdown menu with 2 outputs (1 img, 1 title)

Please forgive me I'm self-taught with large pockets of knowledge missing ><
I found some code (probably from you guys here at Stockoverflow!) and managed to get it to work in my site. There is only 1 change I need to make to my jquery but it's not working when I do it.
This is the unchanged version
(the dropdown list is what I am working on)
HTML
<div class="prints">
<div><img class="printShop" src="art_images/anime_art_prints/p000a.png" name="image-swap"></div>
<div><span class="titleName" name="title-swap">Title of Artwork</span></div>
<div>
<select name="printchoice" id="printchoice">
<option data-tname="Select" value="art_images/anime_art_prints/p000a.png">Please Select your Print</option>
<option data-tname="Selected One" value="art_images/anime_art_prints/p000b.png">A Sassy Catgirl</option>
<option data-tname="Selected Two" value="art_images/anime_art_prints/p000c.png">Mermaid Friends</option>
<option data-tname="Selected Three" value="art_images/anime_art_prints/p000d.png">Galaxy Girl</option>
</select>
</div>
</div>
JS
$(document).ready(function(){
$("#printchoice").change(function(){
$("img[name=image-swap]").attr("src",$(this).val());
});
$("#printchoice").change(function(){
$("span[name=title-swap]").html($(this).val());
});
});
This works how I want it, but it puts the text of the option's value="" into the title span. I want the options data-tname="" text to show instead. I tried to replace val() with data('tname') in the second paragraph to no avail. that just seems to break it :(
If it isn't too much of your time, could you take a quick look and see if it is something super simple that I need to change that can make it work how I need it to?

$("#printchoice").change(function(){
$("img[name=image-swap]").attr("src",$(this).val());
$("span[name=title-swap]").html($(this).find('option:selected').attr('data-tname'));
});

Can the value obtained by dijit.byId('').value be compared to a String?

I am relatively new to Spring MVC and Dojo/Dijit widgets and I am stuck with a problem. I need to unblock a particular div based on the option selected from the dropdown i.e. when the user selects the reason as "Unexperienced" I am supposed to unblock a div with id = "unexpUser" style="display:none;" to collect some additional information.
JSP -
<select data-dojo-type="dijit.form.Select" name="userReason" id = "reason">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</select>
JC -
<script>
if(dijit.byId('reason').value == "opt1"){
unexpUser.style.display = 'block';
}
</script>
When the page loads, the option displayed on the dropdown is "Experienced". When I change the option to "Not experienced" , I need to unblock the div but this particular code doesn't seem to be the right code for comparing. Please help.

.value is not the right way to get value from a dijit widget instead use:
dijit.byId('reason').get("value")

Use onchange listener :
dijit.byId('reason').on("change",function(evt){
alert(evt); //(evt == value of option )
// your code here
});

okay I got my mistake. This is the solution. #Harpreet Singh your solution works perfectly with this code.
JSP-
<form:select data-dojo-type="dijit.form.Select" path "" name="userReason" id = "reason" onchange="myFunction1();">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</form:select>
and in my JS I created a function for the String comparison.
JS -
<script>
function myFunction1(){
if(dijit.byId('reason').get("value") == "opt1"){
unexpUser.style.display = 'block';
}
</script>
this works. Thank you so much for your help!

Grab value from input field on SHAREPOINT INFOPATH browser enabled form

I'm trying to get the value of a textbox into a JavaScript variable. ultimately I'm trying to hide or show different webparts depending on the value in the textbox. I'm piecing the code together to test for input first. Below is the code for the textbox in question that I pulled from Firebug:
<input onfocus="return (TextBox.OnFocus(this, event));" onblur="return (TextBox.OnBlur(this, event));" oninput="return (TextBox.OnInput(this, event));" id="ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0_V1_I1_T82" scriptclass="TextBox" class="z_VYBB68eomwymAKXW_0 c5_VYBB68eomwymAKXW_0 ef_VYBB68eomwymAKXW_0" wrapped="true" direction="ltr" viewdatanode="83" formid="ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0" originalid="V1_I1_T82" tabindex="0" title="" value="Visible" style="position: relative;" type="text">
If I use the code below I get an "Undefined" error message(popup). As you can clearly see though, the value of the textbox = "Visible" as the code above tells us.
$(document).ready(function()
{
var HideWeb = $("#ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0_V1_I1_T82").val();
alert(HideWeb);
});
I've also tried the following with no success (popup returns empty).
var HideWeb = document.getElementById("#ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0_V1_I1_T82").value;
alert(HideWeb);
I've also tried using the other ID numbers in hopes that one of them would work in the JavaScript\Jquery code above. If someone could pick this apart and help me determine what the problem is I would appreciate it.Thank you.
This correspondes to a question I asked here.......
https://sharepoint.stackexchange.com/questions/113969/showing-hiding-webparts-conditionally

you may try..
$("input:text[originalid='V1_I1_T82']").val()
This will return you the value..

try removing "#"
var HideWeb = $("ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0_V1_I1_T82").val();

Triggering auto click within a website using Chrome Extension - JQuery

I am currently trying to work out an experiment of mine with using this site:
http://store.nike.com/us/en_us/pd/lunarglide-5-running-shoe/pid-726047/pgid-726952
What I am trying to accomplish is that, a default shoe size will be entered by user on the chrome extension end and once they hit this page, it will auto click the right size and click add to cart.
I have accomplished all this except it wont submit, it tells me to add a shoe size.
The Gif:
$(document).ready(function(){
checkForData();
$('.add-to-cart').trigger('click');
});
function checkForData()
{
$('ul.footwear li').removeClass("selectBox-selected");
chrome.storage.local.get('value', function (results) {
$('ul.footwear').find('a').filter(function(idx, el){
return $.trim($(this).text()) == $.trim(results.value);
}).closest('li').addClass('selectBox-selected');
$("a.footwear span.selectBox-label").text("("+$.trim(results.value)+")");
});
}
if you look at ..}).closest('li').addClass('selectBox-selected'); I have tried using a trigger event as if it was clicked but nothing happens so I just gave it the class that it would have if someone clicked it.
David

There's a select input in there as well..
<select name="skuAndSize" class="size-dropdown mediumSelect footwear selectBox" style="display: none;">
<option value=""></option>
<option class="size-not-in-stock" name="skuId" value="3096786:6">6</option>
<option class="size-not-in-stock" name="skuId" value="3096787:6.5">6.5</option>
<option name="skuId" value="3096788:7"> 7</option>
<option name="skuId" value="3096789:7.5" selected="true"> 7.5</option>
..........
..........
</select>
My guess is you need to be selecting an option here before you try to submit. After all it's the variable here that will get posted in the form. What you appear to be doing is just changing the DOM UI.
Adding this might work:
$("select[name='skuAndSize']").val("3096789:7.5");

My Javascript code doesn't work in chrome

I write ajax on my page, to get subcategories in select option, depending on categories option list click. In all browsers it works good, i can see my request, response in browsers console... but in chrome functions even doesn`t call. Dou you know, in what the problem is? Here is my code:
<td>
<span style="color: #898989;">Main categories</span>
<br />
<select style="width: 200px;">
<?foreach ($main_categories as $item){?>
<option onclick="get_sub_cat(<?=$item['id']?>,2);return false;" value="<?=$item['id']?>"><?=$item['title']?></option>
<?}?>
</select>
</td>
<td>
<span style="color: #898989;">Subcategories</span>
<br />
<select name="sub_cat" style="width: 200px;" id="prod_subcat_2">
</select>
</td>
function get_sub_cat(id, select_id){
$.ajax({
type: "POST",
url: "<?=base_url()?>admin/product/get_sub_cat/"+id,
data: "",
success:function (option_list) {
$("#prod_subcat_"+select_id).children().remove();
$('#prod_subcat_'+select_id).append(option_list);
}
});
}

An <option> elements onclick is not universally supported, instead use an event of the parent <select>
$('#theselect').change(function() {
alert( $(this).val() );
});​

1) If you run on local folder and not running on server, then chrome have security reasons not to run these type of javascript calls. There is multiple threads around stack overflow about running localy javascript ajax calls on chrome if thats the case.
2) Try your javascript with simple alert("hey"); to check if javascript is working or its the ajax.
3) If javascript works. Use google "Developer tools" ctrl+shift+i, set breakpoint on your javascript call and check what get passed as variable and wheres the problem.
4) If javascript dont work try this http://support.google.com/chrome/bin/answer.py?hl=en&answer=114662

Try attaching an onchange event handler and getting the selected element from the select element passed into on the event. It probably doesn't make sense to attach event handlers to individual options.

You need to add some quotes :
get_sub_cat(\"<?=$item['id']?>\",2)
you need to send this parameter as a string.
Are you sure your JavaScript is in a <script> tag ? the question doesnt show it
<script>
// your javascript
</script>