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

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"); 
      } 
     }); 
    } 

在上面的代码点以下观点的网址：

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> 

我希望能够在输入是只读的时候以及当我点击一个按钮并激活时提交表单e所有投入。任何人都可以找到上述代码有任何问题吗？

Answer 1

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

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