Question

I have a form with allows the user to edit data in the database using Ajax and ASP. Not sure why the ajax call is not updating the database as requested.

AJAX/jQuery code:

$('#editbtn').click(function(){
        var thisid = $('#edsid').val();
        var enm = $('#edtName').val();
        var eml = $('#edtEmail').val();
        var egp = $('#editSubForm input[name=edgrp]').val();
        var dataString = 'act=upd&sid=' + thisid + '&edName='+ enm + '&edEmail='+ eml + '&edgrp='+ egp;
        $.ajax({
        type: 'GET',
        url: '/subscr_query.asp',
        data:  dataString,
        success: function(){
                //alert(dataString);
                $('#successmsg').append("Edited!");
                $('#successmsg').fadeIn(1200, function(){$(this).fadeOut(2000);});
                },
        error: function(){
                $('#delpop').fadeIn(300);
                }
            });
    });

The form contains a submit button with the id “editbtn”. Form seems to process with out the database getting update with the current information.

I’ve tested the queryString on the subscr_query.asp page by entering the data that gets outputted from the form to the page directly, and db updated as expected.

Any ideas?

Answer 1

I’m suspecting you’re not preventing the default action; hence, it’s submitting the form before performing the ajax request. Use preventDefault

$('#editbtn').click(function(e){
        var thisid = $('#edsid').val();
        var enm = $('#edtName').val();
        var eml = $('#edtEmail').val();
        var egp = $('#editSubForm input[name=edgrp]').val();
        var dataString = 'act=upd&sid=' + thisid + '&edName='+ enm + '&edEmail='+ eml + '&edgrp='+ egp;
        $.ajax({
        type: 'GET',
        url: '/subscr_query.asp',
        data:  dataString,
        success: function(){
                //alert(dataString);
                $('#successmsg').append("Edited!");
                $('#successmsg').fadeIn(1200, function(){$(this).fadeOut(2000);});
                },
        error: function(){
                $('#delpop').fadeIn(300);
                }
            });
      e.preventDefault(); // prevent default action
    });