Can I convert these data into json and send it with form POST instead of ajax

Question

I have a 7 steps form and this is the last step which shows all the info the user typed in former pages. All the data is dynamically appended to each <td class="table_info_ans"> using jQuery.

I need to wrap up these data into json format like below and send it to backend:

{
  "personal": {
    "gender": "F",
    "firstName": "Heeeeey",
    "lastName": "Beauty",
    "localName": "Girl",
    "birthday": "1992/10/28"
  },
  "interests": {
    "destinations": [
      "UK",
      "USA",
      "CA"
    ],
   }
 }

Any method to do this?? The table structure looks like:

<form action='/student-registration/process'>
    <hr>
    <div class="blue_font_title">ABOUT YOU
       <div class="link_page link_page_1" data-hook="form_step1"><span class="page_back_arrow"></span></div>
    </div>

    <table class="info_table" id="personal">
       <tbody>
          <tr>
            <td class="table_info_title">Gender:</td>
            <td class="table_info_ans student_gender" name="gender"></td>
          </tr>
          <tr>
            <td class="table_info_title">Local name:</td>
            <td class="table_info_ans student_local_name" name="localName"></td>
          </tr>
          <tr>
            <td class="table_info_title">First name:</td>
            <td class="table_info_ans student_eng_firstname" name="firstName"></td>
          </tr>
          <tr>
             <td class="table_info_title">Last name:</td>
             <td class="table_info_ans student_eng_lastname" name="lastName"></td>
          </tr>
          <tr>
             <td class="table_info_title">Birthday:</td>
             <td class="table_info_ans student_birthday" name="birthday"></td>
          </tr>
      </tbody>
  </table>
  <hr>
  <div class="blue_font_title">COUNTRY AND TIME YOU WANT TO GO
     <div class="link_page link_page_2" data-hook="form_step2"><span class="page_back_arrow"></span></div>
  </div>
  <table class="info_table" id="interest">
     <tbody>
        <tr>
           <td class="table_info_title">Destination:</td>
           <td class="table_info_ans student_study_destination"></td>
        </tr>
               ...                        
      </tbody>
   </table>
   <button type="submit" id="submit_button" class="submit_button">SUBMIT YOUR PROFILE</button>

Now, I'm trying to wrap up these data into the format I want manually....

var personal_title_arr = [];
var personal_ans_arr = [];
var obj_per = {};
$('#personal tr').each(function() {
  var personal_title = $(this).find('.table_info_ans').attr('name');
  var personal_ans = $(this).find('.table_info_ans').text();    

  personal_title_arr.push(personal_title);
  personal_ans_arr.push(personal_ans);
});

for (var i = 0; i < personal_title_arr.length; i++) {
    obj_per[personal_title_arr[i]] = personal_ans_arr[i];
}
var asJSON_per = JSON.stringify(obj_per);

Because there are four tables in this form, so I have to wrap them up manually four times. I think the way I'm doing is really ridiculous..... Are there any tips that I can for loop just ONE time?

I dont know about PHP or Larvel (havn't worked on it) but there is a workaround for this if you are unable to find anytihng. Why don't you use a hiddentextarea. when you click submit.. call a javascript method and make a JSON out of all this data and save it as a value to that TextArea. Then you can use that to fetch the value at backend. — utkarsh31, Nov 13 '17 at 04:34
If it was already in a form why can't you use the original submittal? Sounds over complicated — charlietfl, Nov 13 '17 at 04:38
She already has the data I believe, she has said that all data is appended dynamically (isn't it?). The problem is she wants to send the data in JSON format using normal button submission to backed rather than a AJAX call — utkarsh31, Nov 13 '17 at 04:43

score 1 · Accepted Answer · answered Nov 13 '17 at 06:40

Following will work in javascript. Try this:

Change the table as :

<table class="info_table" id="personal" data-id="personal">
   <tbody>
      <tr>
        <td class="table_info_title">Gender:</td>
        <td class="table_info_ans student_gender" name="gender">F</td>
      </tr>
      <tr>
        <td class="table_info_title">Local name:</td>
        <td class="table_info_ans student_local_name" name="localName">Heeey</td>
      </tr>
      <tr>
        <td class="table_info_title">First name:</td>
        <td class="table_info_ans student_eng_firstname" name="firstName">Beauty</td>
      </tr>
      <tr>
         <td class="table_info_title">Last name:</td>
         <td class="table_info_ans student_eng_lastname" name="lastName">Girl</td>
      </tr>
      <tr>
         <td class="table_info_title">Birthday:</td>
         <td class="table_info_ans student_birthday" name="birthday">1992/10/28</td>
      </tr>
  </tbody>
</table>
<table class="info_table" id="interests" data-id="interests">
   <tbody>
      <tr>
        <td class="table_info_title">Destination:</td>
          <td class="table_info_ans student_gender" name="Destination" data-multi="true">US<br/>UK<br/>Canada</td>
      </tr>
      <tr>
        <td class="table_info_title">Year:</td>
        <td class="table_info_ans student_local_name" name="Year">2020</td>
      </tr>
      <tr>
        <td class="table_info_title">Month:</td>
        <td class="table_info_ans student_eng_firstname" name="Month">AUgust</td>
      </tr>
      <tr>
         <td class="table_info_title">Level of educaiton    :</td>
         <td class="table_info_ans student_eng_lastname" name="Level of educaiton" data-multi="true">Certificate<br/>Diploma<br/>masters</td>
      </tr>

  </tbody>
</table>

Then use,

<script>
var tables = $(".info_table");
    var finalObj = {};
    for(var i=0;i<tables.length;i++){
        var tempObj = {};
        $(tables[i]).find("tr").each(function(){
           var key = $(this).find(".table_info_ans").attr("name");
            if($(this).find(".table_info_ans").attr("data-multi")=="true"){
                tempObj[key] = $(this).find(".table_info_ans").html().split("<br>");
            }else{
                 tempObj[key] = $(this).find(".table_info_ans").html();
            }

        });
        var objId = $(tables[i]).attr("data-id");
        finalObj[objId] = tempObj;
    }
</script>

the variable finalObj will have the data in the format you wanted.

Can I convert these data into json and send it with form POST instead of ajax

1 Answers1