jquery script for contact form7
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need some assistance appending the proper script to my current theme's form, so that all dates and states within the drop-down menu are displayed.

http://bridges.ccsdesignhouse.com/share/

Current script:

$(document).ready(function() {
$(".wpcf7 #identity option:contains('---')").html("Select below");

$(".wpcf7 .state").width(160);
$(".wpcf7 .state option:contains('---')").html("[- Select a State -]");

$(".wpcf7 .month option:contains('---')").html("Month");
$(".wpcf7 .date option:contains('---')").html("Date");
$(".wpcf7 .year option:contains('---')").html("Year");

$(".wpcf7 #dianosis").width(150);
$(".wpcf7 #dianosis option:contains('---')").html("Select below:");

var url = "http://query.yahooapis.com/v1/public/yql?q=select%20name%20from%20geo.states%20where%20place%3D'United%20States'%20%7C%20sort(field%3D%22name%22%2C%20descending%3D%22false%22)&format=json&callback=?";
$.getJSON(url, function(response) {
var state = response.query.results.place;
for (var i = 0; i < state.length; i++)
{
jQuery(".wpcf7 .state").append("" + state[i].name + "");
}
});

});

awarded to sprt

Crowdsource coding tasks.

3 Solutions


For states, replace the pertinent lines with the following:

var url = "http://query.yahooapis.com/v1/public/yql?q=select%20name%20from%20geo.states%20where%20place%3D'United%20States'%20%7C%20sort(field%3D%22name%22%2C%20descending%3D%22false%22)&format=json&callback=";

jQuery.getJSON(url, function(response) {
var state = response.query.results.place;
for (var i = 0; i < state.length; i++)
{
  jQuery(".wpcf7 .state").append("<option>" + state[i].name + "</option>");
}
});

I'm trying to figure out whats wrong with the date dropdowns

What's wrong with the date drop downs? Looks like you just need to finish them in your static HTML.
skram almost 6 years ago
Was wondering if there was a script answer – instead of manually entering all of the information?
simpletwist almost 6 years ago
Are you using any server side code for this? I would store it there instead of javascript and use the date array variable to populate the static HTML, personally
skram almost 6 years ago
Actually, try this: http://jqueryui.com/datepicker/
skram almost 6 years ago
It is an extension of this original project. I just haven't been able to dial in all of the form elements. https://bountify.co/contact-form7-to-emulate-another-form
simpletwist almost 6 years ago
Have you seen this? http://wordpress.org/extend/plugins/contact-form-7-datepicker/
skram almost 6 years ago
ill look into it. thank you.
simpletwist almost 6 years ago
I think it's your best bet
skram almost 6 years ago
But I still have to take care of all of the states. I'd like to keep it within a simple script – without adding additional plug-ins.
simpletwist almost 6 years ago
fair enough. did the states solution above work for you?
skram almost 6 years ago
No luck – I had the states working earlier when the script was placed in the footer but it was conflicting with the drop-down Ajax menu. I tried to edit above – cleared cache – no dice. Currently have the third solution in script tags, but that's not working either. see http://bridges.ccsdesignhouse.com/share/
simpletwist almost 6 years ago

i guess you are using invalid selector:

$(".wpcf7 .month option:contains('---')").html("Month");

should be:

$(".wpcf7 .month select option:contains('---')").html("Month");

select is missing

Winning solution

This should work:

window.$ = window.$ || jQuery;

$(document).ready(function() {
  $(".wpcf7 #identity option:contains('---')").html("Select below");

  var months = [
    "January", "February", "March", "April", "May", "June", "July", "August",
    "September", "October", "November", "December"
  ];

  $.each($("select[name=month]"), function (i, el) {
    $(el).html("<option>Month</option>");
    $.each(months, function (j, month) {
      $(el).append('<option value="' + (i + 1) + '">' + month + '</option>');
    });
  });

  $.each($("select[name=date]"), function (i, el) {
    $(el).html("<option>Date</option>");
    for (var j = 1; j <= 31; j++) {
      $(el).append('<option value="' + j + '">' + j + '</option>');
    }
  });

  $.each($("select[name=year]"), function (i, el) {
    $(el).html("<option>Year</option>");
    var year = (new Date()).getFullYear();
    for (var j = year; j >= year - 100; j--) {
      $(el).append('<option value="' + j + '">' + j + '</option>');
    }
  });

  $(".wpcf7 .state").width(160);
  $(".wpcf7 #dianosis").width(150);
  $(".wpcf7 #dianosis option:contains('---')").html("Select below:");

  var url = "http://query.yahooapis.com/v1/public/yql?q=select%20name%20from%20geo.states%20where%20place%3D'United%20States'%20%7C%20sort(field%3D%22name%22%2C%20descending%3D%22false%22)&format=json";

  $.getJSON(url, function(response) {
    var states = response.query.results.place;
    console.log(states);
    $.each($("select[name=state]"), function (j, el) {
      $(el).html("<option>[- Select a State -]</option>");
      $.each(states, function (j, state) {
        $(el).append('<option value="' + state.name + '">' + state.name + '</option>');
      });
    });
  });
});
I just wrapped it in script tags and put it in the header… No luck. http://bridges.ccsdesignhouse.com/share/
simpletwist almost 6 years ago
Include jQuery before with <script type='text/javascript' src='http://bridges.ccsdesignhouse.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script> (which is on line 86 right now)
sprt almost 6 years ago
Thank you. This is exactly what I was looking for, everything wrapped up on in the same script. Works very nicely.
simpletwist almost 6 years ago
Any easy way to align state dropdown w css ?
simpletwist almost 6 years ago
View Timeline