#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171

    Can't get the form to submit properly!


    Hi;

    I have some problems with a form. It keeps submitting the form in a div (#message) rather than going to the new page. It is only supposed to submit it in a div (#message), ONLY when the user selects a photo, not when a user clicks "Submit button".





    Details ans code: Basically this form does 2 things:

    1 - Uploads photos with Ajax & Jquery. This is the script.

    As you can see it simply uses this script and uploads the photo nice and easy:
    javascript Code:
     
    $(document).ready(function () {
     
        var options = {
            beforeSend: function () {
                $("#progress").show();
                //clear everything
                $("#bar").width('0%');
                $("#message").html("");
                $("#percent").html("0%");
            },
            uploadProgress: function (event, position, total, percentComplete) {
                $("#bar").width(percentComplete + '%');
                $("#percent").html(percentComplete + '%');
     
     
            },
            success: function () {
                $("#bar").width('100%');
                $("#percent").html('100%');
     
            },
            complete: function (response) {
                $("#message").html("<font color='green'>" + response.responseText + "</font>");
            },
            error: function () {
                $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
     
            }
     
        };
     
        $("#template_form").ajaxForm(options);
     
    });
    2 - Submits the rest of the information if submit button has been pressed.

    I thought if I change the forms id and name, the Ajax will be ignored - as it is associated with form id "#form_template" - and allows the form to get submitted to next page. SO I change the action, name and id but it still submits to the div!

    The way I set it up is that if the user mouse overs on "Browse file to uplod", form's action changes:
    javascript Code:
     
    $('#logo').mouseover(function () {
        $('#template_form').attr('action', '<?php echo base_url('createbusinesscard/upload_photo');?>');
        $('#template_form_submit').attr('action', '<?php echo base_url('createbusinesscard/upload_photo');?>');
        $('#template_form_submit').attr('id', 'template_form');
    });
    Which works fine and changes the id, name and action to correctly and user can upload photos.

    The other part is the submit button. I want it to submit the whole form to another page:
    javascript Code:
    $('#save_now').mouseover(function () {
        $('#template_form').attr('action', '<?php echo base_url('createbusinesscard/form_submitted');?>');
        $('#template_form_submit').attr('action', '<?php echo base_url('createbusinesscard/form_submitted');?>');
        $('#template_form').attr('id', 'template_form_submit');
    });
    which still works and changes the id and action but Ajax still takes control and submits the form in the div!

    The problem is even when I change the id of the form to template_form_submit, it still submits the form in "#message" div!

    I thought if I change the id of the form, from "template_form" to "template_form_submit" it ignores the Ajax part, but it doesn't and it keeps submitting the form in the #message div.

    What can I do to fix this?

    Thanks
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    Here is the actual author's website; the documentation on there, may be able to help you with validating the file upload process.

    jQuery Form Plugin

    Good Luck
  4. #3
  5. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by web_loone08
    Here is the actual author's website; the documentation on there, may be able to help you with validating the file upload process.

    jQuery Form Plugin

    Good Luck
    Hey

    How are you? Did you read what the problem is? I need it to work on file input id, not "form".

    The Ajax part is working fine and uploads successsfully.

    But I want the form to submit the page and ignore Ajax when I press SAVE.

    So when I press submit button, I want it to "ignore the ajax form submit". But it doesn't.

    But it submits in the "div" for some reason.

    You know?
    Last edited by English Breakfast Tea; January 13th, 2014 at 12:09 AM.
  6. #4
  7. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    I need to change this:
    javascript Code:
    $('#template_form').ajaxForm(options);
    to something like
    javascript Code:
    $('#input_file').ajaxForm(options);

IMN logo majestic logo threadwatch logo seochat tools logo