2017-04-03 89 views
0

我有這樣的模式查看動態JSON:製作基礎上,選擇選項

<div class="modal fade" id ="myModal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
        <span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title">Delta Rom insert missed entries</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <form class="form-horizontal"> 
 
        <div class="form-group"> 
 
         <label class="col-sm-2 control-label">Event:</label> 
 
         <div class="col-sm-10"> 
 
          <select id="eventData" name="type" data-placeholder="Select" 
 
            class="form-control chosen-select"> 
 
           <option value="Harvest"> 
 
            Harvest Product Machine 
 
           </option> 
 
           <option value="Tara"> 
 
            Tara Machine 
 
           </option> 
 
          </select> 
 
         </div> 
 
        </div> 
 
        <div id ="producttab" class="form-group"> 
 
         <label class="col-sm-2 control-label">Product:</label> 
 
         <div class="col-sm-10"> 
 
          <select name="harvest" id ="harvestData" data-placeholder="Select" 
 
            class="form-control chosen-select"> 
 
           <?php 
 
           foreach ($this->datamodal['products'] as $value) { 
 
            echo '<option value = "' . $value->name . '">' . $value->name . '</option>'; 
 
           } 
 
           ?> 
 
          </select>  
 
         </div> 
 
        </div> 
 
        <div id ="tabmachines" class="form-group"> 
 
         <label class="col-sm-2 control-label">Machine:</label> 
 
         <div class="col-sm-10"> 
 
          <select name="machine" id ="machineData" data-placeholder="Select" 
 
            class="form-control chosen-select"> 
 
           <?php 
 
           foreach ($this->datamodal['machines'] as $value) { 
 
            echo '<option value = "' . $value->name . '">' . $value->name . '</option>'; 
 
           } 
 
           ?>  
 
          </select> 
 
         </div> 
 
        </div> 
 
        <div id="impuritytab" class="form-group"> 
 
         <label class="col-sm-2 control-label">Impurity:</label> 
 
         <div class="col-sm-10"> 
 
          <input name="impurities" type="text" class="form-control" id="inputimpuritiesData" 
 
            placeholder="Impurities">  
 
         </div> 
 
        </div> 
 
        <div id ="humiditytab" class="form-group"> 
 
         <label class="col-sm-2 control-label">Humidity:</label> 
 
         <div class="col-sm-10"> 
 
          <input name="humidity" type="text" class="form-control" id="humidityAData" 
 
            placeholder="Humidity"> 
 
         </div>  
 
        </div> 
 
       </form> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       <button id="saveModal" type="button" value="submit" class="btn btn-primary">Save changes</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

而且我得到了2種用價值收穫或塔拉事件,根據事件選擇我顯示一些特定的div像這樣:

$('#eventData').change(function() { 
    opt = $(this).val(); 
    if (opt=="Tara") { 
    $("#producttab").hide(); 
    $("#impuritytab").hide(); 
    $("#humiditytab").hide(); 
    }else if (opt == "Harvest") { 
    $("#producttab").show(); 
    $("#impuritytab").show(); 
    $("#humiditytab").show(); 
    } 
}); 

我有一個AJAX將提交該表格:

function onAddMissedEntryInfoClicked(entryId) { 
var currentEntryId = entryId; 
$('#myModal').modal('show'); //this load modal view 
$("#saveModal").unbind("click"); 
$('#saveModal').bind('click', function(){ 
    var event = $('#eventData').val(); 
    var product = $('#harvestData').val(); 
    var machine = $('#machineData').val(); 
    var impurities = $("#inputimpuritiesData").val(); 
    var humidity = $("#humidityData").val(); 
    var dataJson = { 
     "eventid":currentEntryId, 
     "event": event, 
     "product": product, 
     "machine": machine, 
     "impurities": impurities, 
     "humidity":humidity 

    }; 
    $.ajax({ 
     type: 'POST', 
     url: "Monitor/thisUpdate", 
     data: dataJson, 
     success: function (data) { 
      console.log(data); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
    }); 
     $('#myModal').modal('hide'); 

}); 

} 

我的問題是,當我在機器選項,我會看到只有tabmachines id字段(這很好),但是當我提交時,我會發送所有表單值,包括我藏在我的jQuery。我只想發送選擇選項上的表格,在我的情況下只發送機器值。我如何以動態的方式創建我的ajax數據?謝謝!

+0

您可以向當前活動的元素添加/刪除類,只抓取ajax調用的元素。您也可以簡單地抓取未隱藏的元素並將其發送。 – mariocatch

回答

2

您可以在onAddMissedEntryInfoClicked中添加一個if子句,並根據事件數據創建一個不同的json對象。

if (event==="Harvest") { 
    var dataJson = { 
    "eventid":currentEntryId, 
    "event": event, 
    "machine": machine 
    }; 
} 
else if (event==="Tara") { 
    var dataJson = { 
    "eventid":currentEntryId, 
    "event": event, 
    "product": product 
    "impurities": impurities, 
    "humidity":humidity 
    }; 
} 
+0

已解決,謝謝! –