表單未在jQuery ajax中成功提交

Question

我正在做一個簡單的單文本輸入形式。我想從數據庫中交叉檢查是否存在。所以我的html是

<form action="zoneAdd" method="post"  id="zoneAdd" name="zoneAdd">
            <div class="box-body">
                <div class="form-group">
                    <label>Zone Name<span id="required">*</span></label>
                    <input type="text" class="form-control" name="zone_name" id="zone_name" placeholder="Enter Zone Name" />
                    <span id="zone_name_error"></span>
                </div>
            </div><!-- /.box-body -->
            <div class="box-footer">
                <input type="submit" class="btn btn-primary btn-flat btn-sm" name="submit" value="Submit"/>
            </div>
        </form>

而我的javasript是

 $('document').ready(function(){
    $("[name=submit]").click(function(e){
         e.preventDefault();
        if ($('#zone_name').val().length <= 0) {
            $('#zone_name').addClass("errMsg");
            $('#zone_name_error').addClass("errMsgDngr");
            $('#zone_name_error').html('Please enter Zone name!');
            //isStepValid = false;
        }
        else if(!$('#zone_name').val().match(/^[a-zA-Z\s-, ]+$/)){
            $('#zone_name').addClass("errMsg");
            $('#zone_name_error').addClass("errMsgDngr");
            $('#zone_name_error').html('Please use only alphabats!');
            //isStepValid = false;
        }else{
            var data = {'zone':$('#zone_name').val()}
            $.ajax({
                type:"post",
                data:data,
                url:"<?php echo site_url('zone/checkZoneName');?>",
                success:function(err){
                    if(err == 0)
                    {
                        console.log('hello');
                        $('#zone_name_error').html('');
                        $('#zone_name_error').removeClass("errMsg");
                        $('#zone_name_error').removeClass("errMsgDngr");
                        //document.forms["zoneAdd"].submit();
                        $('form#zoneAdd').submit();
                        //console.log($('form#zoneAdd').submit());
                    }
                    else
                    {
                        $('#zone_name').addClass("errMsg");
                        $('#zone_name_error').addClass("errMsgDngr");
                        $('#zone_name_error').html('Zone Name already existed!');
                    }
                }
            });
        }

    });
});

每件事都是對的。 我的問題是我的表格沒有以ajax成功提交

Answer 1

我認為形式動作有問題。 在表單操作中指定確切路徑，以便

<form action="<?php echo site_url('filenameWhereyouSubmit')?>"        method="post"  id="zoneAdd" name="zoneAdd">

Answer 2

開始形式如下：

  <form id="FORM-ID" method="post" action="">

對於ajax提交

$(document).ready(function(){ 
     $('#FORM-ID').submit(function(e) {

        var myarray=  array of all form values
        var data = JSON.stringify(myarray);

        e.preventDefault();

        $.ajax({
        type: "POST",
        data: {value:data},
        url: "URL TO SUBMIT",
        success: function() {
             //Sucess function 
        }

    });
 }); 

Answer 3

1. 您沒有在表單提交上使用處理程序的功能，ajax調用發生在$("[name=submit]").click() 。

2. ajax成功后，您將提交表單：

    success:function(err){ if(err == 0) { ... $('form#zoneAdd').submit(); ... } } 

3. 但是submit不是ajax調用，因此請嘗試處理onsubmit表單。

像這樣的東西：

$('document').ready(function(){
    $('form#zoneAdd').submit(function(e){
         e.preventDefault();

         // You checks code ...

         var data = {
               'zone': $('#zone_name').val()
             };

         $.ajax({

                type:"post",
                data:data,
                url:"<?php echo site_url('zone/checkZoneName');?>",
                success: function (err){

                    if(err == 0)
                    {
                        console.log('hello');
                        $('#zone_name_error').html('');
                        $('#zone_name_error').removeClass("errMsg");
                        $('#zone_name_error').removeClass("errMsgDngr");
                    }
                    else
                    {
                        $('#zone_name').addClass("errMsg");
                        $('#zone_name_error').addClass("errMsgDngr");
                        $('#zone_name_error').html('Zone Name already existed!');
                    }

                }
         });


    });
});