Javascript, изменяющий входные значения, не регистрируется - PullRequest
Новая
       45

Javascript, изменяющий входные значения, не регистрируется

0 голосов
/ 30 октября 2019

У меня проблема с тем, что пользователь должен указать срок действия своей кредитной карты. Однако вместо выпадающего списка мы хотим использовать поле ввода текста. Поскольку мы не можем на самом деле удалить HTML и заменить его полем ввода текста (по разным причинам).

Я создал пользовательское текстовое поле, которое, когда пользователь вводит даты, автоматически разделяет его и изменяет значения в раскрывающемся списке (раскрывающийся список скрыт). Эта функциональность работает, как и ожидалось, значения на самом деле меняются.

Проблема в том, что, несмотря на то, что оно показывает изменение значения, и даже когда я делаю .value, оно показывает правильное значение. Когда я нажимаю «Отправить», он по-прежнему говорит «значения обязательны», как если бы он был пустым. 

function replaceExpDiv() {
  var expDiv = document.getElementById("pubsvs_cc_cc_type_exp_div");

  //hide the select boxes
  var monthSelect = document.getElementById('pubsvs_cc_expiration');
  var yearSelect = document.getElementById('pubsvs_cc_expiration_yr');
  //monthSelect.style.display = "none";
  //yearSelect.style.display = "none";

  var expiryDiv = document.createElement("div");
  expiryDiv.setAttribute("class", "control");

  var expiryInput = document.createElement('input');
  expiryInput.setAttribute("class", "cc-expiry input-text");
  expiryInput.setAttribute("type", "tel");
  expiryInput.setAttribute("maxlength", "5");
  expiryInput.setAttribute("placeholder", "MM / YY");
  expiryInput.style.width = "125px";

  expiryDiv.appendChild(expiryInput);
  expDiv.appendChild(expiryDiv);
}

function fillExpDate(f) {
  if ((f.value).length === 5) {
    var expDate = f.value.split("/");
    var expMonth = expDate[0];
    var expYear = expDate[1];

    var monthSelect = document.getElementById('pubsvs_cc_expiration');
    monthSelect.value = parseInt(expMonth);

    var yearSelect = document.getElementById('pubsvs_cc_expiration_yr');
    var maxYear = parseInt(yearSelect.options[11].value);

    expYear = parseInt("20" + expYear);

    if (expYear > maxYear) {
      yearSelect.value = "";
    } else {
      yearSelect.value = expYear;
    }
  }
}

HTML 

<select name="payment[cc_exp_month]" class="select select-month" data-bind="attr: {id: getCode() + '_expiration', 'data-container': getCode() + '-cc-month', 'data-validate': JSON.stringify({required:true, 'validate-cc-exp':'#' + getCode() + '_expiration_yr'})},
                                        enable: isActive($parents),
                                        options: getCcMonthsValues(),
                                        optionsValue: 'value',
                                        optionsText: 'month',
                                        optionsCaption: $t('Month'),
                                        value: creditCardExpMonth" id="pubsvs_cc_expiration" data-container="pubsvs_cc-cc-month" data-validate="{&quot;required&quot;:true,&quot;validate-cc-exp&quot;:&quot;#pubsvs_cc_expiration_yr&quot;}" aria-required="true"><option value="">Month</option><option value="1">01 - January</option><option value="2">02 - February</option><option value="3">03 - March</option><option value="4">04 - April</option><option value="5">05 - May</option><option value="6">06 - June</option><option value="7">07 - July</option><option value="8">08 - August</option><option value="9">09 - September</option><option value="10">10 - October</option><option value="11">11 - November</option><option value="12">12 - December</option>
                    </select>

<select name="payment[cc_exp_year]" class="select select-year" data-bind="attr: {id: getCode() + '_expiration_yr', 'data-container': getCode() + '-cc-year', 'data-validate': JSON.stringify({required:true})},
                                       enable: isActive($parents),
                                       options: getCcYearsValues(),
                                       optionsValue: 'value',
                                       optionsText: 'year',
                                       optionsCaption: $t('Year'),
                                       value: creditCardExpYear" id="pubsvs_cc_expiration_yr" data-container="pubsvs_cc-cc-year" data-validate="{&quot;required&quot;:true}" aria-required="true"><option value="">Year</option><option value="2019">2019</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option><option value="2026">2026</option><option value="2027">2027</option><option value="2028">2028</option><option value="2029">2029</option>
                    </select>
...