Question

我想通过jQuery提交表单，也希望通过jQuery在同一表单上上传图片，但真的不明白是什么问题。当我点击提交按钮时，我的页面重新加载并使用jQuery处理表单。

我正在使用CodeIgniter Framework 3.0.1版。

JS代码

<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>

我已从上面的HTML部分删除了JS代码。

注意：我已将jquery/1.11.3/jquery.min.js附加到我的HTML页面的<head>。

Answer 1

将提交网址保留在表单中。并在java脚本中使用下面的代码。

$(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);
        }
    });
}));
});

Answer 2

在发出return false;请求之前，.on('submit'事件处理程序中有一条$.ajax声明。

删除return语句，表单将提交。

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

编辑：

刚刚注意到，您还需要正确提交表单。

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

目前，你有

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

您也可以使用$("#process-data").submit(function(e) {

Answer 3

用输入替换按钮

project.createCircleButton

替换为

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

表单不是由jQuery提交的

3 个答案: