Question

我有一个带日期输入和多选的html表单。加载页面时，我通过php函数加载多选项的选项。我想要做的是使用js脚本捕获日期输入的onChange事件，并启动php脚本以使用新日期重新加载选择的选项值。

这是php代码

<?php 

    //DEFINE 
    $dateMinimumInput = "";

    // Handle AJAX request for changing DateMinimumInput(start)
    if(isset($_POST['ajax']) && isset($_POST["dateMinimumChanged"]) ){
        echo "Inside function dateMinimumChanged: " .$_POST['dateMinimumChanged'];
        $dateMinimumInput = verify_input($_POST['dateMinimumChanged']);
    }
    $stationList = selectStations($dateMinimumInput);   ?>

这是javascript

＆＃13;

  <script>
		$(document).ready(function(){
			$("#dateMinimumInput").change(function(){
				//Selected value
				inputValue = $(this).val();
				console.log(inputValue);
				$.ajax({
					type: 'POST',
					url: '',
					data: {ajax: 1, dateMinimumChanged: inputValue},
					success: function(data){
						console.log('works');
						console.log(data);
						$('body').append(response);
					},
					error: function(){
						alert('something went wrong');
					}
				});
				
				
			});
		});
    </script>

＆＃13;

这是html表单

＆＃13;

<form class="" role="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group form-row"> 
				<label for="dateMinimumInput" class="col-form-label col-sm-4">Date Minimum:</label>
				<div class="col-sm-8">
					<div class="form-group">	
						<input type="date" class="form-control <?php if ( $dateMinimumInputErr !== "") { echo 'is-invalid'; }?>" id="dateMinimumInput" name="dateMinimumInput" placeholder="Enter date minimum" value="<?php echo $dateMinimumInput;?>"> 
						<div class="invalid-feedback"> <?php if ( $dateMinimumInputErr !== "") { echo 'Please, ' .$dateMinimumInputErr; } ?> </div>
					</div>				
				</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group form-row"> 
				<label for="stationInput" class="col-form-label col-sm-4">Station:</label>
                <div class="col-sm-8"> 
					<select id="stationInput" name="stationInput[]" class="form-control" multiple>
						<?php
							foreach($stationList as $station){
								if($station['numberofmeasurements'] == 0){
									echo '<option disabled="true" value="'.$station['id'] .'">'.$station['location'] .' (' .$station['numberofmeasurements'] .') </option>';
								}else{
									echo '<option value="'.$station['id'] .'">'.$station['location'] .' (' .$station['numberofmeasurements'] .') </option>';
								}
							}
						?>
					</select> 
				</div>
            </div>
          </div>
          <div class="row">
          <div class="col-md-12 text-right">
            <button id="submit" name="submit" type="submit" class="btn btn-primary">Search</button>
          </div>
        </div>
      </form>

＆＃13;

代码片段都来自同一页面。

问题在于，当我更改日期时，javascript会捕获事件，但不会执行PHP脚本，也不会重新加载选项。

关于我做错的任何帮助？

谢谢

AJAX调用PHP相同页面并重新加载选项值

0 个答案: