2013-02-20 55 views
1

我几乎没有几个复选框和一个隐藏的div,当用户选中对应的框时会打开窗体。我想在检查特定日期时使用ajax和json将数据插入到数据库中,并在从隐藏div插入的数据库中插入时间。可能吗? 这里是我的形式: ON jsFiddle当使用Jquery,Ajax和JSON选择相应的复选框时,在数据库中插入数据

<div> 
<input type="checkbox" name="monday" id="mon" class="toggler" /> Monday 
<input type="checkbox" name="tuesday" id="tue" class="toggler" />Tuesday 
<input type="checkbox" name="wendsday" id="wen" class="toggler"/> Wendsday 
<input type="checkbox" name="thursday" id="thu" class="toggler" /> Thursday 
<input type="checkbox" name="friday" id="fri" class="toggler" /> Friday 
<input type="checkbox" name="saturday" id="sat" class="toggler" /> Saturday 
<input type="checkbox" name="sunday" id="sun" class="toggler" /> Sunday 
</div> 
    <div id="name" class="hidden" style="display: none"> 
    Time From::<input type="text" id="place" placeholder=""></input> Time To::<input type="text" id="place_one" placeholder=""></input> 
    <input type="button" onclick="save_time();" value="Save" /> 
    </div> 

这里是我的javascript:

$(function(){ 
    $('.toggler').click(function(id){ 
     if (this.checked) { 
      $('#name').slideDown(); 
     } else { 
      $('#name').slideUp(); 
     } 
    }); 

    save_time = function(days){ 
     $.ajax({ 
      type: "post", 
      url: "", 
      data: "days="+days, 
      success: function(data){ 

      } 
     }); 
     $('#name').slideUp(); 

    }; 

}); 

回答

1

属性我在你的小提琴进行了一些修改,以正确地传递了“天” +添加了“从”和“到”值到发布数据。此外,目前只能一次选择,因为我猜想这是你的逻辑所需要的。

Updated Fiddle

$(function(){ 
    $('.toggler').click(function(id){ 
     $('.toggler').not('#' + $(this).attr('id')).attr('checked', false); 
     if (this.checked) { 
      $('#name').slideDown(); 
     } else { 
      $('#name').slideUp(); 
     } 
    }); 

    save_time = function(){ 
     var id = $('.toggler:checked').attr('id'); 
     $.ajax({ 
      type: "post", 
      url: "url", 
      data: {day: id, from: $('#place').val(), to: $('#place_one').val()}, 
      success: function(data){ 

      } 
     }); 
     $('#name').slideUp(); 

    }; 

}); 
+0

谢谢@MarcellFülöp这是我需要的想法。现在我只需要弄清楚如何在php中完成它。再次感谢:) – Miki 2013-02-20 13:08:39

+0

现在,当在服务器端使用PHP时,您会收到$ _POST ['day'],$ _POST ['from']和$ _POST ['to']。当然,你可以改变JS中的后置参数名称。您可以访问并验证这些POST变量,然后根据您的逻辑保存它们。 – marekful 2013-02-20 13:11:39

0

你错过了的contentType和Ajax调用的DataType特性。

save_time = function(days){ 
      $.ajax({ 
       type: "post", 
       url: "", 
       data: "days="+days, 
       contentType: "application/json", 
       dataType: "json", 
       success: function(data){ 

       } 
      }); 

,并在您的服务器端方法应该有这样

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public string MethodName(string days) 
    { 
     // your code 
    } 
+0

如果未指定POST内容,Content-Type自动设置为“application/x-www-form-urlencoded”。如果在响应中指定''dataType',也会被jQuery猜到。 – marekful 2013-02-20 12:31:06

相关问题