Question

我在jQuery + Django中创建了一个表单，其中只有一个输入处于活动状态，其他表示只读。有一个按钮，当点击时激活所有输入框，然后整个表格可编辑。但是，在单击按钮之前，只有一个输入，我希望能够在该状态下提交表单。但我也希望提交所有其他值，因为它们只是应该是一个问题。

这是我的JS：

$('#addInventoryForm').on('submit', function(event) {
        event.preventDefault();
        $('#name').focus();
        add_to_inventory();
    });

    function add_to_inventory() {
        console.log("add to inventory is working!")

        $.ajax({
            url : "/new/item/add/",
            type : "POST",
            data : { upc : $('#upc').val(), name : $('#name').val(), qty : $('#qty').val(), add_qty : $('#add_qty').val(), reorder_qty : $('#reorder_qty').val(), dp : $('#dp').val(), mrp : $('#mrp').val(), supplier : $('#supplier').val() },

            success : function(data) {
                console.log(data);
                $('#extra').html(data);
                console.log("success");
            }
        });
    }

上面代码中的url指向以下视图：

def NewItemAdd(request):
    if request.method == "POST":
        upc = request.POST['upc']
        name = request.POST['name']
        if 'qty' in request.POST:
            qty = request.POST['qty']
        add_qty = request.POST['add_qty']
        reorder_qty = request.POST['reorder_qty']
        dp = request.POST['dp']
        mrp = request.POST['mrp']
        if 'supplier' in request.POST:
            supplier = Supplier.objects.get(name=request.POST['supplier'])

        if 'qty' not in request.POST:
            qty = 0
        if 'supplier' in request.POST:
            defaults = {'name': name, 'qty': int(qty) + int(add_qty), 'reorder_qty': reorder_qty, 'dp': dp, 'mrp': mrp, 'supplier': supplier, 'user': request.user}
        else:
            defaults = {'name': name, 'qty': int(qty) + int(add_qty), 'reorder_qty': reorder_qty, 'dp': dp, 'mrp': mrp, 'user': request.user}
        inv, created = Item.objects.update_or_create(upc=upc, defaults=defaults)
    supplier_list = Supplier.objects.all()
    return render(request, "alpha/new-item-add.html", {'suppliers': supplier_list})

此视图使用的模板如下：

<div class="container">
    <div class="form-group">
        <label class="control-label col-xs-1" for="name">Name:</label>
        <div class="col-xs-9">
            <input type="text" class="form-control" id="name" name="name" placeholder="" tabindex="2"/>
        </div>

    </div>

    <div class="form-group">
        <label class="control-label col-xs-1" for="qty">Current Quantity:</label>
        <div class="col-xs-2">
            <input type="number" class="form-control" id="qty" name="qty" placeholder="" readonly/>
        </div>

        <label class="control-label col-xs-1" for="add_qty">Add Quantity:</label>
        <div class="col-xs-2">
            <input type="number" class="form-control" id="add_qty" name="add_qty" placeholder="" tabindex="3"/>
        </div>

        <label class="control-label col-xs-offset-1 col-xs-1" for="reorder_qty">Reorder Quantity:</label>
        <div class="col-xs-2">
            <input type="number" class="form-control" id="reorder_qty" name="reorder_qty" placeholder="" tabindex="4"/>
        </div>

    </div>

    <div class="form-group">
        <label class="control-label col-xs-1" for="dp">DP:</label>
        <div class="col-xs-2">
            <input type="text" class="form-control" id="dp" name="dp" placeholder="" tabindex="5"/>
        </div>

        <label class="control-label col-xs-1" for="mrp">MRP:</label>
        <div class="col-xs-2">
            <input type="text" class="form-control" id="mrp" name="mrp" placeholder="" tabindex="6"/>
        </div>

        <label class="control-label col-xs-offset-1 col-xs-1" for="reorder_qty">Supplier:</label>
        <div class="col-xs-2">
            <select name="supplier" id="supplier" class="btn btn-default form-control" tabindex="7">
                {% for supplier in suppliers %}
                    <option value="{{ supplier }}" {% if supplier.name == item.supplier.name %}selected{% endif %}>{{ supplier.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-offset-1 col-xs-9">
            <input type="submit" value="Submit" class="form-control btn btn-primary" tabindex="8"/>
        </div>

    </div>
</div>

我希望能够在输入只读时以及单击按钮并激活所有输入时提交表单。任何人都可以发现上述代码有什么问题吗？

Answer 1

编辑按钮从表单的所有输入中删除readonly属性。因此，在提交表单之前，我会触发单击编辑按钮。它几乎是瞬间的，问题就解决了。

$("#edit").trigger("click");

如何使用jQuery提交部分只读输入的表单？

1 个答案: