Grow your CSS skills. Land your dream job.

How to dynamically submit changes in a form or in a content editable table?

  • # March 5, 2013 at 12:22 am

    Hi everyone,

    I am looking for the best solution for dynamically updating changes on a MySQL Database every time someone makes a change to a record.

    Here is some context:

    I am building a large CRM for a client. I would like a record to be modified without the need of a separate edit.php page or submit button. I have tried using the onchange in javascript but it keeps refreshing the page and does not provide a good user experience.

    Thanks for the help!

    # March 5, 2013 at 12:24 am

    Oh and I am organizing the information in both html inputs and tables.

    # March 5, 2013 at 12:25 am

    Ajax is the answer. If you are using jQuery look at this:

    http://api.jquery.com/load/

    http://api.jquery.com/jQuery.ajax/

    // JS
    $(form).on(‘submit’, function(e) {

    e.preventDefault();

    var firstName = $(input).val(),
    lastName = $(input).val();

    $.ajax(
    type: ‘post’,
    url: ‘submit.php’,
    data: { name : firstName, surname : lastName }
    ).done(function(html) {
    $(element).html(html);
    });

    // in submit.php you’ll get this $_POST value, in our case $_POST, $_POST;
    });

    # March 5, 2013 at 12:40 am

    And because its using Ajax it doesn’t refresh the page and does this all in the background right?

    # March 5, 2013 at 12:42 am

    Yeap.

    http://en.wikipedia.org/wiki/Ajax_(programming)

    See this .done() function will return html result of your submit.php file in ‘html’ (in this case) variable. So you can select element and replace it’s content with $(element).html(html).

    And e.preventDefault() will disable default form submit. So your page won’t start loading after you click .

    # March 5, 2013 at 12:52 am

    Hypothetically, if I wanted the piece of code you wrote to upload a change in an input once the user clicks out of it, would I do:

    $(form).on(‘blur’, function(e) {}

    And then send the info to a submit.php which handles the data transmission behind the scene? Then I guess I could just have a little notification popup to confirm the changes.

    # March 5, 2013 at 12:57 am

    Exactly.

    # March 5, 2013 at 12:58 am

    Nice, much easier then I thought! Thanks a whole lot!

    # March 5, 2013 at 1:03 am

    Now this thread is the definition of TEAMWORK!! Nice work!!

    # March 8, 2013 at 11:39 am

    If I didn’t want to use JQuery, what would be the equivalent of the first code in JS ?

    # March 8, 2013 at 12:00 pm

    Oh never mind, I think it will be much simpler using JQuery.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".