javascript теряет значение переменной после функции проверки - PullRequest
Новая
       1

javascript теряет значение переменной после функции проверки

0 голосов
/ 16 марта 2020

Я несколько дней пытался заставить этот код работать, но сегодня у меня появилась идея попросить помощи. Вот проблема: когда я пытаюсь отправить значение своих полей ввода в переменную params, я просто ничего не получаю, пустое значение. Однако, когда я удаляю свою функцию проверки, 

$(document).input.hasAttribute('required').each(function () {
    if ($(this).val() == "") {
        alert('Please fill all the fields');
    }
});

все параметры находятся в моем URL:? Rpt = 123456 & et c ... et c ...

знаете, почему я теряю значение моей переменной на пути? Если да, как это решить?

Спасибо за помощь 

jQuery(document).ready(function() {
  jQuery("#vb_report_date").datepicker({
    format: 'dd/mm/yyyy',
    autoHide: true
  });
  jQuery("#vb_verify_button").click(function() {
    check_required_inputs(true);
  });
});

function check_required_inputs(hasbeenSubmited) {
  var params = "";
  if (hasbeenSubmited) {
    $(document).input.hasAttribute('required').each(function() {
      if ($(this).val() == "") {
        alert('Please fill all the fields');
      }
    });
    params = "?rpt=" + jQuery("#vb_report_no").val() + "&d=" + jQuery("#vb_report_date").val() + "&pin=" + jQuery("#vb_verif_pin").val();
  }
  window.location.href = "verify-reports.php" + params;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>

  <form id="requiredform" class="verify-box">
    <input type="text" id="vb_report_no" placeholder="Report Number" size="22" data-error="This field is required." class="" required>
    <input type="text" id="vb_report_date" placeholder="Date of Issue" size="12" class="hasDatepicker" data-error="This field is required." required>
    <input type="text" id="vb_verif_pin" placeholder="Verification PIN" size="22">
    <input type="submit" value="Verify" id="vb_verify_button">
  </form>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 16 марта 2020

Вы можете использовать метод onsubmit . 

<form id="requiredform" class="verify-box" onsubmit="return getdata()" >
    <input type="text" id="vb_report_no" placeholder="Report Number" size="22" data-error="This field is required." class="" required>
    <input type="text" id="vb_report_date" placeholder="Date of Issue" size="12" class="hasDatepicker" data-error="This field is required." required>
    <input type="text" id="vb_verif_pin" placeholder="Verification PIN" size="22">
    <input type="submit" value="Verify" id="vb_verify_button">
</form>

function getdata() {
  check_required_inputs(true);
}

Попробуйте querySelectorAll с селектором attribute , чтобы получить все необходимые входные данные в документе . 

document.getElementById('requiredform').querySelectorAll("[required]")

Теперь функция будет такой, 

function check_required_inputs(hasbeenSubmited) {
  var params = "";
  console.log(hasbeenSubmited)
  if (hasbeenSubmited) {
     document.getElementById('requiredform').querySelectorAll("[required]").forEach(function (element) {
       if ($(element).val() == "") {
          alert('Please fill all the fields');
       }
     });
  params = "?rpt=" + jQuery("#vb_report_no").val() + "&d=" + jQuery("#vb_report_date").val() + "&pin=" + jQuery("#vb_verif_pin").val();
  }
 window.location.href = "verify-reports.php" + params;

}

Для более подробной информации: как получить значение из формы перед отправкой

Проверьте рабочий фрагмент здесь .. 

    function check_required_inputs(hasbeenSubmited) {
      var params = "";
      console.log(hasbeenSubmited)
      if (hasbeenSubmited) {    	
    	document.getElementById('requiredform').querySelectorAll("[required]").forEach(function (element) {    	
    	if ($(element).val()== "") {
    		alert('Please fill all the fields');
    	}    	
        });
     params = "?rpt=" + jQuery("#vb_report_no").val() + "&d=" + jQuery("#vb_report_date").val() + "&pin=" + jQuery("#vb_verif_pin").val();
      }
     console.log(params);
    window.location.href = "verify-reports.php" + params;
   }

function getdata() {
  check_required_inputs(true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    
<form id="requiredform" class="verify-box" onsubmit="return getdata()" >
	<input type="text" id="vb_report_no" placeholder="Report Number" size="22" data-error="This field is required." class="" required>
	<input type="text" id="vb_report_date" placeholder="Date of Issue" size="12" class="hasDatepicker" data-error="This field is required." required>
	<input type="text" id="vb_verif_pin" placeholder="Verification PIN" size="22">
	<input type="submit" value="Verify" id="vb_verify_button">
</form>
0 голосов
/ 16 марта 2020

Чтобы выбрать все необходимые входные данные в документе, используйте $(document).find('input[required]').

Ваша функция должна выглядеть следующим образом: 

function check_required_inputs(hasbeenSubmited) {

  // do the check only when hasBeenSubmited
  if (hasbeenSubmited) {

    // assume inputs are filled
    var isValid = true;

    // check required inputs
    $(document).find('input[required]').each(function () {
      // input value is missing
      if ($(this).val() == "") {
        alert('Please fill all the fields');
        isValid = false;
      }
    });

    // do the redirect if isValid
    if (isValid) {
      // make query string
      var params = "?rpt=" + $("#vb_report_no").val() + "&d=" + $("#vb_report_date").val() + "&pin=" + $("#vb_verif_pin").val();

      // do the redirect
      window.location.href = "verify-reports.php" + params;
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...