Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to save a point to the database using a balloon that has an input field and a save button. The button triggers the code and sends the feature info to the PHP page. It works, but the save action refreshes the page. I would like it to save in the background without refreshing the page, like Ajax.

Can someone advise how to do this ?

   var mySaveStrategy = new OpenLayers.Strategy.Save({ auto: true });      
   var myProtocolHTTP = new OpenLayers.Protocol.HTTP({ 
            url: "proc/newPoint.php", 
            params: { 
                    m: 'r', 
                    srs: 'EPSG:4326' 
            callback: function() { alert("User callback called!"); }, 
            format: new OpenLayers.Format.GeoJSON({ 
                    ignoreExtraDims: true, 
                    internalProjection: map.baseLayer.projection

I edited the code to reflect my latest code (16.12.2012):

        function handler(request) {

        var myProtocolHTTP = OpenLayers.Request.POST({
            url: "api.php?action=insertPOI",
            data: "",
            params: {
                m: 'r',
                srs: 'EPSG:4326'
            headers: {
                "Content-Type": "text/plain"
            callback: handler

    function formAction(action) {
        var feature = mytoolbar.selCtrl.openpopup.feature;
        switch (action) {
            case 'delete':
                feature.state = OpenLayers.State.DELETE;
            case 'cancel':
            case 'save':
                var attrs = feature.attributes;
       = $('fname').value;
                attrs.name_lat = $('fname_alt').value;
                attrs.type = $('ftype').value;
                attrs.notes = $('fnotes').value;

                if (feature.mystate) {
                    feature.mystate = null;
                    feature.state = OpenLayers.State.INSERT;
                    var ctrl = mytoolbar.controls[1];
          "featureadded", {'feature': feature});
                } else {
                    feature.state = OpenLayers.State.UPDATE;


    function getPopupForm(feature, context) {

        var gid      = feature.attributes.gid      || '';
        var name     =     || '';
        var name_alt = feature.attributes.name_alt || '';
        var notes    = feature.attributes.notes    || '';
        var html = "<div>" +
            "<form action='' name='baloon'>" +
               "<input id='fgid' type='hidden' value='" +
                  gid + "' />" +
               "<button type='submit'  id='baloon-save' value='Save' onClick=\"formAction('save')\" />"+
               "</td><td align='right'>" +
               "<div class='select-line'>"+
               "<button type='submit' id='baloon-cancel' value='Cancel' onClick=\"formAction('cancel')\" />&nbsp;" +
               "</div><div class='select-line'>"+
               "<button type='submit' id='baloon-delete' value='Delete' onClick=\"formAction('delete')\" /></div>"+
               "</td></tr></table></form>" +

        return html;


share|improve this question
Have you tried my suggestion? – CaptDragon Mar 16 '12 at 15:35
My one LINE solution is what worked for me. Have you tried it? – CaptDragon Apr 16 '12 at 13:05

Try updating your callback function to actually handle the the response: some examples are given here:

share|improve this answer
I tried your suggestion, still having the same problem. i edited my question to reflect more of the code, maybe im missing something.thanks – buzibuzi Dec 16 '11 at 17:11

A couple of things you could try:

Try returning false on your formAction

function formAction(action) {
 return false;

or you could try returning false here:

<button type='submit'  id='baloon-save' value='Save' onClick=\"formAction('save'); return false;\" />"+


share|improve this answer
Did you try return false at the end of formAction? – CaptDragon Mar 16 '12 at 15:34

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.