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

Posted 2023-05-09

【中文标题】如何使用 jQuery 提交带有部分只读输入的表单？

【英文标题】：How to submit form with partially read only inputs with jQuery?

【发布时间】：2016-02-04 02:38:50

【问题描述】：

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

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

【问题讨论】：

您是否记录了请求发送到服务器的内容？查找隐藏输入的值应该没有任何问题。我将从前端开始，并确保在后端故障排除之前正确发送请求。 Chrome Network Debugging... 也请张贴您的 HTML

输入没有隐藏。他们激活了只读属性。

【参考方案1】：

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

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