Как отправить форму с частично прочитанными входами с помощью 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"); 
      } 
     }); 
    } 

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