We Keep Coding

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.

Automatically updating a PHP variable when a radio button or dropdown menu item is selected

My classmates and I are building a small submission form in which a user submits shipping and billing information for their order.
The two main factors that effect the order price are the type of shipping the user selects ( $shippingType ) and the price of the item ( $initialPrice ). The variable $totalPrice is then defined which adds $shippingPrice and $initialPrice.
What we are working towards is having $totalPrice update when $shippingPrice is changed without the user having to resubmit the form. Can this be solved using php? Or would we have to use a jquery event to update the page in realtime.

You'll want to use some sort of jQuery as mentioned above. It's important to understand that PHP is only used either in AJAX, or before the page has loaded. Meaning you cannot use PHP on a page that has already been loaded. To change elements after it's loaded you would need to use javascript/jquery of some sort. I've attached a quick fiddle to illustrate an example of what I think you're looking for.
The gist of it is that you would bind a change event so that when the elements you want to use for mathing are changed you can update the other items.
$('#shipping').bind('focus, change', function() {
//Get the inital value of the #cost input
var initial_val = parseInt($("#cost").val());
//Value from the #shipping input
var additional = parseInt($("#shipping").val());
//Parsed ints because '+' is used for concatination as well, so making the vars ints will make '+' go back to math.
$("#cost").val(initial_val + additional);
});
No it's not the prettiest, but it works.
Here's the Fiddle:
http://jsfiddle.net/Lb486ck8/2/

You will have to use Javascript to accomplish this behavior. Furthermore, you will need to use AJAX (Asynchronous Javascript And XML) to make it work. AJAX is a way for Javascript to send requests to a web page "behind the scenes" while your page stays in the foreground.
http://api.jquery.com/jQuery.post/

Updating a text box with javascript

I am having some trouble with some javascript and how it can control the html "text box".
First, here's what I have;
javascript:
function UpdateOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=false;
document.getElementById("add").disabled=false;
document.getElementById("submit").disabled=false;
document.getElementById("edit").disabled=false;
document.getElementById("update").disabled=true;
// Show display box, 'DispCurOrder'
document.getElementById('all_labels').disabled=true;
}
function EditOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=true;
document.getElementById("add").disabled=true;
document.getElementById("submit").disabled=true;
document.getElementById("edit").disabled=true;
document.getElementById("update").disabled=false;
document.getElementById('all_labels').disabled=false;
}
The Idea is simple... I have some buttons and inputs to generate a 'line' of text that get's dumped to the disabled text box. If the operator notices that they made a type-o or want to change something, they click on 'edit order' and it disables all the regular buttons, and enables the text box and 'update' button. The 'update order' button reverses this.
Now, when I just use the add lines to the text box, all works well. You can see each line get appended to the text box (there's another java function that does a bunch of error checking and such, but the crux is that it takes the contents of the text box, parses it on the "\n" to an array, then appends the new line of text. It then takes the array and puts it all together as a new string and puts it back into the text box. Here is that portion without all the error checking stuff;
function AppendOrder()
{
// let's set up an error flag.
var AppendError="";
var str1=document.forms["MyForm"].DataEntry1.value;
var str2=document.forms["MyForm"].DataEntry2.value;
if( /* checking variable str1 for errors */)
{
AppendError="Error in str 1 here";
}
if( /* checking variable str1 for errors */)
{
AppendError=AppendError+"Error in str 2 here";
}
// Display the error message, if there are no errors, it will clear what was there.
$('#AppendStatus').html(AppendError);
if(AppendError=="")
{
// it's all good, update the display
// create line of text
curEntry=str1 + " -- " + str2;
// let's get the current order into a list
str=document.getElementById('all_data').innerHTML;
if(str1=="Empty")
{
// make curOrder = to 1 element array of curEntry
var curOrder=[curEntry];
}
else
{
// parse str1 into an array and parse it to curOrder.
// Then push curEntry on the end.
var curOrder=str1.split("\n");
curOrder.push(curEntry);
}
// now we should have an array called 'curOrder[]'. Let's show it
// on the web page.
$('#all_labels').html(curOrder);
}
}
Now, the problem that I'm having is that after I add a line or two (or more) to the display using the 'add' button and then go into the 'edit' mode (where the text box is enabled) and I make all my changes, the 'add' button doesn't work.
Oddly enough, when I press the 'reset' button (which is just a reset button) it then shows all the adds I did after the edit, and the edited stuff is gone.
Now... to the question... is there something I'm not understanding about the text box? Is there some trick I need to do to get it to work? Am I going about this all wrong? Should I be using a different tool for this other than the 'textbox'?
Any help is greatly appreciated!!
Greg

Found the typo in your jsFiddle.
The first thing that I did was to add:
alert('hi there');
to the very top of the script, inside the $(document).ready() wrapper. Note that on jsFiddle you cannot see the document.ready wrapper, it is invisibly included, so just put the alert at top of javascript block as I did (link to my new jsFiddle is at bottom of answer)
Next, I noticed that you are enabling/disabling several controls by referencing them individually by ID. You can reference several controls at one time if they share the same class, so I invented the class="orderentry" and added that attribute to each of those controls. This removed 8 lines of code, which made troubleshooting easier.
Then, I began deleting/undeleting. First, I deleted everything in the javascript panel except alert('hi there');, and ran the jsFiddle. The alert popped up. Great. So I used Ctrl+z to undelete everything. Next, I selected everything EXCEPT the next block of code, and deleted the selection. I ran the jsFiddle, and again the alert popped up.
I continued deleting/undeleting until I found out where the alert no longer worked -- and that revealed the offending code block. Just had to carefully study the syntax in that specific area and found the error:
$('#txtOrder').attr({'disabled':'disabled')}; <== ERROR: note final parentheses
instead of
$('#txtOrder').attr({'disabled':'disabled'}); <== CORRECT: note final parentheses
Hope this helped, good luck on the rest of your project.
Here is the corrected jsFiddle

You didn't share your HTML, so I made assumptions about what your markup looks like.
Working jsFiddle here
The above jsFiddle is a much simplified version of what you are creating. Obviously, it is very different from what you have done so that I could create it quickly.
Observe how I made certain things happen with jQuery; take what is useful and ignore the rest.
Specifically, you can see how I initially disabled the textarea control:
$('#txtArea').attr({'disabled':'disabled'});
Re-enabled the textarea control for editing, while also hiding the Edit button and displaying the Save button:
$('#txtArea').removeAttr('disabled');
$('#btnSave').show();
$(this).hide();
Importantly, this is how I ensure each addition adds to (rather than overwriting) existing content:
var ord = 'Requested By: ' + $('#txtReq').val() + '\r\n';
Very likely you already know many (most?) of the things I am pointing out, but I have no idea what you know so, again, keep the one or two things you find useful and ignore the rest. I only hope I've managed to hit on the bit that has you stumped at the moment.
I very rarely recommend W3Schools for anything, but look here for their excellent summary / reference of jQuery selectors, events, methods. (Keep hitting Next Chapter to cycle through all pages of this reference).

JQuery Cycle Plugin needs to cycle to next slide on post back if validation group not valid

I'm using the JQuery Cycle plugin (with attributes defined in a separate site wide custom js file) to cycle between two pages (separated by tables) of a form. Each page has its own validation group for the controls on that page. The first page has a "Next" button that when clicked manually fires page validation for the first validation group. If it fails the tool tips are displayed for the user to correct the information. If validation succeeds, the cycle next command is called.
$('#request-information').cycle('next');
On the second page, the controls are grouped in a second validation group with the submit button. When the submit button is clicked, server side validation is triggered and if it fails the page reloads on postback. All of this works, except if the second page fails I want the form to stay on the second page. So if the web page is reloaded because the second page of the form failed to validate I need to either set the starting slide to the second page of the form or if that's not possible at least trigger the cycle next command.
It doesn't seem like I can just set the startingslide to the second page of the form because that will overwrite the other defined attributes of the cycle function that are set in the separate js file.
So does anyone know how to advance to the second slide on postback page load based on whether the second validation group failed when the submit button was clicked? Or should I be doing something different using viewstate or something?
Sorry this is a long winded question. Hope its clear and not confusing.
Thank you

If you know that you need to go to the second slide when your page loads then you could do something like this:
var init = { startingSlide: 1 }; // i.e. second slide, the indices are zero-based
$('whatever').cycle($.extend(init, the_name_of_your_global_default_options));
You'd just have to arrange for init to be an empty object literal except when you needed to set startingSlide. If .cycle() is being somewhere outside your page, then you could reserve a variable for page-specific options and $.extend() that where .cycle() is called. For example, in your page, you could do something like this:
app_name_space.page_cycle_opts = { startingSlide: 1 };
and then way off in the JavaScript file that is binding the cycle stuff:
app_name_space.page_cycle_opts = app_name_space.page_cycle_opts || { };
$('whatever').cycle($.extend(app_name_space.page_cycle_opts, default_options));
I'm using app_name_space as a placeholder for whatever global namespace your application is already using to avoid name conflicts. If you had to deal with multiple cycle instances on a single page then you'd want to index page_cycle_opts by element ID, for example:
app_name_space.page_cycle_opts['X'] = { startingSlide: 1 };
and then way off elsewhere:
$('whatever').each(function() {
$(this).cycle($.extend(
app_name_space.page_cycle_opts[this.id] || { },
default_options
));
});
The basic idea is to consider the global configuration options as a set of defaults and then allow page-specific overrides through a well defined and documented mechanism.
A long winded answer to a long winded question. Hope its clear and not confusing.