CODEWITHSUNDEEP
phpjavascripthtmlajax
John
John

Reputation: 53

Collect form data for ajax submission

I have a database which has over 50 items in it which need to be checked and possibly edited. I have a web page which pulls the data from the database using php and displays it as values in a webform. Then I have a series of submit buttons at the bottom of the page, depending on what the user wants to do. Each button uses an onclick method to call a javascript function.

In the case where some changes need to be made, the user will make edits directly in the webform. For example, in a textarea, the value of the textarea will display the current content of the database item. The user can then edit the content. Clicking a "Save Changes" button calls an ajax function to send the data back to the server using a POST request.

The problem I am having, probably simple to someone who knows how, is how to collect all the updated data from the different form components to send to the server in the variable "FormData" below (presumably an array). Is there a way to do this all at once, or do I have to step through every one of the form elements and add them to the array one by one? "msg" refers to a <div id="msg"></div> where a message from the server page will be displayed.

My ajax function so far is:

function callsave() {
    var xmlHttp, FormData;
    xmlHttp = new XMLHttpRequest;
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("msg").innerHTML = xmlHttp.responseText;
        }
    }
    xmlHttp.open("POST", "savechanges.php", true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(FormData);
}

The submit button at the end of the form is:

<input type="button" value="Save Changes" id="save" onClick="callsave();">

Many thanks for pointing me in the right direction. BTW, this is my first ajax coding.

Upvotes: 1

Views: 1197

Answers (3)

Teddy
Teddy

Reputation: 1417

If you're using jQuery, it can be easy by FormData=$('#formId').serialize(), serialize() will return all form data in query string style, like "name=AAA&action=BBB"

Upvotes: 2

Funk Forty Niner
Funk Forty Niner

Reputation: 74220

"...how to collect all the updated data from the different form components..."

Without knowing what's inside your full form and your handler (savechanges.php),

you could pull each POST value from your form by using this snippet in savechanges.php:

foreach ($_POST as $key=>$value) {
    $post_values=$key.": " . $value . "\n";
}

Upvotes: 0

Arvind Sridharan
Arvind Sridharan

Reputation: 4065

I'm not sure what your html is like but you can assign a unique id to each form button (this can be done in php by assigning the primary key of your the row in the db) and submit button so that you can get the form you need to submit from the id of the submit button.

For example, if your form html is like this :

<form id="data-<?php //put the primary key of the row here ?>">
<!-- rest of your form attributes here -->
<input type="Submit" id="submit" class="submit" onClick="callSave(<?php //same primary key as your form?>)" />
</form>

As for ajax, I would suggest that you use jQuery's $.ajax function as its much easier to code than in native js.

you would do something like in your callsave function

function callSave(formId)
{
   $.ajax({
   type : 'POST',
   url : //your post url,
   data : $("#data" + formId).serialize(),
   success : function(data){
      $("#msg").text(data);
   }
    });
}

Setting up jQuery is a breeze. Follow this link

Upvotes: 0

Related Questions