Dynamically load dropdown fields from...

User 348342 Photo


Registered User
24 posts

1. Generated webform with dropdown fields.
2. Want to load options into the dropdown fields from mysql
3. Looking at the code:
1. looks like i have to read in the data from the Mysql database
2. Dynamically modify the html file to set the options but it looks like it names the options with ids of item9_xxxx
3. Dynamically modify the form.cfg rules line to reflect the change in options.
4. Is there anywhere else where the new options need to be loaded so that the id's are loaded correctly?
User 187934 Photo


Senior Advisor
20,190 posts

Here's some info to get you started.
Basic form setup with the needed js and includes. I used input names for my jquery targeting.
JS
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function() {

$('select[name="dropdown1"]').change(function() {
$('select[name="dropdown2"]').load("../includes/dropdown2.php?dropdown1=" + $('select[name="dropdown1"]').val());
});
$('select[name="dropdown2"]').change(function() {
$('select[name="dropdown3"]').load("../includes/dropdown3.php?dropdown1=" + $('select[name="dropdown1"]').val()+"&dropdown2=" + $('select[name="dropdown2"]').val());
});
});
</script>
</head>

HTML
dropdown1

<div class="fb-grouplabel">
<label id="item36_label_0" style="display: inline;">Dropdown 1</label>
</div>
<div class="fb-dropdown">
<select name="dropdown1" id="item36_select_1" required data-hint="">
<option id="item36_0_option" selected value="">
Choose one
</option>
<? include('../includes/dropdown1.php');?>
</select>
</div>
</div>

HTML
dropdown2
<div class="fb-item fb-33-item-column" id="item84" style="opacity: 1;">
<div class="fb-grouplabel">
<label id="item84_label_0" style="display: inline;">Dropdown 2</label>
</div>
<div class="fb-dropdown">
<select name="dropdown2" id="item84_select_1" data-hint="">
<option id="item84_0_option" selected value="See-Dropdown-1">
See-Dropdown-1
</option>
</select>
</div>
</div>

HTML
dropdown3
<div class="fb-item fb-33-item-column" id="item82" style="opacity: 1;">
<div class="fb-grouplabel">
<label id="item82_label_0" style="display: inline;">Dropdown 3</label>
</div>
<div class="fb-dropdown">
<select name="dropdown3" id="item82_select_1" data-hint="">
<option id="item82_0_option" selected value="See-Dropdown-2">
See-Dropdown-2
</option>

</select>
</div>
</div>

Php includes.
dropdown1.php
<?php
include('pdo_connect.php');
try{
$query1 = $pdo->prepare("SELECT dropdown1name FROM dropdown1 WHERE dropdown1 = :dropdown1 ORDER BY dropdown1name");
$data1 = array(
':dropdown1' => ""
);
$query1->execute($data1);
} catch(PDOException $e){

}
foreach ($query1->fetchAll(PDO::FETCH_ASSOC) as $row) {
echo '<option>' . $row['dropdown1name'] . '</option>';
}
?>

dropdown2.php
<?php
$dropdown1 = $_GET['dropdown1'];
include('pdo_connect.php');
try{
$query2 = $pdo->prepare("SELECT dropdown2name FROM dropdown2 WHERE dropdown1 = :dropdown1 ORDER BY dropdown2name");
$data2 = array(
':dropdown1' => $dropdown1
);
$query2->execute($data2);
} catch(PDOException $e){

}
echo '<option>Please-Make-Choice</option>';
foreach ($query2->fetchAll(PDO::FETCH_ASSOC) as $row) {
echo '<option>' . $row['dropdown2name'] . '</option>';
}
?>

dropdown3.php
<?php
$dropdown1 = $_GET['dropdown1'];
$dropdown2 = $_GET['dropdown2'];
include('pdo_connect.php');
try{
$query3 = $pdo->prepare("SELECT dropdown3name FROM dropdown3 WHERE dropdown1 = :dropdown1 AND dropdown2 = :dropdown2 ORDER BY dropdown3name");
$data3 = array(
':dropdown1' => $dropdown1,
':dropdown2' => $dropdown2
);
$query3->execute($data3);
} catch(PDOException $e){

}
echo '<option>Please-Make-Choice</option>';
foreach ($query3->fetchAll(PDO::FETCH_ASSOC) as $row) {
echo '<option>' . $row['dropdown3name'] . '</option>';
}
?>

PDO connect.
<?php
$database = 'mysql: myHost =localhost;dbname=DATABASENAMEHERE;charset=utf8';
$username = 'USERNAMEHERE';
$password = 'PASSWORDHERE';
try {
$pdo = new PDO($database, $username, $password);
$pdo ->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo ->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
}
catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
?>


In my setups I have the dropdown includes in a folder at the root of the site call includes. This way if you reexport your form you don't overwrite them. I also have my server setup to parse php inside html.
The code I posted has dropdown2 dependent on what is chosen in dropdown1. dropdown3 is dependent on what is chosen in dropdown1 and dropdown2.

Let me know if your confused.:lol:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 348342 Photo


Registered User
24 posts

Eric,

Thanks, I will try this later today.
User 348342 Photo


Registered User
24 posts

Eric,

Not too strong on the javacript side - the HTML and PHP makes sense.

What I am finding is the when I add the options, it adds it but then uses the last actual generated option for the addtions.

Is the javascript modifying how the exported code is working?

Ken
User 187934 Photo


Senior Advisor
20,190 posts

Can you share a link to your form?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 348342 Photo


Registered User
24 posts

Eric,

The form is on an internal secure network - give me a bit and I will load one with the issue onto external site -thanks in advance.
User 348342 Photo


Registered User
24 posts

Eric,

Do you guys have a fool award?

Just figured out why I was getting the result I was getting - working now.

For anyone else who has to do this:

1. Create the form with a dummy select
2. Dynamically modify the html file to set the options using the item id that is created (you will have to update by incrementing the field counter)
3. Dynamically modify the form.cfg rules line to reflect the change in options.

This worked for me...
User 187934 Photo


Senior Advisor
20,190 posts

What I do is set the dropdown as required in the form builder and delete all the options except Choose one.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 348342 Photo


Registered User
24 posts

Eric,

Agreed.

Thanks for your assistance
User 2854771 Photo


Registered User
1 post

Hi!
first of all thank you for your hints, I'm a new one in coffeecup and this is the only source of knowledge.
I've found some problem with example above. I've generated a form (WFB) and injected it as a HTML into web page (RSD). Looks like <? include('xxx.php');?> does not work. I red that including php into html may not work due to server setup. Please tell me if there is any way to get dynamic collection of data into the generated form before it's displayed.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.