We Keep Coding

Setting a dynamic drop down value in JavaScript

I've been working on this issue for days and feel like I'm at a dead end so hoping someone can help out.
I have a form that's used to log calls. The form has two drop downs Reason and Resolution which are created using an array.
When a call is dropped for whatever reason I want the user to click a button called Lost Call and have it fill out the form with specific information.
It works for every field but the Resolution field. I can't get that one to populate.
The lost call button calls a function using onClick.
<Input type="button" value="Lost Call" onClick="LostCall()" />
All my code is HTML5 and JavaScript.
Here is my HTML code:
<select id="Reason"><option value=" "></option></select>
<select id="Resolution"><option value=" "></option></select>
The script I use to create the drop downs I got from here:
http://jsfiddle.net/bdhacker/eRv2W/
Other then changing the Variable names to suit my form and less options the code is the same.
The Question is how can I make it to where someone clicks lost call the form is filled out including the Reason and Resolution with specific values when the Resolution values are dynamically generated?
Here is the script for the Lost Call Button:
function LostCall() {
var Reason = document.getElementById("Reason");
Reason.Value = 'Misc/Other';
var Resolution = document.getElementById("Resolution");
Resolution.Value = 'Lost Call';
Using the above Reason is populated but not Resolution. Also note both Misc/Other and Lost Call are options available in the array I'm using.

EDIT: Updated fiddle.
Hmm, your code is working, as I've tried it in this quick fiddle
Are you simply missing a closing } or was that just a simple mistake when typing this question?

if the value you are assigning in the list of options, try this approach:
function LostCall() {
document.getElementById("Resolution").selectedIndex = "2";
}
check out the following resource (press the "try it yourself" button) : http://www.w3schools.com/jsref/prop_select_selectedindex.asp

Qualtrics javascript code only works when "viewing block", not when launching survey

I have created table with multiple input cells on one screen in a Qualtrics survey. The input cells were manually created using html, not standard input boxes used by Qualtrics due to the need for how the input boxes appeared.
I have been trying to use javascript and jquery to set embedded data based on what users input into the cells. I have been able to set embedded data to record when the users click on the cell again after writing something in it, but I would like to have the data embedded after they have finished writing in all the input cells and then click the next button.
I used the following code for the "on click" embedding:
Qualtrics.SurveyEngine.addOnload(function ()
{
this.questionclick = function(event,element){
var c = document.getElementById("cash").value;
Qualtrics.SurveyEngine.setEmbeddedData("chours", c);
}
});
And the following code for embedding the data when clicking the next button:
Qualtrics.SurveyEngine.addOnload(function ()
{
jq("form").submit(function(event,element){
var c = document.getElementById("cash").value;
Qualtrics.SurveyEngine.setEmbeddedData("chours", c);
}
)});
I have tried using this.clickNextbutton as well, which does not work. My problem is that I can get the data to embed when I am previewing/looking just at the individual question block in qualtrics, but it will not work once I have launched the survey and try to run it for real.

I think the problem is that qualtrics is first processing the next button before it attempts to process your JavaScript, at least when you try to run the real survey as opposed to just the preview.
One way around this, which might not be the most elegant, would be to create another button called "Submit" or something like this in HTML and to hide the next button. Now you can set the JavaScript for your "Submit"-button to save the answers as you have done before and then set a command to continue to the next slide as the last line in the same JavaScript.
You will need to use:
.hideNextButton();
and
.clickNextButton();
Hope this helps,
Felix

Custom action links in .PDF...write Javascript to alter the appearance of links when clicked?

I have a .pdf document that contains custom links which run Javascript code.
There is no issue with the actual functionality of the working portion of the JS, but I do have one formatting/display problem that I havent been able to solve:
Is it possible to write JS that will alter the appearance of individual links as they are clicked?
I know I can programmatically change the appearance of all links on a page by looping through the doc.getLinks result and applying formatting changes to each element of the getLinks array. But I don't know how to refer to a specific link, as/after it's clicked, either by referencing that link's index location within the getLinks array, or by referring to it by any other name, handle, etc.
I would think that this is probably possible to do, but I'm at a loss.
Thanks in advance for any pointers!
EDIT: One thing to clarify...I can do everything I need to do for a single button. That is, I can manually find the button name, and manually enter the JS code to change the appearance of that particular button. To do this, I need to physically look up the name of the button using a few mouse clicks, and then hard code that button's name in my JS getField command. This requires different code for each and every button.
Is it possible to accomplish the same function using the same code for each and every button?
My ultimate objective is to be able to reproduce this function on a series of .pdf files that will, jointly, have thousands of individual buttons. So any manual component of this process will make implementation impractical.
I should have originally phrased the question in terms of, is it possible to write JS code that can automatically detect the name of the button which is calling the code? (ie, how would I implement a self-referential feature for a generic button?)

As wished by the OP…
When a script should refer to the field on which it is running, the field object to use is event.target.
An example:
You have a button which, when clicked, should change the width of the border between 1 and 3. The mouseUp event would containt this piece of code:
if (event.target.lineWidth == 1) {
event.target.lineWidth = 3 ;
} else {
event.target.lineWidth = 1 ;
}
Or another example: when the number in the calculated text field is negative, it should be in red, otherwise in black:
In the Format event of that field, you would add:
if (event.value*1 < 0) {
event.target.textColor = color.red ;
} else {
event.target.textColor = color.black ;
}
And that should give an idea on how to use event.target.

jQuery onClick once with on/off switch

I am trying to figure out how to do something but can not figure out the correct terminology to do so.
What I am trying to do is have a textbox (#price) that when clicked once it will open up a pdf calculator that will then either prefill the textbox when completed or will then allow the user to enter the amount in. But I also want this to work if the textbox is "tabbed" over to also instead of the onClick. (Maybe onBlur) Basically anytime that textbox is used I need it to work like that. But how do I make the onClick know when the amount is ok to be entered or if the calculator needs to open?
What also makes this tricky is I need to have an On/Off switch basically a checkbox that when checked it allows that pop up pdf calculator and when its not checked it just ignores it and allows the price to be entered still.
Does anyone have any suggestions or pointers in how I can achieve this goal?

1. A textbox (#price) that when click once it will open up a pdf calculator
Use jQuery's click() handler or bind("click", ...)
var $price = $("#price");
$price.click(function() {
$("#pdf_calculator").fadeIn();
});
2. But I also want this to work if the textbox is "tabbed" over to also
Use the focus event to know when an input is active (i.e, has been "tabbed" to). Alternatively, the blur event can be used if you want to know when a user is "leaving" the input field. ('blur' is the opposite of 'focus')
$price.on("focus click", function() {
$("#pdf_calculator").fadeIn();
});
3. But how do I make the onClick know when the amount is ok to be entered or if the calculator needs to open?
Grab the amount typed in by the user, convert it to a numerical value, then perform your validation steps.
$price.on("focus click", function() {
// Do some validation checking on the amount entered.
var enteredValue = parseFloat($price.val());
if (!isNaN(enteredValue) && enteredValue > 0) {
$("#pdf_calculator").fadeIn();
}
});
4. What also makes this tricky is I need to have an On/Off switch basically a checkbox that when checked it allows that pop up pdf calculator and when its not checked it just ignores it and allows the price to be entered still.
Simply check that the checkbox is checked using jQuery's is(":checked") then combine the steps above, and your fully working code looks like this:
var $price = $("#price");
$price.on("focus click blur", function() {
// your checkbox element
var checkbox = $("#show_calculator");
// Check if the checkbox is checked
if (checkbox.is(":checked")) {
// convert the entered string to a number
// then validate it according to your needs
var enteredValue = parseFloat($price.val());
if (!isNaN(enteredValue) && enteredValue > 0) {
// if all conditions are met,
// show the pdf calculator
$("#pdf_calculator").fadeIn();
}
}
});
Click here to review a working jsfiddle of these ideas.
As for the pdf form (and getting values in and out again of a pdf form) there isn't a straight-forward method that doesn't involve a 'hack' (that may or may not work across different browsers). If the pdf only has ONE input, then you can capture the keyboard events on your form popup, and send them back to the HTML form (which is an ugly hack), but if this were my project, I would just convert the pdf functionality to javascript, and then you have all the freedom you need, and your calculator is 100% compatible with the rest of your application.
Hope this helps!

The event(s) you are looking for is onFocus and onBlur. I would bind a function to the onFocus event that first checks if the corresponding checkbox has a "true" (or "checked") value, then continue if it does and do nothin if it doesn't.
I'd create an example in jsfiddle for you if I wasn't answering this from my phone.

Bind event handler to focus event (blur is for when control looses focus).
$("#price").on({
"focus": eventHandler
})
Then in your eventHandler() check if calculator needs to be invoked, by checking if it's already opened: $("#calculatorDiv").is(":visible"), and checking if your checkbox is 'checked': $("#checkboxId").is(':checked'), and depending on that open it.

Keep cell color changed with checkbox on refresh

I have cells changing background color on checkbox check and I worked out how to keep the checkboxes checked on refresh (though looking back I don't think that works anymore), but I don't know how to keep the color change on refresh. I don't actually know Javascript at all and this is all from other questions but I want it to work. If I've done something completely wrong please correct me and don't assume I did it on purpose because I have absolutely no idea what I'm doing.
$(document).ready(function() {
$(".colourswitcher").click(function() {
if($(this).is(":checked")) {
$(this).closest("td").css("background","#ff3333");
}else {
$(this).closest("td").css("background","#202020");
}
});
});
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

Since you're new to javascript, I'm going to ask the dumb question: Have you included jQuery?
This code that you've pulled makes use of jQuery, a very useful library (not built-in to javascript) that has become so commonplace that people often don't even state its name when asking or answering a question involving it. But anytime you see that $ notation, you're probably dealing with jQuery.
You need to include the library file in your html file so it knows what those special symbols and syntax are:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
If you're testing this stuff in Google Chrome, press F12 and view the developer console. You will see "undefined" errors in red when you are missing things like this.

Here's another answer assuming you have a better working knowledge than my first answer:
The first bit of your code runs when the html document has loaded and attaches an event listener to change the nearest cell background color accordingly when the checkbox is clicked. Note two things here though. 1) that behavior will be attached to all html elements with the class "colourswitcher", not just inputs. 2) that behavior assumes that what was clicked has a property "checked", which only a checkbox does.
The middle bit I presume is supposed to run once, when the page is first loaded, to get the saved state of the checkbox from localStorage. This bit could be moved into the document ready bit.
The third bit of your code attaches an event listener to every input element (not just checkboxes) such that every time one is clicked, a checked true/false state will be saved in localStorage.
localStorage is a convenient way to save information between browser refreshes. You can save anything you want, ie. localStorage.CandyCanes = 7 and that variable will be stored in the user's browser and can be recalled later. Note that your above code will only work as intended if there's a single checkbox, because you're using one slot, or one variable, in localStorage to save: localStorage.input.
That's all I'm going to elaborate on this for now. If this is more than you expected, then it's time to hunker down and learn, or get a professional involved.