Почему мой код не отображал дату (формат дд-м-гг) в поле ввода после выбора? - PullRequest
Новая
       2

Почему мой код не отображал дату (формат дд-м-гг) в поле ввода после выбора?

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

Ниже приведен мой код.

Сначала запустите index.php. Затем появится раскрывающийся список, в котором необходимо выбрать значение из раскрывающегося списка. пока в выпадающем списке будет отображаться значение 1 или 2. Если вы выберете 2, оно будет отображать значение, которое было выбрано вместе с полем «date», вызванным из display-date.php и из поля «date», вы можете выбратьдата из календаря, которая вызывается с помощью плагина datepicker.

Сейчас .. проблема ... Я выбрал дату из календаря, но выбранная дата не появилась в поле ввода даты. где я не прав?

Надеюсь, кто-нибудь может мне помочь, пожалуйста ... :)

Спасибо.

Вот index.php 

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <script>
      function getData(str){
          var xhr = false;
          if (window.XMLHttpRequest) {
              // IE7+, Firefox, Chrome, Opera, Safari
              xhr = new XMLHttpRequest();
          } 
           else {
              // IE5/IE6
              xhr = new ActiveXObject("Microsoft.XMLHTTP");
           }
           if (xhr) {
               xhr.onreadystatechange = function () {
                  if (xhr.readyState == 4 && xhr.status == 200) {
                       document.getElementById("results").innerHTML = xhr.responseText;
                   }
                }
                xhr.open("GET", "display-date.php?q="+str, true);
                xhr.send(null);
            }
       }
     </script>
     <div>
      <?php
         echo '<select title="Select one" name="selectcat" onChange="getData(this.value)">';        
         echo '<option value="None">-- Select Option --</option>';
         echo '<option value="1">One</option>';
         echo '<option value="2">Two</option>';
         echo '</select>';
       ?>
      </div>
      <br/><br/>
      <p>You selected: <span id="results"></span></p>
  </body>
</html>

Вот display-date.php 

<?php
$Q = $_GET["q"];
echo $Q;
?>

<?php
if ($Q ==  '2'){
?>

<html>
<head>
    <style>
         #date_input{
            text-indent: -500px;
            height:25px; 
            width:200px;
        }
    </style>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
    <input id ="date_input" dateformat="dd-M-yy" type="date"/>
    <span class="datepicker_label" style="pointer-events: none;"></span>

    <script type="text/javascript">
        $("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", 
top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : 
($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });
    </script>
</body>

</html>

<?php
}
?>

Ответы [ 2 ]

0 голосов
/ 01 октября 2019
  1. Нет необходимости использовать ajax в вашем случае, Ajax нельзя использовать так, как вы показали в своем вопросе.
  2. Ajax не используется для рисования html в DOM
  3. Не нужно использовать ActiveXObject, это небезопасно, и я не думаю, что мы должны поддерживать IE 5 или IE 6 в любом случае в современной разработке.
  4. Если вам нужно использовать ajax, используйте функцию ajax JQuery вместо XMLHttpRequest, Asя вижу, вы уже используете его.

Вот код, который работает без ajax и работает в порядке. 

function getData(str){
  $('.showInput').hide();
  $('.showText').text('');
  if(str != ""){

    str = parseInt($.trim(str));

    if(str == 2){
      $('.showInput').show();
    }else{
      $('.showText').text(str);
    }
  }

}

$(document).ready(function(){
  $("#date_input").datepicker({ dateFormat: 'dd-M-yy' });
});
<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  </head>
  <body>
    
	 <style>
		.showInput{
			display:none;
		}
	 </style>
     <div>
     
        <select title="Select one" name="selectcat" onChange="getData(this.value)">
			<option value="">-- Select Option --</option>
			<option value="1">One</option>
			<option value="2">Two</option>
        </select>
       
      </div>
      <br/><br/>
      <p>You selected: <span id="results">
		<span class="showText"></span>
		<span class="showInput">
			<input id="date_input" dateformat="dd-M-yy" type="text"/>
		</span>
	</p>
	
  </body>
</html>
0 голосов
/ 01 октября 2019

Изменить display-date.php . Базовая структура HTML больше не нужна. 

<?php
$Q = $_GET["q"];
echo $Q;
?>

<?php
if ($Q ==  '2'){
?>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
    <input id ="date_input" dateformat="dd-M-yy" type="date"/>
    <span class="datepicker_label" style="pointer-events: none;"></span>

    <script type="text/javascript">
        $("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", 
top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : 
($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });
    </script>


<?php
}
?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...