dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Output html in div fails when adding .change AJAX

  1. #1
    Join Date
    Jul 2013
    Posts
    112

    Output html in div fails when adding .change AJAX

    I have added $("#check").change(function () { $('form.ajax').on('submit', } to be able to get the checkbox/hidden value but when doing so, the

    Code:
    success: function(html) {
    $("#div").html(html);}
    doesnt work. The outputs doesnt get into the "#div" but instead to a whole new page. How can I fix the output to come into the "#div"?


    Code:
    $("#check").change(function () {
        var value = $(this).val(); $('form.ajax').on('submit', function() {
    var that = $(this),
    url = that.attr('action'),
    type= that.attr('method'),
    data = {};
    
    that.find('[name]').each(function(index, value) {
    var that = $(this),
    name = that.attr('name'),
    value = that.val();
    
    data[name] = value;
    });
    
    $.ajax({
    url: url,
    type: type,
    data: data,
    success: function(html) {
    $("#div").html(html);
    $(this).remove();
    }
    });
    
    return false;
    });
    
       });
    Last edited by jag1; 08-07-2017 at 09:10 AM.

  2. #2
    Join Date
    Dec 2012
    Posts
    1,398
    The default action when submitting the form is loading a new page. You need to suppress this action by calling event.preventDefault:
    Code:
    $('form.ajax').on('submit', function(event) {
        event.preventDefault();
    BTW: Its easier to create the parameters based on the form by serialize():
    Code:
    data: $("form.ajax").serialize(),

  3. #3
    Join Date
    Jul 2013
    Posts
    112
    Thank you. it works like a charm

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,816
    Two things,

    a) JQuery is not AJAX
    2) JQuery is not JavaScript
    iii) Moved to the JavaScript Frameworks forum where it should go
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Jul 2013
    Posts
    112
    I still get problem with this in another script. The preventDefault() doesnt seem to work. I get the html output to a new page with this code

    Code:
    $('form.ajax').on('submit', function(e) {
    e.preventDefault();
    var that = $(this),
    var formData = new FormData(this),
    
    url = that.attr('action'),
    type= that.attr('method'),
    data = {};
    
    that.find('[name]').each(function(index, value) {
    var that = $(this),
    name = that.attr('name'),
    value = that.val();
    data[name] = value;
    });
    
    $.ajax({
    url: url,
    type: type,
    data: $("form.ajax").serialize(), // or FormData
    success: function(html) {
    $('#div').html(html);
    }
    });
    return false;
    });
    Last edited by jag1; 08-12-2017 at 09:12 AM.

  6. #6
    Join Date
    Dec 2012
    Posts
    1,398
    Formatting the code or using an editor that features highlighting of syntax- and validation errors helps finding the error: There is a syntax error:
    form-ajax.png

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles