HO使用ajax jquery保存表数据

Question

I am adding multiple rows to table.now all rows will save in database by using ajax call in jquery.

HTML:

<table id="example" class="display" width="100%" cellspacing="0">
<thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Message</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>
<form id="localStorageTest" method="post" action="">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" />

<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" />

<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea>

<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;" id="savebutton"><i class="icon-check-sign" aria-hidden="false"></i> Save </button>
 </form>

Jquery code:

$("button#savebutton").click(function(){
                            var name=$("#name").val();
                            var email=$("#email").val();
                            var message=$("#message").val();    
                       var new_row = "<tr><td>" + name + "</td><td>" + email + "</td><td>" + message + "</td></tr>";
                                $("table tbody").append(new_row);
                                return false;
                               $.ajax({
                                type : 'POST',
                                data : formData,
                                cache : false,
                                processData : false,
                                contentType : false,
                                beforeSend: beforeSendHandler,
                                url : url,
                                  success:function(result)                                      
                                    if (result.success==true) {
                                         $('.alert-success').show();
                                         $('.alert-danger').hide();
                                        $("#successmsg").html(result.msg);
                                        setTimeout(function() {
                                            $(".alert-success").alert('close');
                                        }, 10000);                                          


                                    } else{
                                         $('.alert-danger').show();
                                         $('.alert-success').hide();
                                        $("#error").html(result.msg);                                           
                                        setTimeout(function() {
                                            $(".alert-danger").alert('close');
                                        }, 10000);

                                    }
                                }                                   
                            });
  });

How to save all rows. I trying ajax call , but i don't know pass data in url.

Is it correct way or not?

Answer 1

I'm saving the data from the table as an array of objects looping each tr .

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
      <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Message</th>
      </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<form id="localStorageTest" method="post" action="">
  <label>Name:</label>
  <input type="text" name="name" id="name" class="stored" value="" />

  <label>Email:</label>
  <input type="email" name="email" id="email" class="stored" value="" />

  <label>Message:</label>
  <textarea name="message" id="message" class="stored"></textarea>

  <button type="button" class="btn btn-success savebtn" id="savebutton">Save</button>
  <button type="button" class="btn btn-success savebtn" id="submitbutton">Submit</button>
</form>

And the modified script after splitting looks like

$("button#savebutton").click(function() {
  var name = $("#name").val();
  var email = $("#email").val();
  var message = $("#message").val();
  //---->Form validation goes here
  var new_row = '<tr><td class="name">' + name + '</td><td class="email">' + email + '</td><td class="message">' + message + '</td></tr>';
  $("table tbody").append(new_row);
});


$("button#submitbutton").click(function() {
  var data = [];
  var name, email, message;
  $("table tbody tr").each(function(index) {
    name = $(this).find('.name').text();
    email = $(this).find('.email').text();
    message = $(this).find('.message').text();
    //---->Form validation goes here
    data.push({
      name: name,
      email: email,
      message: message
    });
  });
  submitFormData(data);
});


function submitFormData(formData) {

  $.ajax({
    type: 'POST',
    data: formData,
    cache: false,
    processData: false,
    contentType: false,
    beforeSend: beforeSendHandler,
    url: url,
    success: function(result)
    if (result.success == true) {
      $('.alert-success').show();
      $('.alert-danger').hide();
      $("#successmsg").html(result.msg);
      setTimeout(function() {
        $(".alert-success").alert('close');
      }, 10000);


    } else {
      $('.alert-danger').show();
      $('.alert-success').hide();
      $("#error").html(result.msg);
      setTimeout(function() {
        $(".alert-danger").alert('close');
      }, 10000);

    }
  });
}