Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

A very simple form with 2 select fields which use post meta... WordPress

  • SOLVED

Hello,

<strong>THE QUESTION</strong>

<blockquote>A very simple form with 2 select fields which use post meta as the options, then when submitted, it adds the option values to my script vars and runs my dealerResults(); function.</blockquote>


<strong>THE BRIEF</strong>

I have a custom post type called 'dealer'.

And I have a lot of dealers.

Each dealer is a single post, and I have custom fields for the address and contact information.

I would like a simple form with 2 select fields. [[LINK href="http://i.imgur.com/rvfOlKB.jpg"]]SEE SCREENSHOT[[/LINK]]

Initially, there will be no dealers shown. There idea is when the form is submitted, the content will load in via ajax. And the query will adjust to the variables from the form options

I am using bootstrap for my form styling, so I would like the form 'Find Dealers' submit button not to be able to submit unless both fields have sections.


<strong>IMPORTANT!</strong>

The way the form must work is...

1. The <strong>County</strong> select field must be selected first.

2. Once a county is selected, the relavant <strong>Towns</strong> for this county should appear as options in the second select field.

3. I want the second select field 'Town' to be empty or disabled, until the first select field has been chosen. Essentially just like conditional logic.


<strong>MY CUSTOM FIELDS / TAXONOMIES</strong>

dealer_county <em>(custom field)</em>
dealer_county <em>(custom taxonomy - the value is exactly the same as above)</em>
dealer_town <em>(custom field - there could be duplicates of these values, but the duplicates must NOT show in the select options)</em>


<strong>MY CODE</strong>

The form with div layout, so far...

<div id="dealer-filter">

<form method="post" action="">

<select>
<option value="" disabled>Choose county...</option>

<?php

'<option value=" "> </option>'

?>
</select>

<select class="input-xlarge">
<option value="" disabled>Choose town or city...</option>

<?php

'<option value=" "> </option>'

?>
</select>

<button type="submit" class="btn"><i class="icon-search"></i> Find dealers</button>

</form>

</div>

<div id="dealer-results">

<!-- MY DEALER RESULTS WILL APPEAR HERE! -->

</div>


The script I have so far for the ajax, but guess this needs to work with the form...

$(document).ready(function() {

dealerResults = function () {

var county = '<?php // THIS SHOULD BE THE SUBMITTED FORM COUNTY VALUE ?>',
town = '<?php // THIS SHOULD BE THE SUBMITTED FORM TOWN VALUE ?>';

$.ajax({

type: 'GET',
url: '<?php bloginfo('template_url'); ?>/dealer-results.php',
data:
{
varCounty : county,
varTown : town
},
dataType: 'html',
success: function(data){

$(".dealer-wrapper").remove();
$("#dealer-results").append(data);

}

});

}

dealerResults(); // Fire this function some how with the form submission.

});


This is my [[LINK href="https://gist.github.com/4612377"]]dealer-results.php[[/LINK]] file I load in via the ajax...

<?php

define('WP_USE_THEMES', false);
require ('/home/sites/mysite.co.uk/www/wp/wp-load.php');

$ajaxCounty = $_GET['varCounty'];
$ajaxTown = $_GET['varTown'];

$dealerResults = new WP_Query(array(

'post_type' => 'dealer',
'meta_query' => array(
array(
'key' => 'dealer_county',
'value' => $ajaxCounty,
'compare' => '='
),
array(
'key' => 'dealer_town',
'value' => $ajaxTown,
'compare' => '='
)
)

));

?>

<?php if ($dealerResults->have_posts()) : ?>

<div class="dealer-wrapper">

<?php while ($dealerResults->have_posts()) : $dealerResults->the_post(); ?>

<h1><?php the_title(); ?></h1>

<ul>
<?php
$address1 = get_post_meta($post->ID, 'dealer_address_1', true);
if($address1) {
echo '<li>' . $address1 . </li>';
}
$address2 = get_post_meta($post->ID, 'dealer_address_2', true);
if($address2) {
echo '<li>' . $address2 . </li>';
}
$address3 = get_post_meta($post->ID, 'dealer_address_3', true);
if($address3) {
echo '<li>' . $address3 . </li>';
}
$address4 = get_post_meta($post->ID, 'dealer_address_4', true);
if($address4) {
echo '<li>' . $address4 . </li>';
}
$town = get_post_meta($post->ID, 'dealer_town', true);
if($town) {
echo '<li>' . $town . </li>';
}
$county = get_post_meta($post->ID, 'dealer_county', true);
if($county) {
echo '<li>' . $county . </li>';
}
$postcode = get_post_meta($post->ID, 'dealer_postcode', true);
if($postcode) {
echo '<li>' . $postcode . </li>';
}
?>
</ul>

<?php endwhile; ?>

</div>

<?php unset($dealerResults); endif; ?>




I would like the form code to be as simplistic and efficient as possible.

<em>The answer which I think is the best and I use will get the full prize amount.</em>


Any questions don't hesitate to contact. Thanks.



Many Thanks
Josh

2013-01-24 by Josh Cranwell

Answers (2)

2013-01-24

Christianto answers:

Hi Josh,

In case you want to continue with the existing code:

This is code on your functions.php, for the output of ajax request, it same as dealer-results.php but inside 'wp_ajax_' hook
[[LINK href="http://pastebin.com/T9qDk58r"]]http://pastebin.com/T9qDk58r[[/LINK]]

And this is your code for frontend form, with required javascript function..
[[LINK href="http://pastebin.com/tjUQNSyq"]]http://pastebin.com/tjUQNSyq[[/LINK]]

hope this help..

Josh Cranwell comments:

Hi Christianto

Yes I do!

Thanks for taking a look at my question and posting very concise code.

I've implemented it and it all looks good. But not quite working.


The county's are pulling in fine to the drop downs.

The secondary drop down is disabled until first is selected, but when it is active, it displays all the dealer_town from all the countys? Is this how you coded it?

It's only meant to shows the dealer_towns from the selected county.

I also can't get it to return any results? Did you manage to get it to work for you or is this the first draft?


Thank you!
Josh

Josh Cranwell comments:

There are no errors in the script FYI

Christianto comments:

Hi Josh,

is it the site online?
did you use other script/plugin to changing the <select> appearance?


Josh Cranwell comments:

Actually the results do work!!!!!

The post type was set to carpet which I just spotted.

It's nearlly there, just wondering how we can filter the second <select> options to only show the towns relavant to that county selected in the first dropdown.

This...

$('#dealer-county').change(function(){

Seems to working to an extent, but revealing all the towns, instead of the relavant ones.

I will try and figure it out in the mean time but if you have any suggestions that would be awesome!

Josh Cranwell comments:

Your right! (of course)

I can see the value display none of the option... but its still displaying!!!

I will have to try and find out whats causing it

Josh Cranwell comments:

One more question, is possible list everything in the drop alphabetically everytime?

Thanks

Josh Cranwell comments:

One more question, is possible list everything in the drop alphabetically everytime?

Thanks

Christianto comments:

sorry for the carpet, I using existing CPT on my local installation.. :D

for the <select> element, if you check inside 'change' event, it rely on class of each <option> to hide and show associate county and town..

if(selected_county != 0){
$('#dealer-town').removeAttr('disabled');
$('#dealer-town option:not(.default)').removeAttr('selected').css('display','none');
$('#dealer-town .'+selected_county).css('display','block');
} else {
$('#dealer-town').attr('disabled','disabled');
$('#dealer-town option:not(.default)').removeAttr('selected').css('display','none');
}


and this is render the class

<?php foreach($all_dealer_region as $key => $value){
$county_class = str_replace(' ','-',$key);
foreach($value as $town){
echo "<option style=\"display:none\" class=\"$county_class\" value=\"$town\">$town</option>";
}
}
?>


from [[LINK href="http://i.imgur.com/rvfOlKB.jpg"]]your screenshot [[/LINK]], I see the style look like it change by other jQuery plugin, so the class not copied correctly.

Christianto comments:

<blockquote>One more question, is possible list everything in the drop alphabetically everytime?</blockquote>

You can sort the option array before it render
$value = sort($value, SORT_NATURAL | SORT_FLAG_CASE);

inside town <select>:
<?php foreach($all_dealer_region as $key => $value){
$county_class = str_replace(' ','-',$key);
$value = sort($value, SORT_NATURAL | SORT_FLAG_CASE);
foreach($value as $town){
echo "<option style=\"display:none\" class=\"$county_class\" value=\"$town\">$town</option>";
}
} ?>

Josh Cranwell comments:

Sorry to be a massive pain with this. Everything should be in theory working.

I don't know what's causing these options to still display, even tho they have an in line style applied... I've even tried adding important to the jquery css.

I've deleted all forms of style sheets
I'm not loading anything in by wp_head or wp_footer.
00% deleted all plugins and removed my entire site scritps, css, jquery plugins (except jquery), everything.
Cleared all my functions out.
Inline styles are still applied correctly, but they still show. And I'm using chrome.

For the last few hours I've tried everything I can think of.

Also bizarrely the code below just removes all options, instead of sorting. I checked out sort in the php manual and in theory this should work. But I return nothing.


<?php foreach($all_dealer_region as $key => $value){

$county_class = str_replace(' ','-',$key);

$value = sort($value, SORT_NATURAL | SORT_FLAG_CASE);

foreach($value as $town){

echo "<option style=\"display:none\" class=\"$county_class\" value=\"$town\">$town</option>";

}

} ?>



I'm out of ideas. I'm going to eat some food any continue the quest in about an hour.

Josh Cranwell comments:

I've just notice something

If I select my county... then select any random town... if I then select a new county, the town currently selected goes blank.

See this fiddle... [[LINK href="http://jsfiddle.net/3vPgY/"]]http://jsfiddle.net/3vPgY/[[/LINK]]

So I think in the drop down, you cant hide the options via css.




Josh Cranwell comments:

After a little dig. I don't think css is going to work cross browsers.

Is the anyway we can take a clone of all the children options on the dealer town select field?

Then just use jquery .remove perhaps?

Josh Cranwell comments:

Can add more funds if need be.

Christianto comments:

Sorry, need to sleep

My mistake, for the sort function it couldn't be assignment to variable..

Please check this code
[[LINK href="http://pastebin.com/tjUQNSyq"]]http://pastebin.com/tjUQNSyq[[/LINK]]

and put this on functions.php
function dealer_sort($a, $b){ if ($a == $b) { return 0; } return ($a < $b) ? -1 : 1; }

<blockquote>Is the anyway we can take a clone of all the children options on the dealer town select field?</blockquote>
yes, please check the jQuery part on link above, it's not using css anymore and change it with clone/append the selected county town.

Josh Cranwell comments:

You are a pleasure to work with Christianto, thank you for you patience. Works great!

Josh

2013-01-24

Kyle answers:

Josh;

I believe gravity forms can take care of all of this very quickly and efficiently, there is a custom post type add-on for creating custom posts quickly and you can use conditional logic to only show fields when specific selections have been made. I just put in a form similar to this for listing local businesses on a network site through the form and would be happy to help you put something together for your site.

Kyle

Josh Cranwell comments:

This definitely strongly consider this answer I already use gravity forms and have licence plus experience. I will try check it out later or first thing tomorrow as it is 20:38 and just leaving work.

Thanks

Kyle comments:

Okay, let me know if you have any questions