beginner Javascript ajax form help

Question

Hello all I'm new to this whole thing still.

I would like some help figuring out how to do this please. I can pull info out of a database and put stuff in using ajax/javascript but I cant figure out how to complete the problem below. I want to be able to make my php form submit and update with out page refresh.

Example.

Page1. Main page -Drop down javascript/Ajax on change of dropdown get info from page 2. Form from page two now displays without page refresh on change of drop down. When submit button from page two is pressed inserts form data into Mysql database. Once new data is submitted into sql data base the form updates and shows data in mysql database for the specific ID in the drop down.

Page2. form drop down info. Form is filled with info if there is data in the database for it. Javascript/Ajax on button submit sends input fields to page 3

Page 3. insert data into mysql using javascript/ajax so no page refresh is required

Thanks

Answer 1

You need to loop through all the input fields in your form, package them into a query string, and send that to your form processing page.

Something like

var queryString = '';
for(var i = 0; i < document.formName.elements.length; ++i) {
  queryString += document.formName.elements[i].name + '=';
  queryString += document.formName.elements[i].value + '&';
}
//trim off the last '&' here

If you're using select boxes, you'll have to identify them in the loop above and extract their value a little differently. The query string format I used here is for a POST query; in a GET query, you need to append this to the url of the form processing page with a '?'

Answer 2

Consider the following example using jQuery (though you could adapt this to raw js or a different js library):

function doSubmit(event) {
  event.preventDefault();
  var $this = $(this);
  $.ajax({
    url: $this.attr('action'),
    type: 'post',
    data: $this.serilaize(),
    success(responseHtml) {
      // assume responseHtml is the next form
      var newForm = ajaxifiyForm($('form', responseHtml));
      $this.unbind('submit').replaceWith(newForm);
    }
  });

  return false;
}

function ajaxifyForm(form) {
  return $(form).submit(doSubmit);
}

$(document).ready(function(){
  ajaxifyForm($('#your-form'));
});

Here we rely on the first page load to have the form already included on the server side. When the DOM is ready we attach an event handler to the submit event of the form. This handler overrides the normal submission process and instead uses ajax. It submits to the URL we specified in the action attribute.

When a post is successful it takes the HTML response from that post and replaces the original form with it after applying the same handler we used on the original form. This relies on the assumption that the php script(s) we are posting to always return the next form with all its values filled out.

Keep in mind you can submit file data in this way. Youd need to use an iframe as an intermediary to do that (there are other ways to do this as well that doesnt use an iframe). you can google ajax file upload for solutions to that problem.