Question

我在form element SELECT点击server PHP code时遇到问题。

我在这里找到了类似的link，但在讨论中略有不同。我的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使用AJAX将form elements和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,..,服务器端总是以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按钮
添加一个引入jQuery的script标记
在sendToServer来电中，通过$(document).ready(function(){});提交元素上的click事件触发（或者您提交表单），将来电转接到input功能< / LI>
[可选]我在else语句检查if值后添加了$_POST['bedrooms']部分，以便我可以检查所选值是什么

希望这有帮助。

Answer 2

在你的html表单代码中放置一个隐藏字段

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

在php代码中检查bedroomVal的值

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

3 个答案: