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 6 years ago
Was wondering if there was a script answer – instead of manually entering all of the information?
simpletwist 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 6 years ago
Actually, try this: http://jqueryui.com/datepicker/
skram 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 6 years ago
ill look into it. thank you.
simpletwist 6 years ago
I think it's your best bet
skram 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 6 years ago
fair enough. did the states solution above work for you?
skram 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 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 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 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 6 years ago
Any easy way to align state dropdown w css ?
simpletwist 6 years ago
View Timeline