如何使用AJAX將SELECT元素發送到服務器

Question

我在檢查server PHP code form element SELECT時遇到問題。

我在這里找到了類似的鏈接，但在討論中略有不同。 我的HTML代碼是

<body>
<div id="header">
<h1>Please add your landed property to advertise</h1>
</div>

<div id="background">
<form name="advertiseForm"  id="advertiseForm" method="post" >


<br /><br /><br />
<select name="stories"  id="stories"  required="required"/>  
     <option value="Stories" >Number of stories</option>  
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option>
     <option value="4">4</option> 
     <option value="morethan4">More than 4</option>
<select/>  
<label for="stories">Please select for number of stories</label>
<div  id="stories-error" class="error-box" style="color:#FF0000"></div>

<br /><br /><br />
<select name="bedrooms" id="bedrooms" required="required"/>  
     <option value="Bedrooms" >Number of bedrooms</option>  
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option>
     <option value="4">4</option> 
     <option value="5">5</option>
<select/>  
<label for="numbedrooms">Please select for number of bedrooms</label>
<div  id="bedrooms-error" class="error-box" style="color:#FF0000"></div>
</form>
</body>

我two SELECT elements at my form有two SELECT elements at my form並且form elements通過AJAX使用以下data: $("form").serialize(),發送到服務器data: $("form").serialize(),

</body>
<script>
function sendtoServer() {
     $.ajax({
        url: "advertisementdatavalidationatserver.php",
        type: "POST",
        data: $("form").serialize(), 
        success:  function(ret){
            alert(ret.message);
            if(ret.error == true){ 

              if(ret.message.indexOf("Storieserror")>=0){
                  $('#stories-error').css('display', 'block');
                  $('#stories-error').html('Please enter number of stories at your building');
              }else{
                  $('#stories-error').html(''); 
              }

              if(ret.message.indexOf("Bedroomserror")>=0){
                  $('#bedrooms-error').css('display', 'block');
                  $('#bedrooms-error').html('Please enter number of bedrooms at your building');
              }else{
                  $('#bedrooms-error').html(''); 
              }
         }else{

              $('#stories-error').html(''); 
              $('#bedrooms-error').html('');

           }
        },
        error: function(){
           // the AJAX request failed as in timed out / bad url etc.
        } 
   });
}
</script>
</html>

我在服務器端進行驗證的PHP代碼是

<?php
$data = array();
$data['error'] = false;

if ($_SERVER["REQUEST_METHOD"] == "POST") {

        if ($_POST['stories'] == "Stories"){
            $data['error'] = true;
            $data['message'][] = "Storieserror";        
        }

        if ($_POST['bedrooms'] == "Bedrooms"){
            $data['error'] = true;
            $data['message'][] = "Bedroomserror";        
        }

}

// then echo the $data array you have built as JSON to use in jquery. 
//This will be what is returned in your AJAX request
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($data);
?>

這里的問題是對於SELECT for bedrooms ，無論我如何將option values to 1,2,3,4,..,更改option values to 1,2,3,4,..,服務器端始終會返回Bedroomserror ，這意味着無論我如何更改其他option values, client side always send 'Bedrooms' value to server. Stories is working fine 。 可能是什么問題呢？

編輯：現在我發現了我的問題。 我看到序列化的數據為

alert($("form").serialize());

附件中顯示了序列化的數據，有趣的是有重復的數據（帶下划線）。 第一個是美好的stories=3&bedrooms=2&bathrooms=2 。 然后還有另一個重復的消息，其中bedrooms=Bedrooms&bathroom=Bathrooms ，我認為我的PHP代碼捕獲了第二個，並且該值從未更改。

Answer 1

在此處重新創建代碼進行測試時，我沒有遇到您描述的問題。 為bedrooms選擇編號選項不會顯示錯誤，並且返回值正確。

要解決此類問題，建議采取以下措施：

確保由sendToServer javascript函數序列化的值是您期望的值。 通過console.log()或類似的方式輸出它們，以檢查您在表單中選擇的內容實際上已發送到PHP腳本。

我必須對您提供的代碼進行一些更改才能使其正常運行。 我在這里的假設是您已經具備了此功能，但是您的問題中並未包含此功能，因此我引用了我在下面所做的更改，因為它們是使測試正常進行所必需的：

將有效的DOCTYPE和head標簽添加到HTML標記中
將input按鈕添加到表單以進行提交
添加一個script標簽，用於拉入jQuery
sendToServer函數的調用包裝在$(document).ready(function(){}); 調用，由input Submit元素上的click事件觸發（或您提交表單）
[可選]我在您的if語句之后添加了else部分，以檢查$_POST['bedrooms']值，以便我可以檢查所選的值是

希望這可以幫助。

Answer 2

在您的html表單代碼中放置一個隱藏字段

<input type="hidden" id="bedroomsVal" name="bedroomsVal" value="" />

在PHP代碼中檢查bedroomsVal的值

if ($_POST['bedroomsVal'] == "Bedrooms"){
            //your logic       
        }

在js中執行此操作

$(document).ready(function(){
 $("#bedroomsVal").val($("#bedrooms option:selected").text());
 $("#bedrooms").change(function(){
 $("#bedroomsVal").val($("#bedrooms option:selected").text());
 });     
})

Answer 3

第一步，您需要將參數從AJAX代碼傳遞到PHP頁面。 那么您可以在PHP部分中查看過帳的值。

的HTML

<select name="stories"  id="stories"  required="required"/>  
 <option value="Stories" >Number of stories</option>  
 <option value="1">1</option> 
 <option value="2">2</option> 
 <option value="3">3</option>
 <option value="4">4</option> 
 <option value="morethan4">More than 4</option>
</select>
<select name="bedrooms" id="bedrooms" required="required"/>  
 <option value="Bedrooms" >Number of bedrooms</option>  
 <option value="1">1</option> 
 <option value="2">2</option> 
 <option value="3">3</option>
 <option value="4">4</option> 
 <option value="5">5</option>
<select/>

的JavaScript

<script>
function sendtoServer() {
    $.ajax({
       url: "advertisementdatavalidationatserver.php",
       type: "POST",
       data: {story: $('#stories').val(), bedroom: $('#bedrooms').val()}, 
       success:  function(ret){
           // Any logic when return TRUE;
       },error: function(){
           // the AJAX request failed as in timed out / bad url etc.
       } 
    });
}

的PHP

檢查所有發布的參數

<?php 
if(! isset($_POST)){
    // return FALSE;
}
else
{
    // check the posted parameters
    // write your query;
    // return TRUE or retrieved value
}
?>

如何使用AJAX將SELECT元素發送到服務器

問題描述

3 個解決方案

解決方案1
1 已采納 2016-01-05 05:31:48

解決方案2
0 2016-01-05 05:26:49

解決方案3
0 2016-01-05 05:45:46

如何使用AJAX將SELECT元素發送到服務器

問題描述

3 個解決方案

解決方案1 1 已采納 2016-01-05 05:31:48

解決方案2 0 2016-01-05 05:26:49

解決方案3 0 2016-01-05 05:45:46

解決方案1
1 已采納 2016-01-05 05:31:48

解決方案2
0 2016-01-05 05:26:49

解決方案3
0 2016-01-05 05:45:46