0

I have a form for setting up store timings as follows:

<table class="table">
   <tbody>
      <tr>
         <td tabindex="0">Monday</td>
         <td><label class="Storeopen">Open</label></td>
         <td><input type="time" id="day_1_open" name="day_1[]" value="16:00"></td>
         <td><label class="Storeclose">Close</label> </td>
         <td><input type="time" id="day_1_close" name="close" value="00:00"></td>
      </tr>
      <tr>
         <td tabindex="0">Tuesday</td>
         <td><label class="Storeopen">Open</label></td>
         <td><input type="time" id="day_2_open" name="open" value="16:00"></td>
         <td><label class="Storeclose">Close</label> </td>
         <td><input type="time" id="day_2_close" name="close" value="00:00"></td>
      </tr>
      <tr>
         <td tabindex="0">Wednesday</td>
         <td><label class="Storeopen">Open</label></td>
         <td><input type="time" id="day_3_open" name="open" value="16:00"> </td>
         <td><label class="Storeclose">Close</label> </td>
         <td><input type="time" id="day_3_close" name="close" value="00:00"></td>
      </tr>
      <tr>
         <td tabindex="0">Thursday</td>
         <td><label class="Storeopen">Open</label></td>
         <td><input type="time" id="day_4_open" name="open" value="16:00"> </td>
         <td><label class="Storeclose">Close</label> </td>
         <td><input type="time" id="day_4_close" name="close" value="00:00"></td>
      </tr>
      <tr>
         <td tabindex="0">Friday</td>
         <td><label class="Storeopen">Open</label></td>
         <td><input type="time" id="day_5_open" name="open" value="16:00"> </td>
         <td><label class="Storeclose">Close</label> </td>
         <td><input type="time" id="day_5_close" name="close" value="00:00"></td>
      </tr>
      <tr>
         <td tabindex="0">Saturday</td>
         <td><label class="Storeopen">Open</label></td>
         <td><input type="time" id="day_6_open" name="open" value="16:00"> </td>
         <td><label class="Storeclose">Close</label> </td>
         <td><input type="time" id="day_6_close" name="close" value="00:00"></td>
      </tr>
      <tr>
         <td tabindex="0">Sunday</td>
         <td><label class="Storeopen">Open</label></td>
         <td><input type="time" id="day_7_open" name="open" value="16:00"> </td>
         <td><label class="Storeclose">Close</label> </td>
         <td><input type="time" id="day_7_close" name="close" value="00:00"></td>
      </tr>
   </tbody>
</table>

Now. To get data, I am using the following jQuery code:

        var newTiming = new Array();
        for(var n=1; n<=7; n++){
            newTiming["day_"+[n]] = {"open": $("#day_"+n+"_open").val(), "close":$("#day_"+n+"_close").val()};
            console.log(newTiming);
        }

My problem is I can get the data in the console but when I try to store the array into a hidden text field to pass it to my PHP, I am not getting anywhere.

I tried to put the array in the hidden field by the following code: 

$("#deliveryTimings").val(JSON.stringify(newTiming));

What I need to get is an array in the following form:

"day_1" => array(
                 "open" => "16:00",
                 "close" => "00:00"
),

This is part of a larger form. I am trying to save each section by jQuery. There is no tag and lots of other input fields on the page. My save button for each section addresses that particular section. Thats why I cant use serializeArray()? and am using this jQuery code to get the data.

I am hoping to get help from community here. Thank you.

Update: I found the ultimate solution by using jQuery Serialize Object by Paul Maček on https://github.com/macek/jquery-serialize-object

Amir Soleymani
  • 355
  • 1
  • 3
  • 9
  • 1
    possible duplicate: http://stackoverflow.com/questions/2276463/how-can-i-get-form-data-with-javascript-jquery – Sagar Guhe May 03 '16 at 10:46
  • Thank you for your answer. This is part of a larger form. I am trying to save each section by jQuery. There is no tag and lots of other input fields on the page. My save button for each section addresses that particular section. Thats why I cant use serializeArray()? and am using this jQuery code to get the data. – Amir Soleymani May 03 '16 at 10:53
  • why don't you use the name like `day_2[open]` & `day_2[close]` for your day time inputs? This will give you very structured and same data at your server side like you are constructing here in the for loop by simply using `serializeArray()` – Sagar Guhe May 03 '16 at 11:03
  • Thank you. I will try this. – Amir Soleymani May 03 '16 at 11:09

1 Answers1

0

You can use the serializeArray() to get the form data. And to remove your for loop you can give your day open and close fields the name="" like this:

          <tr>
             <td tabindex="0">Monday</td>
             <td><label class="Storeopen">Open</label></td>
             <td><input type="time" id="day_1_open" name="day_1[open]" value="16:00"></td>
             <td><label class="Storeclose">Close</label> </td>
             <td><input type="time" id="day_1_close" name="day_1[close]" value="00:00"></td>
          </tr>
          <tr>
             <td tabindex="0">Tuesday</td>
             <td><label class="Storeopen">Open</label></td>
             <td><input type="time" id="day_2_open" name="day_2[open]" value="16:00"></td>
             <td><label class="Storeclose">Close</label> </td>
             <td><input type="time" id="day_2_close" name="day_2[close]" value="00:00"></td>
          </tr>

By renaming your fields like you should get the data organized by day number at your server side.

Sagar Guhe
  • 1,041
  • 1
  • 11
  • 35