Here is my fiddle https://jsfiddle.net/juggernautsei/w8yn2ehk/
My jquery has gotten very rusty. The system says I have to put the code in here so here is a snippet below.
$(function() {
$("input[name$='notify_type']").click(function() {
var test = $(this).val();
var selected = $("input[type='radio'][id='notify_type3']:checked").val();
$("div.referral").hide();
$("#ref" + test).show();
if(selected == "4") var opts = [
{name: "Please Select", val:""},
{name:"WMOX", val:"WMOX"},
{name:"WVKL", val:"WVKL"},
{name:"WJDQ", val:"WJDQ"},
{name:"WOWI", val:"WOWI"},
{name:"WTOK", val:"WTOK"}
];
On the left is a list of referral types. I want the block on the left to change depending on the type of referral that is selected. Most of that is accomplished.
What I want to happen is notify_type3 should populate the dropdown list on the right according to the list type selected on the left. The first one works correctly. The rest do not. I think I need an on change but not sure where to place it. Suggestions please
I found a few problems. Two main ones:
1) The way you were getting selected only worked for the first one. For the others selected got the value undefined.
2) The way you decided which block on the right were to be shown ($("#ref" + test).show();) didn't work since test could have a value between 1 and 10 and you only had ref elements for 1-4.
Here is the changes I made: https://jsfiddle.net/w8yn2ehk/41/
Please note is still doesn't work for 7-10 because I only fixed the ones using the select block (ref3), but with this info it shouldn't be a problem to fix the rest.
Related
Okay, so I created this form that I use for work and it works pretty well considering my skill level is most definitely not professional. I learned HTML and JavaScript for a couple years in high school and have been self-taught on a lot of things since. Here's what I'm trying to do:
I have my form set up so that if I select an item from a drop-down menu and click a checkbox, the canned response I created is generated in the textbox. However, if I wrote anything in the textbox in advance, it gets wiped out. Now, the way I learned how to do this was based off of self-taught stuff I found online, so this is an example of what I have for the function that gets my canned responses:
function FillDetails29(f) {
if(f.checkbox29.checked == true) {
f.TEXT.value = ('' + f.trans.value + '')
} else {
f.TEXT.value = "";
}
}
I know that having
} else {
f.TEXT.value = "";
is going to wipe out anything that was there before or after if I uncheck the checkbox.
My question is what should I be doing to maintain my previous value when I uncheck the box? Example being:
Previous value to using the checkbox: Andrea looked good in that sweater.
Using the checkbox: Andrea looked good in that sweater. I wonder if there are any more at the store?
Unchecking the checkbox: Andrea looked good in that sweater.
I've done a lot of searching to see if there's something out there that can solve my problem but I'm afraid I'm not phrasing it right when I google it. Can anyone help me or point me in the right direction for this? I know that you guys don't want to just solve it for me and that I should be able to present some kind of example of what I've done to fix the problem but I've tried so many things that haven't worked that it would take too long to list them all without causing some kind of confusion. Even if you just have a website that you know of with an example of this that you can provide me, I'd be very grateful. Thank you!
Edit 1: To clarify, my original setup actually contains 3 forms. One form is for data entry where I input caller information and the checkbox for that spits out the entered data into a singular line of details for when I copy and paste into another program.
The second form is where I have quite a few checkboxes that I use because each section of the form requires separate canned responses. I work for a health insurance company on the phones with doctors offices (and soon I'll be talking to members as well) and I created the form to shorten the amount of time it takes for me to document information. So I have checkboxes that generate data for specific benefits, eligibility, authorizations, transferring the call, etc.
I have a lot of checkboxes to contend with. About 32, by my count. More, if I need to add them. Most of these checkboxes are connected with drop-down menus with the necessary canned response for it. Some of them are connected to their own textbox where I need to enter some kind of pre-determined data, such as a date of birth or a doctor's name. Those are not the focus, though. Once I enter data or select an option from the drop-down and click the corresponding checkbox, the data from that selected option appears in a main text area so that I can copy and paste the response to the work program.
The third form is one that's generated for claims information and has 10 checkboxes on it.
So, if you require more examples of what I'm referring to, I can provide them but it will take a few minutes for me to scrub the work related data that out of the canned responses I created.
Edit 2: The response I got from Epascarello was extremely helpful and I've been trying to experiment with different ways to keep the previous value at the start of the new text being inserted from the checkbox with no luck in getting what I'm looking for, though something unexpected has happened when I start with an empty box and select an option after I altered the code he suggested to this:
function FillDetails29(f) {
const elem = f.TEXT;
if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
const updatedValue = f.checkbox29.checked ? f.trans.value : (elem.dataset.prevValue || '') + (f.trans.value);
elem.value = updatedValue;
}
What started to happen is that if the box was blank previously and I selected an option, the option would generate. Then, if I unchecked the box, the option would remain. If I selected a new option, the new option generates. If I then unchecked the box, the first option and the second option would be there.
Example:
First option selected: Andrea looked great in that sweater.
Second option selected: I wonder if it's on sale now?
When unchecked, first option remains until second option is checked. When second option is unchecked, this is what results (from the same drop-down and checkbox): Andrea looked great in that sweater. I wonder if it's on sale now?
Now, I added the same kind of element to another checkbox item in the same area resulting in the code looking like this for that section:
function FillDetails28(f) {
const elem = f.TEXT;
if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
const updatedValue = f.checkbox28.checked ? f.dental.value : (elem.dataset.prevValue || '') + (f.dental.value);
elem.value = updatedValue;
}
function FillDetails29(f) {
const elem = f.TEXT;
if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
const updatedValue = f.checkbox29.checked ? f.trans.value : (elem.dataset.prevValue || '') + (f.trans.value);
elem.value = updatedValue;
}
And if I do something similar there, checking box 28 and then checking box 29, only whatever was most recently checked will materialize there. However, once everything is unchecked, each selected option will appear in the text box.
Example:
Checkbox 28 selected: Steven doesn't look good today.
Text area shows: Steven doesn't look good today.
Checkbox 29 selected: Andrea looks good in that sweater.
Text area shows: Andrea looks good in that sweater.
Checkbox 28 unselected with 29 still selected, text area shows: Steven doesn't look good today. Steven doesn't look good today.
Checkbox 28 and 29 now unselected, text area shows: Steven doesn't look good today. Andrea looks good in that sweater.
How should I be fashioning this so that those two options materialize one after another when the boxes are checked rather than when they're unchecked?
You can store the value into a data variable and reference it.
function FillDetails29(f) {
const elem = f.TEXT;
if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
const updatedValue = f.checkbox29.checked ? f.trans.value : (elem.dataset.prevValue || '');
elem.value = updatedValue;
}
I have the following side-by-side question in Qualtrics.
Picture of question
The dropdown menu in has the same four statements as presented in the Statement Choices and 'Dummy Column'. I am trying to get the default choice for the dropdown to be the value in the 'Dummy Column'.
Using the following code, I can get the dropdown value to equal the Statement Choice column:
// Default Choice
var $embedded = [];
var $length = $jq(".SBS2 select").length;
for (var i=0;i<$length-1;i++)
{
$embedded[i] = $jq(".Choice .c1").eq(i).text().trim();
$jq(".SBS2 select").eq(i).find('option:contains(' +$embedded[i]+ ')').attr('selected','selected');
}
$jq('.SBS1').hide(); / Hide Dummy Column/
I am struggling to update the code to pick up the value in 'Dummy Column' instead. I have tried updating ".Choice .c1" to ".SBS1 input" but it just selects the last value in the dropdown list for all rows.
Can someone help with what I am doing wrong?
Thanks in advance
Two things:
1. Your values are in text input fields, so you need to get the values of those fields.
2. Your selector needs to find the text input fields, so '.SBS1 input' is correct.
Thus, change your $embedded[i] = line of code to this:
$embedded[i] = $jq(".SBS1 input").eq(i).val().trim();
It seems you are doing it the hard way though. Why not just pipe your default values into the $embedded array to being with instead of creating a dummy column that you then have to hide?
var $embedded = ["${e://Field/ed1}".trim(), "${e://Field/ed2}".trim(), etc. ]
You could then delete the $embedded[i] = line altogether.
P.S. This isn't PHP where you need $ in front of variables...it actually makes it a bit confusing at first glance. Also, no need to assign jQuery to a variable, just use jQuery.
I'm using custom post types in the woocommerce checkout page - to add details of a car entering a race. The car fields are pulled from the CPT car's based on the user_id logged in user. The problem I am facing is the value is getting stored in the order rather than the text of the field. eg. Ford, Fiesta, 2001, black,
what I am getting in the order is 488, 488, 488 etc
I am also storing the class the user is entering their car in - this too is showing correct on the front end - however storing the value in the back end. I've tried jquery/javascript - which I couldn't get to work.
code:
<script type="text/javascript">
var car_text = $("#my_car_select option:selected").text();
$(function(){
$('select').change(function(){
$('select').val( $(this).val() );
var selectedText = $("#my_car_select")[0].textContent
})
})
$car_selected_name = $('#my_car_select:selected').text();
$("#my_car_select").change(function(){
var car_text = $("#my_car_select option:selected").text();
});
</script>
I've also tried to query the CPT based on the ID - however this doesn't work either, I keep getting an array, not just the field text.
I am very frustrated as the option text is on the screen on the front end just not getting stored on the backend - Something really simple which I can't figure out. Any help would be greatly appreciated.
Thanks.
From what you have said it sounds like you just need to get the value from the selected option?
You almost have it right just need a space before :selected
e.g
var selected_text = $('#my_car_select :selected').text();
Which should return the selected element.
Let me know if this is still causing any issues, might help to see the source of the element you need to fetch this from.
Here's the jsfiddle for the code http://jsfiddle.net/VFskn/2/
The jquery multiselect2side has 2 parts for the list say the Available and Selected
a.To get the values of Selected portion of the I used the following code:
var multipleValues = $("#columnList").val() || [];
b. To get all values of the list I can use:
$('#columnList option').each(function() {
columns.push( $(this).attr('value') );
});
My Question is how I can obtain the Available portion of the list
If I understand your question right, you want to get the value of every option that is in the select under Available?
In the given example this select has the id "columnListms2side__sx", so that you can get the values of its options with
var multipleValues = [];
$("#columnListms2side__sx option").each(function()
{
multipleValues.push($(this).val())
});
here's the updated fiddle: http://jsfiddle.net/VFskn/3/
!important notes though: its not a good idea to mess with it, other then the functions provided by the plugin.
And I'm not sure how safe it is too assume that this select will allways get this id (e.g. if you have multiple of them in one page). It might be smarter to, build a more generic select. (the plugin seems to create a div container after the select it replaces, you want to get the first select in there)
EDIT:
this would be more generic, but less efficient:
$("#columnList").next().find("select").filter(":first").children().each(function(){...}
updated fiddle: http://jsfiddle.net/VFskn/4/
Ok I made a site a while back and always had issues with the menu system is needed. Basically you click a location on a map, then it displays the list of sub locations in the dropdown menu to the right. These are always their they just chance to display based on the options class.
I have put the site at shiftera.co.uk so you can see it their.
The issue first.
1) IE - The list never filters out, it displays all results all the time regardless of class.
2) Chrome - The dropdown is sometimes squashed showing 1 result and hiding the others you need to use up/down arrows to change, sometimes it shows 3, sometimes 4.
3) Firefox - The list displays in 1 long row, not like a usual dropdown.
I think the issue is more of a css problem or multitude of css problems.
An example of the map link is
Scotland
The dropdown list although not seperated is generated from the database and appears as below
<option value='AB25 1UH' class="Scotland">Aberdeen</option><option value=' WA14 4DW' class="Northwest">Altrincham</option>
As you can see, some have the space before some don't. The dropdown has the id of apick and Im using css below to hide it on load.
#apick { display: none; }
Here is the javascript to display the correct items based on map click.
//<![CDATA[
$(document).ready(function(){
$('.areaselect').on('click', function(event){
$('#apick').css('display','inline');
var id = $(this).attr('id')
$('#apick option').not('.'+id).css('display','none');
$('.'+id).css('display','inline').first().attr('selected','selected');
event.preventDefault();
});
}); //]]>
This has been driving me mad for a long time now, it seem's if i fix 1 issue another 2-3 get created. So I figured i'd try here and see if any brightspark can narrow down my issue.
Updated removing windows load as per change to main website.
The simple answer is that you are setting the style to inline. An <option> tag should not be inline, or have any style like that. The inline style i causing the problems.
Instead add the <option> tags when you need them. Store all the values in a object to add/remove them.
By the way. Remove that window load thing.
Here is the javascript fix:
$(document).ready(function()
{
var options = $('#apick option');
var values = $.map(options, function(option)
{
return option;
});
$('.areaselect')
.on('click', function()
{
var apick = $('#apick').empty();
var id = $(this).attr('id');
var newValues = $.grep(values, function(n, i)
{
return $(n).hasClass(id);
});
apick.append(newValues).show().find('option:first').attr('selected','selected');
return false;
});
});