序列化表单不起作用,它不使用jQuery发送任何数据

时间:2017-10-03 08:33:20

标签: jquery html ajax twitter-bootstrap forms

我有一个自举模式。在那个模态里面,我有一个表格。我想提交该表单,我提交的ajax代码在模态之外。

问题是当我点击提交时,我无法看到使用序列化时传递的任何数据。

我将脚本移到模态中但是再次没有用。

这是我的HTML表单

<form id="update-selected-category">

                <div class="row">**strong text**
                  <div class="col-md-4">
                      <div class="form-group">
                        <label for="set">Set</label>
                        <input type="text" class="form-control" id="set-input" name="set" value="<?php echo $row['down1_name']; ?>">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="description">Description</label>
                        <input type="text" class="form-control" id="description-input" name="description"  value="<?php echo $row['description']; ?>">
                      </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="stocklevel">Stock Level</label>
                        <input type="text" class="form-control" id="stocklevel-input" name="stock-level"  value="<?php echo $row['stock_stk']; ?>">
                      </div>
                    </div>
                  <div class="col-md-4">
                      <div class="form-group">
                        <label for="minlevel">Min Level</label>
                        <input type="text" class="form-control" id="minlevel-input" name="min-level" value="<?php echo $row['minlevel_stk']; ?>">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="maxlevel">Max Level</label>
                        <input type="text" class="form-control" id="maxlevel-input" name="max-level"  value="<?php echo $row['maxlevel_stk']; ?>">
                      </div>
                    </div>
                </div>

                </form>

                </div>
                <div class="modal-footer">
                  <button type="button" id="update-category" class="btn btn-success update-category">Save</button>
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

我的JQuery

            $(".update-category").click(function(){ 

                    //Create ajax request with the two paramaters
                    $.ajax({
                    url: '../data/stock.php?action=stock-category-update',
                    type: 'POST',
                    dataType:'text',
                    data: $( "#update-selected-category" ).serialize(), 
                    success: function(data, textStatus, jqXHR) {        
                            if(jqXHR.responseText == '{"success":"true"}'){

                                //Hide the modal
                                $('.category-update-modal').modal('hide');


                            }else{

                                //Display the bootstrap warning message
                                alert("something went wrong while saving the data");

                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                            //Display error message to user
                            alert("An error occured when saving the data");
                        }
                    }); // End ajax request

            }); // End on click event   

我不确定我做错了什么。表单输入字段也具有“名称”属性。

修改 alert message

2 个答案:

答案 0 :(得分:0)

你能在这里调试实际的错误信息吗?那么很容易得到实际的问题

error: function (err) {
    console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
}

答案 1 :(得分:0)

签出jquery是否已加载。如果控制台中的任何错误告诉我们。 检查警报中的数据。无论你是否得到。

var a = $("form").serialize();
alert(a);