CODEWITHSUNDEEP
javascriptphpjquerymysql
learningbyexample
learningbyexample

Reputation: 1547

How do I save into MySQL DB an array of elements that were added with jquery?

I want to add this into my database but I don't know how to send it.

db_table
id              int(11)
employee        varchar(40)
date_complete   date
time            time
status          boolean
job             varchar(50)

I have all the data but I don't know how to turn it into an array so that I can send it to php and save it in my mysql database.

or if there is a better way to structure this code to make it easier or better practice. 

$(document).ready(function() {
  $('<div/>', {
    'class': 'extraPerson',
    html: GetHtml()
  }).appendTo('#container');
  $('#addRow').click(function() {
    $('<div/>', {
      'class': 'extraPerson',
      html: GetHtml()
    }).hide().appendTo('#container').slideDown(200);

  });
})

function GetHtml() {
  var len = $('.extraPerson').length;
  var $html = $('.extraPersonTemplate').clone();
  $html.find('[name=date]')[0].name = "date" + len;
  $html.find('[name=employee]')[0].name = "employee" + len;
  $html.find('[name=time]')[0].name = "time" + len;
  $html.find('[name=status]')[0].name = "status" + len;
  $html.find('[name=job]')[0].name = "job" + len;
  return $html.html();
}
.extraPersonTemplate {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="form1" id="form1">
  <div class="extraPersonTemplate">
    <div class="controls controls-row">
      <select class="span2" name="employee">
        <option value="Joe">Joe</option>
        <option value="Anna">Anna</option>
        <option value="Liz">Liz</option>
        <option value="Daniel">Daniel</option>
      </select>
      <input class="span3" placeholder="date" type="date" name="date">
      <select class="span2" name="time">
        <option value="9:00:00">9 a.m.</option>
        <option value="10:00:00">10 a.m.</option>
        <option value="11:00:00">11 a.m.</option>
        <option value="12:00:00">12 p.m.</option>
        <option value="13:00:00">1 p.m.</option>
      </select>
      <select class="span2" name="status">
        <option value="finished">Finished</option>
        <option value="inprogress">In Progress</option>

      </select>
      <select class="span2" name="job">
        <option value="design">Design</option>
        <option value="html">HTML</option>
        <option value="php">PHP</option>
      </select>
    </div>
  </div>
</form>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another Job</p></a>

Upvotes: 0

Views: 49

Answers (3)

Ozzfest
Ozzfest

Reputation: 60

Pass an array of elements created with jQuery 

var elementValue1 = $("#id").val(); // depends on type of element (text, select, checkbox, ...)
var elementValue2 = $("employee").val();

var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : elementValue1, employee: elementValue2 }, // etc.
  dataType: "html"
});

request.done(function( msg ) {
  alert("data sent to script");
});

request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

Look at http://api.jquery.com/jquery.ajax/ too

Upvotes: 1

Caleb Jay
Caleb Jay

Reputation: 2199

Where is your database located? Is it at a server with a URL? Can you configure an API with endpoints for that URL? Without knowing much about your database, we can't speak to how, in your specific case, you will actually save that data.

As for your options, should you figure out what your database situation is, here's what I think:

  1. Here's an intro to HTML forms and here's a deeper break-down. HTML forms can automatically send POST requests with the data in the form sent as form-data on a submit event. It appears your data is structured in an HTML form, this could be an option.

  2. You seem to have an understanding of how to access DOM data with jquery. You could gather up the data into an object of key-value pairs and then send it to your server with the jquery.ajax() method.

For a good breakdown of setting up a RESTful backend, I like to recommend Heroku's RESTful MEAN guide.

Upvotes: 1

Matz
Matz

Reputation: 371

One solution would be to serialize the form fields in your Form with Jquery:

$( "form" ).on( "submit", function( event ) {
  var params = $( this ).serialize();
  $.post(yourserver.php, params, validate, "json")
});

function validate(response) {

  if (response.success) {
    // -- Do something after successful commit
    console.log("Allgood")
  } else {
    // -- Display an error
    console.log(response.message)
  }

}

Good doc on https://api.jquery.com/serialize/

Upvotes: 1

Related Questions