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