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

开始这样的形式：

                    <ListBox Name="lbAllInstances" Width="500" Height="400"
                        SelectionMode="Multiple"
                        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                        ScrollViewer.VerticalScrollBarVisibility="Visible"
                        SelectionChanged="lbAllInstances_SelectionChanged">

                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="6" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <CheckBox Grid.Column="0" VerticalAlignment="Center" />
                                    <TextBlock Grid.Column="2" Text="{Binding Name}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" />
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>

                    </ListBox>

对于ajax提交

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

Answer 3

您在表单提交和ajax调用上没有处理函数在$("[name=submit]").click()之后发生。

您在ajax成功后提交表单：

success:function(err){
        if(err == 0)
            {
               ...
               $('form#zoneAdd').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!');
                    }

                }
         });


    });
});

表单没有在jQuery中提交ajax成功

3 个答案: