使用ajax提交获取检查值

问题描述：

首先，我是ajax和Java Script的新手。我花了几天的时间解决了这个问题，但我仍然没有想到它。我已经阅读了类似问题的主题，但仍然无法正确理解。所以在这里;使用ajax提交获取检查值

非常简单我想从三个单选按钮之一发布选中的值。我得到的虽然是第一个单选按钮才值..

我已经试过几件事情，但我剥离下来的代码，所以它可能是更容易看到问题是:-)

的AJAX

<script type"text="" javascript"=""> 
$(document).ready(function(){ 
    $("form#submit").submit(function() { 
    // we want to store the values from the form input box, then send via ajax below 
    var svar  = $('#svar').attr('value'); 
    var date  = $('#date').attr('value'); 
    var email  = $('#email').attr('value'); 

     $.ajax({ 
      type: "POST", 
      url: "ajax.php", 
      data: "svar="+ svar + "&email=" + email + "&date=" + date, 
      success: function(){ 
       $('form#submit').hide(); 
       //$('form#submit :input').val(""); 
       $('div.success').fadeIn(); 
      } 
     }); 
    return false; 
    }); 
}); 
</script>

形式

<form id="submit" method="post" name="submit" action=""> 
      <fieldset> 
      <legend>Dagens spørgsmål: <? echo $row['question'];?></legend> 
       <br> 
       <input type="radio" name="svar" id="svar" value="1"><? echo $row['opt1'];?> 
       <br> 
       <input type="radio" name="svar" id="svar" value="2"><? echo $row['opt2'];?> 
       <br> 
       <input type="radio" name="svar" id="svar" value="3"><? echo $row['opt3'];?> 
       <br> 
        <input name="email" id="email" type="hidden" value="<? echo $email ?>" /> 
        <input name="date" id="date" type="hidden" value="<? echo $date ?>" /> 

       <br><br> 
       <button type="submit" class="button positive"> <img src="img/tick.png" alt=""> Svar på dagens spørgsmål </button> 
      </fieldset> 
     </form>

Ajax.php

<?php 

    include ("dbc.php"); 

// CLIENT INFORMATION 
    $email  = htmlspecialchars(trim($_POST['email'])); 
    $date  = htmlspecialchars(trim($_POST['date'])); 
    $svar  = htmlspecialchars(trim($_POST['svar'])); 



//stuff from answers 

     mysql_query("INSERT INTO answers 
     (`email`,`day`,`answer`) 
     VALUES 
     ('$email','$date','$svar')") or die(mysql_error()); 

?>

希望一个你，你聪明的家伙有办法解决。因为这件事，我要把我逼疯

您正在将数据插入数据库，而不是HTML文档。您需要使数据库的数据安全，而不是HTML。不要使用'htmlspecialchars'，使用[使用绑定参数]（http://bobby-tables.com/）的数据库插入方法。（如果稍后将数据从数据库中提取出来并将其插入到HTML文档中，那么**将使用'htmlspecialchars'）。 – Quentin

答

你有几个问题。

首先，您的HTML是invalid。一个ID必须是唯一的，所以每个单选按钮必须有它自己的ID。您通过给他们一个相同的名称来关联一组单选按钮。（具有唯一ID然后可以使用FOR属性将LABEL与每个LABEL相关联，通过使屏幕阅读器更容易并提供更大的点击目标来增加可访问性。

其次，单选按钮的值是固定的。问题是“它是否成功？”并且通过查看它是否被检查来确定。如果您手动执行此操作，则必须在组中的每个单选按钮上都有循环，直到找到一个已选中的选项（或使用仅匹配选中比例按钮（:checked）的选择器）。

第三，您通过将字符串混合在一起而不确保数据是否安全（使用encodeURIComponent）来构建表单数据。

解决方法是忘记手动完成所有这些操作，然后只使用表单上的jQuery serialize方法。

答

第一个：您对几个元素使用相同的ID。 ID-s应该是唯一的，你应该用类名或其他方式来处理你的元素。因此，而不是

$('#svar')

你要跟应该使用

$('input[name=svar]')

引用组复选框。

二：有轻微错误的位置：

$('#svar').attr('value');

是第一个单选按钮的值属性的值，而

$('input[name=svar]:checked').val();

会给你检查收音机的价值按钮选择input[name=svar]。

编辑： thx @Quentin指出我的错误。

'val' [返回**第一个**单选按钮的值]（http://jsfiddle.net/ZzDPa/），而不是选中的那个。 – Quentin

@Quentin对，纠正了我的答案。 – aorcsik

答

首先要知道的是id应该在html文档中是唯一的。

是什么使得ID类型的属性特别的是没有两个这样的属性可以具有相同的值;

[从CSS2选择docs]

你assigend同一个ID三个单选按钮引用。

现在当您使用var svar = $('#svar').attr('value');时，只有第一个单选按钮将被选中。所以，不管选中哪个单选按钮，只有你会得到的第一个单选按钮值。

现在，如果您想要选择单选按钮，您必须使用jQuerys :checked selector。

使用ajax提交获取检查值

相关推荐