Select input field options being added outside select field-CodePudding

I am building out a dynamic dropdown field that gets populated with all the "Saturdays" during a 3 month period. The dropdown is being populated correctly but I am getting duplicate 'options' added after the closing </select> input. I don't know what could be causing this. Below in the Javascript when I console.log(formatted); the values only appear ONCE in the Chrome console.

Wordpress, Contact Form 7
Dev: Laragon localhost

<select name="dates"  aria-required="true" aria-invalid="false">
    <option value="0">Saturday, June 18</option>
    <option value="1">Saturday, June 25</option>
    <option value="2">Saturday, July 2</option>
    <option value="3">Saturday, July 9</option>
    <option value="4">Saturday, July 16</option>
    <option value="5">Saturday, July 23</option>
    <option value="6">Saturday, July 30</option>
    <option value="7">Saturday, August 6</option>
    <option value="8">Saturday, August 13</option>
    <option value="9">Saturday, August 20</option>
    <option value="10">Saturday, August 27</option>
</select>
// HERE'S the issue - Duplicate options added to my page
<option value="0">Saturday, June 18</option>
<option value="1">Saturday, June 25</option>
<option value="2">Saturday, July 2</option>
<option value="3">Saturday, July 9</option>
<option value="4">Saturday, July 16</option>
<option value="5">Saturday, July 23</option>
<option value="6">Saturday, July 30</option>
<option value="7">Saturday, August 6</option>
<option value="8">Saturday, August 13</option>
<option value="9">Saturday, August 20</option>
<option value="10">Saturday, August 27</option>

Contact Form 7

[select* dates class:span6 class:dates "Sat, Jun 04"]

Javascript

jQuery(document).ready(function($) {
// Date object
var date = new Date();
var year = date.getFullYear();
var this_month = date.getMonth();
var this_day = date.getDate();
var num_months = 3;
// Select input
var select = $('.contact .dates');
select.find('option').remove();

// 3 months of Saturdays
let index = 0;
for (var i = 0; i < num_months; i  ) {
    var cur_month = this_month   i;
    // Loop through each day of the month
    for (var j = 0; j <= new Date(year, cur_month, 0).getDate(); j  ) {    
        var date = new Date(year, cur_month, j);
        // Find Saturdays and append option to select input
        if (date.getDay() == 6){
            let day = "Saturday, ";
            let dayNum = date.getDate();
            let month = date.toLocaleString('default', { month: 'long' });
            // Don't include past Saturdays for the current month
            if (dayNum<this_day && date.getMonth()==this_month){
                continue;
            }
            let formatted = day   month   " "  dayNum;
            //let value = date.toString('dddd, MMMM ,yyyy');
            select.append($('<option></option>').attr('value', index).text(formatted));
            index  = 1;
            console.log(formatted); // This only outputs once NOT twice
        } 
    };
}
});

CodePudding user response：

Since you're using Contact Form 7. It seems to me that this would be easier with PHP and the CF7 Filter wpcf7_form_tag_data_option which is pretty much designed for this kind of thing. It is with this filter that the CF7 developer created listo.

Doing this instead of using JS, ensures that the form will be rendered with the correct dropdown data before the page loads.

The form tag would then look like this:

[select* dates class:span6 class:dates data:saturdays]

So the function is pretty straight forward, and should be added to the functions.php of your theme/child theme, or implemented as another plugin if needed.

add_filter( 'wpcf7_form_tag_data_option', 'he_find_every_saturday', 10, 3 );
/**
 * Find Every Saturday in the next 3 months and return to CF7 Via DATA option.
 *
 * @param null  $data nothing if nothing is returned.
 * @param array $options the data option (in an array).
 * @param array $args if any additional args.
 * @return array|void
 */
function he_find_every_saturday( $data, $options, $args ) {
    if ( 'saturdays' === $options[0] ) {
        $start      = new DateTime();
        $end        = new DateTime();
        $end        = $end->add( new DateInterval( 'P3M' ) );
        $sat_period = new DatePeriod(
            $start,
            DateInterval::createFromDateString( 'next saturday' ),
            $end
        );
        $saturdays  = array();
        foreach ( $sat_period as $saturday ) {
            $saturdays[] = $saturday->format( 'l F, j' );
        }
        return $saturdays;
    }
}

This is tested and works.