Dynamic drop-down options

This site is best viewed in a modern browser with JavaScript enabled.

manoj

How to set options for a drop down dynamically?

agdm619

Could you describe what you are trying to achieve? Without details, your forum pals cant help you.

manoj

I want to show all country codes as a drop-down inside machform view using API?

agdm619

Yeah, that's not possible. We've asked for master tables within Machform for sharing tables between forms and the ability to populate dropdowns from other databases. No word on if that will ever happen. Fingers crossed.

Thanks,
Aaron

manoj

agdm619
hi,
You mean we can't set dynamic options for a drop-down!

JCSweatt

manoj That's correct - This is not currently possible.

opfeifer

Too Bad. I'd be interested in that as well. If anyone finds a work around it would be great to share ...

mdbragg

I know this old, but is there a way when a user selects an item in the dropdown, that the next dropdown is based on their selection?

i.e. User selects United States, then all States would be populated in the next dropdown, or Canada, it would be all Provinces.

williamansley

The only way to do this now is to put all of the possible drop-down menus the user might need to see into the form and use logic to hide/reveal the appropriate drop-down menu fields, based on what has already been selected.

mattcoad

its actually possible to do this by loading external javascript in the form and using an ajax call to load data

Take my form as an example.
https://eforms.udocscloud.com.au/view.php?id=28803

I'm using a combination of inserting bootstrap into the form for styling, and loading a list of entries into a standard text field

The JS code is here

https://codepen.io/mattcoad/pen/abbWabz

you can load external js file in the form settings.

My example loads a static list, but you could easily load from ajax and filter on type.
Because the end result is actually just entering the text you click on in the text field, it gets posted as normal

Hope this helps someone

charmedones

Ok I've tried your script and nothing is working and the form you have can't be reached
Can you explain this alittle more?

mattcoad

so you need to bind to the 'input' event of one of the elements based on its input.
note you will need to add some css to make the buttons look nice

i've commented example code below using a text field with id of element_2

// define a project array, replace this with an ajax call for live data
var projects = ['Test 1', 'Test 2', 'More Test', 'Another Test', 'Test 5', 'Test 6', 'Test 7', 'Really Long Button Name to See What Happens', 'And see if it wraps to a new line'];

// function to detect input on #element_2
$('#element_2').on('input', function(e) {
// add calling element into a variable, not needed but i always do it
var caller = $(this);

         // find closest div with a class of .button-list
        // if it doesnt exist create it
        if ($(caller).closest('div').find('.button-list').length == 0) {
               $(caller).closest('div').append('<div class="button-list"></div>');
       }
       // empty it on each keypress etc  
      $(caller).closest('div').find('.button-list').empty();

      // loop through the projects array and append buttons to the div we just created
     $(projects).each(function(idx, product) {
                $(caller).closest('div').find('.button-list').append('<button class="btn btn-primary btn-sm select- 
                buttons">' + product + '</button>')

});

// function to set value of #element_2 when you click on the generated buttons
$(document).on('click', '.select-buttons', function(e) {
e.preventDefault();
$('#element_2').val($(this).text());
});

mattcoad

i put the code here for you

https://pastebin.com/VaHJxsQe

charmedones

Thanks Matt
Added your code to a JS file in the root directory changed the element to #element_6 which is my text field to populate the drop down list for and there is no button that shows up, add the the URL to the Form Properties http://xxx.com/dropdown.js but I don't get any buttons showing up on the form

$(document).ready(function() {
// array for posting custom data
var postData = {};
// add bootstrap css
$('head').append('<link rel="stylesheet" href="http://xxx.com/dropdown.css">
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />');
var projects = ['Test 1', 'Test 2', 'More Test', 'Another Test', 'Test 5', 'Test 6', 'Test 7', 'Really Long Button Name to See What Happens', 'And see if it wraps to a new line'];
$('#element_6').on('input', function(e) {
// find closest div
var caller = $(this);
if ($(caller).closest('div').find('.button-list').length == 0) {
$(caller).closest('div').append('<div class="button-list"></div>');
}
$(caller).closest('div').find('.button-list').empty();
$(projects).each(function(idx, product) {
$(caller).closest('div').find('.button-list').append('<button class="btn btn-primary btn-sm select-buttons">' + product + '</button>');
});
$(document).on('click', '.select-buttons', function(e) {
e.preventDefault();
$('#element_6').val($(this).text());
});

This is what I put in the test file will this code only work with a particular version ?
or am I just plain missing something ?

mattcoad

charmedones looks ok to me

is the url to the js file working? can you load the url in the browser?
open up developer options in chrome and look for any errors
put a console.log("test"); on the second line of the script to see if it logs to the console in chrome.

charmedones

Yes the js can be found and displayed in the browser when directly accessed
2 . $('head').append('<link rel="stylesheet" href="http://xxx.com/dropdown.css" />
yes this error is showing up selection.js:9 Uncaught SyntaxError: Invalid or unexpected token

mattcoad

Looks like the issue is with the CSS file that it either can't find it can't process
Try and remove that whole section that appends to the head and simplify the script. You can add it back in later

charmedones

Thank you Matt,
I removed the head for the CSS and error message is gone, but nothing is showing up in the TEXT box when you click on the element_6 field no ugly button or anything
//
$(document).ready(function() {
console.log("test");
// array for posting custom data
var postData = {};
// add bootstrap css

var projects = ['Test 1', 'Test 2', 'More Test', 'Another Test', 'Test 5', 'Test 6', 'Test 7', 'Really Long Button Name to See What Happens', 'And see if it wraps to a new line'];
$('#element_6').on('input', function(e) {
// find closest div
var caller = $(this);
if ($(caller).closest('div').find('.button-list').length == 0) {
$(caller).closest('div').append('<div class="button-list"></div>');
}
$(caller).closest('div').find('.button-list').empty();
$(projects).each(function(idx, product) {
$(caller).closest('div').find('.button-list').append('<button class="btn btn-primary btn-sm select-buttons">' + product + '</button>');
});

$(document).on('click', '.select-buttons', function(e) {
  e.preventDefault();
  $('#element_6').val($(this).text());
});
// add another div

// loop through array and add buttons

});

function success(pos) {
var crd = pos.coords;
postData.latitude = crd.latitude;
postData.longitude = crd.longitude;
$('.custom-data').find('textarea').val(JSON.stringify(postData));
}

function error(err) {
console.warn(ERROR(${err.code}): ${err.message});
}

// append hidden element
$('#li_buttons').append('<input type="hidden" id="generic_field" name="generic_field" value="generic">');

$('input[value="Submit"]').click(function(e) {
//e.preventDefault();
console.log('submit button pressed');
console.log($('form').serialize());
// loop through all the fields
$('form li').each(function(idx, field) {
console.log(field);
});
});
});

//
This is the in the JS file, Console shows" test selection.js:2 " no errors messages

Jason123

I agree this feature is desirable.

Being able to create a drop-down with a customisable list, and that list be created in Machforms Admin Panel.

That would allow a pre-populated drop-down in any form and the pre-populated items to updated in Admin Panel without having to change each and every form that has the drop-down.

charmedones

Jason, we found away to do it using SELECT2
https://github.com/select2/select2

From include folder find the file “view-functions.php” and because the CSS has conflict with the admin CSS so the CSS should be added before the theme CSS files so in line 5259 we add

Select2 needs jquery to be loaded before the library so it has to loaded after jquery in line 8459
We need to add the query .js file after select2

So we make a file and added from the admin panel:
JS file contains
$( document ).ready(function() {
const element_60 = $("#element_60");
const element_44 = $("#element_44");

element_60.select2({
minimumInputLength: 3,
ajax: {
dataType: "json",
url:'http://www.xxxxxxx.com/get_styles.php',
},}).on('select2:select', function (e) {
const data = e.params.data;
$("#element_6").val(data.id);
$("#element_7").val(data.size);
$("#element_30").val(data.brand);
$("#element_28").val(data.color);
});

element_44.select2({
 minimumInputLength: 3,
 ajax: {
   dataType: "json",
   url:'http://www.xxxxx.com/get_styles.php',
},}).on('select2:select', function (e) {
       const data = e.params.data;
       $("#element_13").val(data.id);
       $("#element_14").val(data.size);
       $("#element_27").val(data.color);

});

});
The element numbers comes from admin panel and where we add the dropdown the ID would be used,
In order to make a Ajax call for select 2 we need to make a small json api (get_styles.php)

<?php
header('Content-Type: application/json');

$q = $_GET['q'];

if ( !$db = mysqli_connect("localhost", "xxx", "xxx", "xxx") )
die( "can not connect to database");

$query = "
SELECT DISTINCT style as id, CONCAT(style,'-',Brand,'-', size,'-',color) as text, rand, color, size FROM Products
WHERE style LIKE '%{$q}%' AND ID != ''
";
if ( !$results = $db->query($query) )
die($query );

$data=[];
while ($row = $results->fetch_array()) {
$data[]= $row;
}

echo json_encode(["results"=>$data]).

This will provide json data for the select2

To check the conflict, we will need to go to admin panel and change the theme color if it is working it means we have no conflict but if it’s not changing then it means we need to change the CSS location to higher position in the view_functions.php

hope it helps, the javascript above I couldn't get to work and I needed to find another solution