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.
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;
}
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.
First, please forgive me, as I know very little about JavaScript, and am trying to make something work without knowing proper terms and syntax. I am working within the CMS called "ViArt." A lot of what is going on is handled by php, and I only have access in ViArt to add JavaScript to an onChange event for a listbox.
Here is what I'm trying to accomplish:
The product is sunglasses. Different frame colors in a listbox 1 are designated by a numerical prefix. There are 30 different lens color options for each frame color, and these lens colors are chosen in listbox 2.
Using my current code, for each frame, I have to go in the JavaScript for each frame and manually enter the numerical prefix designated to that frame.
This is my current, working code in an onChange event:
=================================
var FrameNo = '01';//ENTER FRAME NUMBER
var ImagePath = 'images/GlassesBrand/Rx/GlassesTest/';//ENTER PATH TO IMAGES
var ImageNamePrefix = 'GlassesTest-XL';//ENTER NAMING CONVENTION
// This changes the IMAGE hyperlink to larger image to match user's selection
document.getElementById('blackImg').href=ImagePath + 'Large/' + ImageNamePrefix + '-Frame' + FrameNo + '-Lens' +
this.form.property{form_id}_{property_id}.options[this.form.property{form_id}_{property_id}.selectedIndex].text.substrin g(0,2) + '.jpg';
=================================
The change I want to make, is that I don't want to have to hard-code "FrameNo." I want to call that dynamically within the onChange event, by looking up the selectedIndex of listbox 1.
=============================
In an onChange event for list box 2, named "{property_id}," I am trying to get the selectedIndex of a listbox 1, named "{property_parent_id6385_6773}"
{form_id} value is 6385
{property_id} is listbox 2, and in this example, the value is 6773
{property_parent_id6385_6773} value is 6765, and in this example, this refers to listbox 1
{property_parent_id6385_6773} is named dynamically by a php script or something. For example, on the next form, it may be called {property_parent_id6400_6800}. So I am trying to program the JavaScript to dynamically refer to the property_parent_id####_####, based on whatever form and list box I'm working with.
When I hard-code or semi-hard code it for testing, the following methods work:
this.form.property6385_6765.selectedIndex;
and
this.form.property{form_id}_6765.selectedIndex;
I don't know the syntax, so I thought declaring some things in variables might help me get what I needed.
From my notes:
var FrameBox = [this.form.property_parent_id6385_6773.value]; //WHICH EQUALS "6765"
var FrameNo = 'this.form.property' + {form_id} + '_' + FrameBox + '.selectedIndex';
RESULTS IN:
http://www.companyname.com/images/GlassesBrand/Rx/GlassesTest/Large/GlassesBrand-GlassesTest-XL-Framethis.form.property6385_6765.selectedIndex-Lens02.jpg
Whereas, an example of the result I am seeking is:
http://www.companyname.com/images/GlassesBrand/Rx/GlassesTest/Large/GlassesBrand-GlassesTest-XL-Frame1-Lens02.jpg
==============================
In summary, I know what I need, but I don't understand enough of the syntax.
I know this could be better phrased, but this is all new to me. On the bright side, I am now inspired to take a class in JavaScript.
Any help would be greatly appreciated.
This is more of a calculated guess but could be worth a try.
this.form.property_parent_id{form_id}_{property_id}.options[this.form.property_parent_id{form_id}_{property_id}.selectedIndex].text
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/
I have been struggling with Backbone the last few days in trying how to best approach dealing with some dynamic elements added by a user and sync those successfully with the database. I have one model and one view.
The model created is fairly straightforward, it represents a product(t-shirt) in a database and has the attributes: id, price, size, brand, colors.
The problem I am faced with is the colors attribute. The colors cannot be pre-populated by design (unfortunate as it may be) to allow for the user to enter any custom color and name it as freely as they want. In addition to the name, the user has to specify if the color is available. Clicking the Add Text button/link will have an input field and dropdown appended to the div below.
My question: What is the best way to add these multiple color properties as ONE attribute of the model?
I need to have all the colors/availability values as one property when it attempts to insert or update itself with the API as the colors property and goes into one row in the db (mysql). I believe the backend programmer has this row configured as a type of TEXT.
e.g.
{"colors": [{"blue":true},{"orange":false},{"white":false}]}
My thinking is that I need to obviously have some sort of nested JSON within the model but I can't figure out how to write this properly. Any help or something to point me in the right direction would be much appreciated.
Ok, this solution involves jQuery maybe a bit too much, but should work fine. Basically, listen to both changes of your color textboxes and select:
events: {
'change .colorText': 'setColor',
'change .colorSelect': 'setColor'
},
setColor: function() {
// here make your `color` attribute's array
var colors = [];
this.$('.colorText').each(function() {
var val, color;
// adapt the next to navigate to the corresponding select...
(val = $(this).val()) && (((color = {})[val] = $(this).next().val()) || 1) && colors.push(color);
});
this.model.set('colors', colors);
}