獲取選擇值而不刷新表單

Question

使用此代碼，我可以看到每個選項值都已打印，但是每次選擇一個選項時都會刷新頁面。 服務器正確獲取了發布數據，所以我只需要不刷新即可。 謝謝。 問候。

<form action="" method="post">
   <select name="day" onchange="this.form.submit();">
      <option>Please select a date</option>
      <option value="Mon">Monday</option>
      <option value="Tue">Tuesday</option>
      <option value="Wed">Wednesday</option>
      <option value="Thu">Thursday</option>
      <option value="Fri">Friday</option>
   </select>
</form>
<script type="text/javascript">
   $('#day').change(function() 
   {
      $.ajax({
           type: 'post',
           url: "day.php",
           data: $("form.day").serialize(),
       });
        return false;
   });
</script>
<?php 
include 'day.php'; ?>

day.php

<?php
$day = $_POST['day'];
echo $day;
?>

Answer 1

更新onchange以調用Javascript函數，該Javascript函數將數據復制到另一種形式的隱藏字段中，然后使用Ajax提交該表單。

（可選）您也可以直接通過Ajax提交數據，而無需其他形式，但是對於可能需要高頻處理的事情，我發現盡可能減小帶寬非常有用。

Answer 2

我認為您需要這樣做：

e.preventDefault（）;

//添加您的id =“ day”

 <select name="day" id="day" onchange="this.form.submit();">
        $('#day').change(function(e) 
           {
             e.preventDefault();
              $.ajax({
                   type: 'post',
                   url: "day.php",
                   data: $("form.day").serialize(),
               });
                return false;
           });

Answer 3

我可以看到<p id=..>打印的每個選項值，而無需刷新頁面。 但是帖子數據沒有傳遞給day.php。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<head>
<script>
    function postSelection(selectObject) {
        var day = window.dateForm.day.value = selectObject.options[selectObject.selectedIndex].value;
        var dataString = "day=" + day;

        $.ajax ({
        type:"post",
        url: "day.php",
        data:dataString,
        success: function (response) {
            $("#list").html(response);

        }
      });
        return false;
    }
</script>
</head>
<body>

<form name="displayForm">
<select name="day" onchange="return postSelection(this)">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>

<form action="" method="post" name="dateForm">
<input type="hidden" name="day">
</form>

<?php include 'day.php'; ?>
</body>
</html>

獲取選擇值而不刷新表單

問題描述

3 個解決方案

解決方案1
0 2015-08-23 02:06:22

解決方案2
0 2015-08-23 02:07:03

e.preventDefault（）;

解決方案3
0 2015-08-23 17:10:33

獲取選擇值而不刷新表單

問題描述

3 個解決方案

解決方案1 0 2015-08-23 02:06:22

解決方案2 0 2015-08-23 02:07:03

e.preventDefault（）;

解決方案3 0 2015-08-23 17:10:33

解決方案1
0 2015-08-23 02:06:22

解決方案2
0 2015-08-23 02:07:03

解決方案3
0 2015-08-23 17:10:33