this is my form:
<form id="inventoryForm" action="/ManderalMatrix/AddManderalInventory" class="reactiveToButton">
<div class="row" style="margin-top: 18px">
<div class="col-md-3">
<div class="form-group">
<label>
Size of punch (mm)
<span style="color:red">*</span>
</label>
<input name="PunchSize" id="PunchSize" type="text" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Shape
<span style="color:red">*</span>
</label>
<select name="ProductConfigId" id="ProductConfigId" class="form-control objectInput">
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Radius of punch (mm)
<span style="color:red">*</span>
</label>
<input name="PunchRadius" id="PunchRadius" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Code
<span style="color:red">*</span>
</label>
<input name="ManderalMatrixCode" id="ManderalMatrixCode" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Quantity of upper punch
<span style="color:red">*</span>
</label>
<input name="UpperPunchQuantity" id="UpperPunchQuantity" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Quantity of die
<span style="color:red">*</span>
</label>
<input name="DieQuantity" id="DieQuantity" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Quantity of lower punch
<span style="color:red">*</span>
</label>
<input name="LowerPunchQuantity" id="LowerPunchQuantity" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Supplier
<span style="color:red">*</span>
</label>
<input name="Supplier" id="Supplier" type="text" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Manufacturer code
<span style="color:red">*</span>
</label>
<input name="ManufacturerCode" id="ManufacturerCode" type="text" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Type of die
<span style="color:red">*</span>
</label>
<select name="DieType" id="DieType" class="form-control objectInput">
<option value="1">B</option>
<option value="2">D</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Location</label>
<select name="PlanConfigId" id="PlanConfigId" class="form-control objectInput">
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Machine name</label>
<select name="MachineId" id="MachineId" class="form-control objectInput">
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Large diameter
<span style="color:red">*</span>
</label>
<input name="LargeDiameter" id="LargeDiameter" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Small diameter
<span style="color:red">*</span>
</label>
<input name="SmallDiameter" id="SmallDiameter" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
</div>
</form>
I set the class ‘objectInput’ for all inputs and selects to controlling them.
I used ajax to get an object from the server and get data.
I want to check if the name of the properties of ‘data’ that returned is equal to the id of the inputs, put the value of data’s property on the input’s value
I tried this but I dont know the rest:
function UpdateInventory(id) {
$.get("/ManderalMatrix/GetTheInventory?id=" + id, function (data) {
$('.objectInput').each(function () {
})
})
}
3
Answers
To get the result I think you can try this, you need to loop through the form elements with the class objectInput, also can check if their id matches any property names in the data object,if yes, set the value of the input to the corresponding value from data.
According to your shared code snippet, I have tried to simulate the scenario.
It can be achieved by iterating over each of the
input/select
element with the classobjectInput
and checking if the id of the element matches a property name in the data object.Next, If they match, you can set the value of the input/select element to the corresponding value from the data object.
Let say, you have following response from controller:
So, you could accomplish your
UpdateInventory
by looping over the response object as following:Output:
Note: You should also be aware of the response model object naming convension and your
Id property
naming convension. Because if they doesn’t matched the value in the form might not populate accordingly. I telling this, becuase When I was testing I noticed, you have keep the property name as pascal case likePunchSize
but I json response usually in camelCase.likepunchSize
. So double check the response property name along with the form property name.I would not be forcing
id
andclass
for this. Use a data attribute instead. Leaveclass
for styling and leave id independent from the data structure.Change your html to something similar to:
Then you can use the following javascript/jquery