State and County pull down lists

User 1681623 Photo


Registered User
24 posts

Using Web Form Builder, V 2.9
I want users to enter their State from a drop down list then select their county from a drop down list that is specific to their state. I have the text in .txt files in the Web Form Builder/option-lists directory. How do I present the user with a list of Counties based on their input in the State field? Both State and County entries will be written to a MySQL Database.
User 187934 Photo


Senior Advisor
20,188 posts

Hi BountyHunter
You'll need a little jQuery.
I can setup an example for ya if needed.
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 1681623 Photo


Registered User
24 posts

An example would be great. Don't know squat about jQuery but I can learn
Here is what I am working on:
http://hardportal.com
User 187934 Photo


Senior Advisor
20,188 posts

Is this what your looking for?
https://ericrohloff.com/coffeecup/ccfor … ty-select/
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 2906089 Photo


Registered User
222 posts

Really great work Eric. I see you're using a database to populate the fields. Was this something you found online?

Does every wfb form build in a secret coffee coffecup image that is hidden. Is that some sort of source tagging? I think it's funny as long as it's not being used for some evil sort of tracking. I noticed it when I did a quick form. When I exported the files it showed up in the same folder as yours.

https://ericrohloff.com/coffeecup/ccforum/formbuilder/state-county-select/state-county-select/common/images/image_default.png
Learn something, Share something.
User 187934 Photo


Senior Advisor
20,188 posts

The coffeecup image is a default for when you insert an image in your form. The Form Builder is built to help users make great forms with minimal effort. With that CC has to include lots of unnecessary files to cover all features whether they are used or not.
The form I posted is being populated completely from a Database using php includes and code. I also have some jQuery to interact with users to control choices of counties to that of only ones in the state they chose. It takes a little bit of customization after export but it's not difficult.
This type of altering cannot be done on S-Drive forms. You have to have a non Coffeecup host to use these customization's.
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 122279 Photo


Senior Advisor
14,450 posts

It must take ages to find all those counties in all the 50 states. Or are there ready made lists 'out there'? (I don't need them, at least not now, but somebody else might)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,188 posts

I have a csv file with all of the data. I have postal codes and many cities also.
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 1681623 Photo


Registered User
24 posts

Yep. That's what I'm looking for.
Not totally clear on where the county names are located or how they were accessed.
User 187934 Photo


Senior Advisor
20,188 posts

1. In Form Builder I had my selects set to required and added no options.
2. In Form Builder set your county required select option text to
Choose State First

3. Place this code into your form with a html element. You'll need to adjust the select names to match your state and county. I used state and county for my select names.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>var jQ = $.noConflict(true);
jQ(function() {
jQ('input[type="submit"]').prop( "disabled", true );
jQ('select[name="county"]').prop( "disabled", true );
jQ('select[name="state"]').change(function() {
jQ('select[name="county"]').prop( "disabled", false );
jQ('select[name="county"]').load("../mysql_county_select.php?state=" + jQuery('select[name="state"]').val());

});
jQ('select[name="county"]').change(function() {
if(jQ(this).val()!= ""){
jQ('input[type="submit"]').prop( "disabled", false );
}
});
});</script>

4. Manually export your form
5. Download the attachment and place the files in the same directory as your myformname.php .
6. After export
For your state input on your form adjust it to look like this so it uses a php include for the rest of the options.
<div class="fb-dropdown">
<select name="state" id="item2_select_1" required data-hint="">
<option id="item2_0_option" selected value="">
Choose one
</option>
<?php include('../states.php');?>
</select>
</div>



7. Now open the form.cfg.php and adjust the rules line by taking out the values.
Remove this for both ,"values":[""]

Mine looked like this after export.
"rules":{"state":{"label":"Select a State","fieldtype":"dropdown","contactList":false,"required":true,"values":[""]},"county":{"label":"Select a County","fieldtype":"dropdown","contactList":false,"required":true,"values":[""]}},


After adjustment it looked like this.
"rules":{"state":{"label":"Select a State","fieldtype":"dropdown","contactList":false,"required":true},"county":{"label":"Select a County","fieldtype":"dropdown","contactList":false,"required":true}},

You'll also need to remove the script wrapping the iframe code that the Form Builder provides
Mine looked like this to start.
<script type="text/javascript">document.write(unescape("%3Ciframe id=\"fb_iframe\" src=\"state-county-select.php" + window.location.search + "\" width=\"100%\" height=\"370\"allowtransparency=\"true\" scrolling=\"no\" frameborder=\"0\"%3E&lt;a href=\"state-county-select.php\" title=\"state-county-select\"&gt;Check out my CoffeeCup Form&lt;/a&gt;%3C/iframe%3E"));</script>
<noscript>
<iframe height="370" style="border:none; background:transparent; overflow:hidden; width:100%;"
id="fb_iframe" src="state-county-select/state-county-select.html">
<a href="state-county-select.php" title="state-county-select">Check out my CoffeeCup Form</a>
</iframe>
</noscript>

And like this after adjustment.
<iframe height="370" style="border:none; background:transparent; overflow:hidden; width:100%;"
id="fb_iframe" src="state-county-select/state-county-select.html">
</iframe>


8. Import the state-county-data.csv into your database that''s within the attachment. I named my table county_select. Adjust to your needs within all selects if changed.
Open the pdo_connect.php and enter your database info.
Your server also needs to be able to parse php with html. This can be done within your .htaccess.
Upload and test.
Attachments:
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

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.