Insert data in database when corresponding check box is selected using Jquery, Ajax and JSON

Question

I have little form with a couple of check boxes and a hidden div which opens when user check corresponding box. I want to use ajax and json to insert the data in database when speccific date is checked and to insert time in database inserted from hidden div. Is it possible? Here is my form: ON jsFiddle

<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>

Here is my 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();

   };

});

marekful · Accepted Answer · 2013-02-20 12:28:32Z

1

I changed a few things in your fiddle to correctly pass the 'day' + added the 'from' and 'to' values to the post data. Also, currently only one day can be selected at once because I guessed this is required by your logic.

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();

   };

});

answered Feb 20, 2013 at 12:28

marekful

15.4k6 gold badges39 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

m1k1 Over a year ago

thank you @Marcell Fülöp This is the idea that i needed. Now i just have to figure it out how to do it in php. Thanks again :)

marekful Over a year ago

Now when using PHP on server-side, you'd receive $_POST['day'], $_POST['from'] and $_POST['to']. Of course you can change the post paramter names in JS. You can access and validate these POST variables and then save them according to your logic.

Talha · Accepted Answer · 2013-02-20 12:20:07Z

0

you missed the contentType and dataType attribute of ajax call.

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

              }
           });

and in your server side method should have attribute like this

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

answered Feb 20, 2013 at 12:20

Talha

19.3k8 gold badges53 silver badges66 bronze badges

1 Comment

marekful Over a year ago

Content-Type is automatically set to application/x-www-form-urlencoded for POST requests if not specified. dataType is also guessed by jQuery if specified in the response.

Collectives™ on Stack Overflow

Insert data in database when corresponding check box is selected using Jquery, Ajax and JSON

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related