logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

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

Hello,

THE QUESTION

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.



THE BRIEF

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. SEE SCREENSHOT

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.


IMPORTANT!

The way the form must work is...

1. The County select field must be selected first.

2. Once a county is selected, the relavant Towns 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.


MY CUSTOM FIELDS / TAXONOMIES

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


MY CODE

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 dealer-results.php 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.

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


Any questions don't hesitate to contact. Thanks.



Many Thanks
Josh

This question has been answered.

Josh Cranwell | 01/23/13 at 8:28pm Edit
Tutorial: How to assign prize money

Previous versions of this question: 01/23/13 at 8:31pm | 01/23/13 at 8:31pm | 01/23/13 at 8:32pm | 01/23/13 at 8:40pm | 01/23/13 at 10:08pm | 01/23/13 at 10:09pm | 01/23/13 at 10:10pm | 01/23/13 at 10:10pm | 01/25/13 at 4:17pm

(18) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/23/13
    8:33pm
    Kyle says:

    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

  • avatar
    Last edited:
    01/24/13
    5:11pm
    Christianto says:

    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
    http://pastebin.com/T9qDk58r

    And this is your code for frontend form, with required javascript function..
    http://pastebin.com/tjUQNSyq

    hope this help..

  • avatar
    Last edited:
    01/23/13
    8:39pm
    Josh Cranwell says:

    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

  • avatar
    Last edited:
    01/23/13
    9:45pm
    Kyle says:

    Okay, let me know if you have any questions

  • avatar
    Last edited:
    01/24/13
    5:39pm
    Josh Cranwell says:

    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

  • avatar
    Last edited:
    01/24/13
    5:41pm
    Josh Cranwell says:

    There are no errors in the script FYI

  • avatar
    Last edited:
    01/24/13
    6:23pm
    Christianto says:

    Hi Josh,

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


  • avatar
    Last edited:
    01/24/13
    6:23pm
    Josh Cranwell says:

    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!

  • avatar
    Last edited:
    01/24/13
    6:29pm
    Josh Cranwell says:

    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

  • avatar
    Last edited:
    01/24/13
    6:30pm
    Josh Cranwell says:

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

    Thanks

  • avatar
    Last edited:
    01/24/13
    6:36pm
    Christianto says:

    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 your screenshot , I see the style look like it change by other jQuery plugin, so the class not copied correctly.

  • avatar
    Last edited:
    01/24/13
    6:44pm
    Christianto says:

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


    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>";
    }
    } ?>

  • avatar
    Last edited:
    01/24/13
    7:32pm
    Josh Cranwell says:

    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.

  • avatar
    Last edited:
    01/24/13
    7:39pm
    Josh Cranwell says:

    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... http://jsfiddle.net/3vPgY/

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




  • avatar
    Last edited:
    01/24/13
    8:43pm
    Josh Cranwell says:

    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?

  • avatar
    Last edited:
    01/24/13
    8:44pm
    Josh Cranwell says:

    Can add more funds if need be.

  • avatar
    Last edited:
    01/25/13
    2:28am
    Christianto says:

    Sorry, need to sleep

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

    Please check this code
    http://pastebin.com/tjUQNSyq

    and put this on functions.php

    function dealer_sort($a, $b){ if ($a == $b) { return 0; } return ($a < $b) ? -1 : 1; }


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

    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.

  • avatar
    Last edited:
    01/25/13
    4:16pm
    Josh Cranwell says:

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

    Josh

This question has expired.



Gabriel Reguly, Josh Cranwell voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.