Wordpress - Drop Down Menu auto select using button - javascript

Hey guys I'm wondering if the below is possible in WordPress based on the scenario, also these are the plugins I'm using Contact Form 7 and Contact Form 7 Conditional Fields:
I have 3 pages:-
Page A which has a list of products.
Page B which is a single product that would've been clicked on from Page A and also has a button that leads to Page C.
Page C which is basically a contact page with 2 conditional field groups where the user can either select "General Question" or "Product Inquiry". After one of the two options is selected, a set of fields will appear respective to the option selected. When the "Product Inquiry" in particular is selected, another drop-down list will appear which has the list of products in which the user will choose which product they're inquiring about.
So what I want to know is if there is a way that when the user clicks on the button from Page B and it then goes to Page C, how can it automatically choose the "Product Inquiry" drop-down option and then select the same product from which they came on the list of products drop-down that has now appeared? I want to lessen the manual work for the user.
I'm thinking maybe the button could work like some sort of accordion select where you just set the #id of the accordion you want to open in the hyperlink/url.
Any thoughts would be great, thanks.

You can set a $_GET. Let's say you have products: "Ball", "Bat", and "Gloves". Here's an example:
<button>Click here for ball</button>
<button>Click here for bat</button>
<button>Click here for gloves</button>
Then in your Contact Form 7 form settings, you would have something like this:
[select* menu-10 default:get "Ball" "Bat" "Gloves"]
You would obviously change menu-10 to whatever your menu ID is.

Related

I want to make a category and sub category select menu in pug and node.js. Where Subcategory changes based on category selected

I know how to render a simple menu using
-var={} and adding the value and names in it but for my work flow i want a category menu with categories like electronic , sports etc such that if i select sports the other sub category menu only shows different sports. I need to do it dynamically with one form and the values should change without hitting the submit button
I Tried something like this
but it only renders one menu
-var selected=''
-var dic ={ 'Sports': 'Sports', 'Tech': 'Tech'};
select.custom-select
option(selected='') Open this select menu
for key,value in dic
option(value=key)=value
selected=value
if selected==='Sports'
select.custom-select
option(selected='') Open this select menu
option(value='1') football
option(value='2') cricet
if selected === 'Tech'
select.custom-select
option(selected='') Open this select menu
option(value='1') Mobile
option(value='2') Tablets
Pug is not designed to do dynamic (reactive) page rendering. It's a domain of different JS libraries out there such as Reactjs or Vuejs. Pug is a templating engine that will render your HTML once.

Javascript for showing/hiding flagged options in dropdown menu

I am trying to write a Javascript for a drop down menu on my JSP page. Basically, The drop down retrieves a bunch of options from a database query, and the options are sorted by a flag in the query (1 or 0). So the options at the top of the dropdown menu are all the options with 1, and below that are all the options with 0.
What I would like to do is only show the options flagged as 1 upon clicking on the dropdown, and then at the bottom of that list of options, have a "show hidden options" option that the user can click to show the rest of the options (the ones flagged as 0).
Does anyone have any ideas for how to achieve this?
Thank you

Pop a message when user click on dropdown menu in configurable product?

In a configurable product page, I am trying to display a message when the user chooses an 'out of stock' product from the dropdown menu (where there is the different size the product is available in).
The problem is I don't know where is the JS code that's used when click in the dropdown menu.
My dropdown menu looks like this:
Choose a size
38 - Out of stock
40
42
44
...
How can I do what I want ? I searched in js/varien/configurable.js but I'm not sure it's in here, I only saw:
this.settings.each(function(element){
Event.observe(element, 'change', this.configure.bind(this))
}.bind(this));
Can this code be useful ?
Thanks.
I believe you can achieve this using following steps :
1) Go to below link and paste the code as suggested. This will give you simple associated product ID when you select a configurable option. http://inchoo.net/magento/getting-selected-simple-product-id-in-configurable-product-on-client-side/
2) Later write change event in jquery and get the select product Id from copied function from above url. Then send an ajax request using your simple jquery sending product Id as a parameter. In your controller check inventory of product. If that product is out of stock, send popup HTML in response and show it to user.

Change content within a dropdown On Select

I have a page in which the user needs to select a product based on drop down filtering. Consider four drop downs Category--> SubCategory-->Product---> Variant. Its not so user friendly when the user has to select value from each drop down to get the final variant. So I need to select all the values with a subnavigation within a single drop down. You can view what I mean in this link -- http://i.stack.imgur.com/YMoQX.gif
Please tell me how to do this.
I think you can split in three columns and using radio button group in each column to select category or product, filtering in each column

3rd dynamic dropdownlist value compare with 4th table value from botton -> show div?

Honestly been looking everywhere..
The traditional 3-dropdown list dynamically populated from database:
1st table gives airport departure
2nd table gives airports choices
from 1st choice
3rd table show routes between 1 and 2.
That works perfectly!!
When passenger chooses a route from the 3rd drop list I want to check if the value from 3rd dropdownlist is represented in a 4th table called "donations"
Some routes are marked for donation possibility where passengers can donate their unused baggagecapacity to charity
My last hurdle is:
when 3rd list is selected --> check for donationpossibilities--> if possible then show a hidden div on submit
...
I've tried and read so much and gotten a lot more clever and I think I have the query to check the values in order, but I'm lost...
Not sure what programming language you are using to load the dropdowns from your database, but one option that you could try is that when you are adding the html option elements to the 3rd dropdown list you could add a data attribute to each, for example:
<option value="route 1" data-can-donate="true">...</option>
Then if you are using jquery you could bind the change event to the 3rd dropdown and do something like this:
$('#ddlRoutes').change(function() {
var canDonate = $('#ddlRoutes > option:selected').data('can-donate');
if (canDonate) {
$('#myDiv').show();
}
};
Obviously this is untested but it may work for what you are trying to do.

Categories

Resources