Form is not submiting by jQuery

Question

I want to submit form via jQuery and also want to upload image via jQuery on same form but really don't understand what is the issue. When I click on submit button my page reload and form processed with jQuery.

I am using CodeIgniter Framework version 3.0.1.

JS Code

<script>

    var loading_message = "<div class='row'><div class='col-md-4 col-md-offset-4'><img src='<?=site_url()?>assets/_admin/images/loading.gif'/></div></div>";

    function add()
    {
        $('#right_block').html(loading_message);
        var form_data = {
            ajax        : '1',
            actioncall  : 'add_form',
        };
        $.ajax({
            url     : "<?=site_url()?>itadmin/ajaxBanners",
            type    : 'POST',
            data    : form_data,
            success : function(data){
                $('#right_block').html(data);
            }
        });
    }

    $(document).ready(function()
    {
        add();

        $('#addbanner').on('click',function(){
            add();
        });

        $("#process-data").on('submit',(function(e) {

                e.preventDefault();
                alert('Hello');
                    var form_data = {
                        ajax                : '1',
                        link_togo           : $('#link_togo').val(),
                        title               : $('#title').val(),
                        description         : $('#description').val(),
                        keyword             : $('#keyword').val(),
                        placement           : $('#placement').val(),
                        location            : $('#location').val(),
                        status              : $('#default').val(),
                        actioncall          : 'add'
                    };
                    alert(form_data);

                    $.ajax({
                        url     : "<?=site_url()?>itadmin/ajaxBanner",
                        type    : 'POST',
                        data    : form_data,
                        success : function(data)
                        {
                            $('#right_block').html('<div class="alert alert-primary"><h4>Banner added successfully!</h4></div>');
                        }
                    });
            }));

    });
</script>

HTML CODE

<div class="banner-right-inner2">

    <h4 class="text-center"><u>Add Banner</u></h4>
    <form method="post" action="" id="process-data">

        <div class="a-center">

            <img class="img_pre" src="<?=site_url()?>assets/_admin/images/banner.png"  />
            <img class="delete_btn" src="<?php echo base_url();?>assets/_admin/images/delete_icon.png" style="display:none" />

            <input type="file" name="imagefile" id="imagefile" required />
        </div>

        <label>Link</label>
        <input id="link_togo" name="link_togo" type="text" />

        <label>Heading</label>
        <input id="title" name="title" type="text" />

        <label>Description</label>
        <input id="description" name="description" type="text" />

        <label>Keywords</label>
        <input id="keyword" name="keyword" type="text" />

        <div class="row clearfix">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <label>Placement</label>
                <select id="placement" required>
                    <option></option>
                    <option value="top">Top</option>
                    <option value="bottom">Bottom</option>
                    <option value="others">Others</option>
                </select>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <label>Location</label>
                <select id="location" required>
                    <option></option>
                    <option value="Homepage">Homepage</option>
                    <option value="static_page">Static Page</option>
                    <option value="contact_page">Contact Page</option>
                </select>
            </div>
        </div>


        <div class="swicth-box">
            <div class="demo" id="default">
                <input type="checkbox" value="1" checked>
            </div>
            <h2>Status</h2>
        </div>
        <div class="clr"></div>

        <button id="submit" name="submit" type="submit" class="save-b">Save</button>

    </form>

</div>

I have remove JS code from above HTML section.

NOTE: I have attached jquery/1.11.3/jquery.min.js in <head> of my HTML page.

You are getting exception somewhere in your script that's why browser will reload the page. You can pause script on exception from browser console. — Indrasinh Bihola, Sep 23 '15 at 10:15
add `var loading_message = "
"; ` inside add function and check — Saty, Sep 23 '15 at 10:18
@IndrasinhBihola I have tried to PAUSE it but page reload does not blocked by PAUSE — Muhammad Hassaan, Sep 23 '15 at 10:28
Try this: http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors — Indrasinh Bihola, Sep 23 '15 at 10:29
Try this: http://stackoverflow.com/questions/3754604/how-to-get-firebug-to-break-on-exception — Indrasinh Bihola, Sep 23 '15 at 10:41
Do you have `redirect()` in your php method what is handling `ajaxBanner` call? — Iamzozo, Sep 23 '15 at 11:23

score 1 · Answer 1 · answered Sep 23 '15 at 14:16

Keep the submit URL in form itself. And in java script use below code.

$(document).ready(function(){
 $('#process-data').on('submit',(function(e) {
    e.preventDefault();
    var edit_img=$("#imagefile").val();
    var profile=document.getElementById('imagefile');
    var profile_img=profile.value;
    var img = profile_img.substring(profile_img.lastIndexOf('.')+1).toLowerCase();
    if(edit_img!='') {
        if(img == "jpg" || img == "jpeg" || img == "png" || img == "gif")
        {

        }
        else
        {
            alert('Only jpg,jpeg,png,gif  files are allowed');
            return false;
        }
    }

    var formData = new FormData(this);
    $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: formData,
        cache:false,
        contentType: false,
        processData: false,
        success: function(resp)
        {
            //alert(resp);
            //$("#preview_profileimage").html(resp);
        }
    });
}));
});

AdityaParab · Answer 2 · 2015-09-23T10:14:57.613

0

There is a return false; statement inside your .on('submit' event handler before you make your $.ajax request.

Remove the return statement and the form will submit.

alert(form_data);
//return false;   <------------ Commented

EDIT:

Just noticed, you also need to submit the form correctly.

$(document).on('submit','form#process-data',function(e){
   // Your code
});

Currently, you have

$("#process-data").on('submit',(function(e) {

You can also use, $("#process-data").submit(function(e) {

edited Sep 23 '15 at 10:14

answered Sep 23 '15 at 10:10

AdityaParab

7,024
3
27
40

But there is also `alert` but alert is not happening. – Muhammad Hassaan Sep 23 '15 at 10:12
I have removed `return false` but still same issue is there. – Muhammad Hassaan Sep 23 '15 at 10:13
Issue is still there :( My page is reloading. – Muhammad Hassaan Sep 23 '15 at 10:23
`$(document).on('submit','form#process-data',function(e){` works for me. Can you please help me out in uploading image on same form? – Muhammad Hassaan Sep 23 '15 at 11:09

score 0 · Answer 3 · answered Sep 23 '15 at 10:41

0

replace button with input

<button id="submit" name="submit" type="submit" class="save-b">Save</button>

replace with

<input id="submit" name="submit" type="submit" class="save-b" value="Save" />

answered Sep 23 '15 at 10:41

Chintan Mathukiya

395
5
26

Form is not submiting by jQuery

3 Answers3