I am trying to create a calculator and for doing that I have two drop down menus and then based on second drop down I am getting different input fields whose values are already defined. My question is how to loop through each input field so that I can get only that one whichever is selected and show the calculation based only on that particular field. So far I did this.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>CO-Calculator</title>
</head>
<body>
<div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<select id="segmentselector" name="product">
<option value="commodity">MCX</option>
<option value="equity">Equity</option>
</select>
<br><br>
<div id="commodity" class="myclass">
<select id="scripselector" name="segment">
<option value="ALUMINI">ALUMINI</option>
<option value="ALUMINIUM">ALUMINIUM</option>
<option value="COPPER">COPPER</option>
<option value="COPPERM">COPPERM</option>
<option value="CRUDEOIL">CRUDEOIL</option>
<option value="CRUDEOILM">CRUDEOILM</option>
<option value="GOLD">GOLD</option>
<option value="GOLDM">GOLDM</option>
<option value="LEAD">LEAD</option>
<option value="LEADMINI">LEADMINI</option>
<option value="NATURALGAS">NATURALGAS</option>
<option value="NICKEL">NICKEL</option>
<option value="NICKELM">NICKELM</option>
<option value="SILVER">SILVER</option>
<option value="SILVERM">SILVERM</option>
<option value="ZINC">ZINC</option>
<option value="ZINCM">ZINCM</option>
</select>
</div>
<br><br>
<div id="ALUMINI" class="lot">
<label>Lot Size</label>
<input type="text" name="abalumini" value="1000" readonly>
</div>
<div style="display: none;" id="ALUMINIUM" class="lot">
<label>Lot Size</label>
<input type="text" name="abaluminim" value="5000" readonly>
</div>
<div style="display: none;" id="COPPER" class="lot">
<label>Lot Size</label>
<input type="text" name="abcopper" value="1000" readonly>
</div>
<div style="display: none;" id="COPPERM" class="lot">
<label>Lot Size</label>
<input type="text" name="abcopperm" value="250" readonly>
</div>
<div style="display: none;" id="CRUDEOIL" class="lot">
<label>Lot Size</label>
<input type="text" name="abcrudeoil" value="100" readonly>
</div>
<div style="display: none;" id="CRUDEOILM" class="lot">
<label>Lot Size</label>
<input type="text" name="abcrudeoilm" value="10" readonly>
</div>
<div style="display: none;" id="GOLD" class="lot">
<label>Lot Size</label>
<input type="text" name="abgold" value="100" readonly>
</div>
<div style="display: none;" id="GOLDM" class="lot">
<label>Lot Size</label>
<input type="text" name="abgoldm" value="10" readonly>
</div>
<div style="display: none;" id="LEAD" class="lot">
<label>Lot Size</label>
<input type="text" name="ablead" value="5000" readonly>
</div>
<div style="display: none;" id="LEADMINI" class="lot">
<label>Lot Size</label>
<input type="text" name="ableadm" value="1000" readonly>
</div>
<div style="display: none;" id="NATURALGAS" class="lot">
<label>Lot Size</label>
<input type="text" name="abnaturalgas" value="1250" readonly>
</div>
<div style="display: none;" id="NICKEL" class="lot">
<label>Lot Size</label>
<input type="text" name="abnickel" value="250" readonly>
</div>
<div style="display: none;" id="NICKELM" class="lot">
<label>Lot Size</label>
<input type="text" name="abnickelm" value="100" readonly>
</div>
<div style="display: none;" id="SILVER" class="lot">
<label>Lot Size</label>
<input type="text" name="absilver" value="30" readonly>
</div>
<div style="display: none;" id="SILVERM" class="lot">
<label>Lot Size</label>
<input type="text" name="absilverm" value="5" readonly>
</div>
<div style="display: none;" id="ZINC" class="lot">
<label>Lot Size</label>
<input type="text" name="abzinc" value="5000" readonly>
</div>
<div style="display: none;" id="ZINCM" class="lot">
<label>Lot Size</label>
<input type="text" name="abzincm" value="1000" readonly>
</div>
<div style="display: none;" id="equity" class="myclass">
<select name="segment">
<option>AXISBANK</option>
<option>TCS</option>
<option>WIPRO</option>
</select>
</div>
<br><br>
<input type="text" name="price" placeholder="price" required><br><br>
<input type="text" name="stoploss" placeholder="Stop Loss" required> <br><br>
<button type="submit" class="login100-form-btn" name="getdata">Get Data</button>
</form>
</div>
</body>
</html>
JQuery Code:
<script type="text/javascript">
$(function() {
$('#segmentselector').change(function() {
$('.myclass').hide();
$('#' + $(this).val()).show();
});
});
</script>
<script type="text/javascript">
$(function() {
$('#scripselector').change(function() {
$('.lot').hide();
$('#' + $(this).val()).show();
});
});
</script>
PHP Code:
<?php
function calculator()
{
if (isset($_POST['getdata'])) {
$price = $_POST['price'];
$stoploss = $_POST['stoploss'];
$lowertrigger = 0.25;
$Additional = 0.011;
$abalumini = $_POST['abalumini'];
$abaluminim = $_POST['abaluminim'];
$abcopper = $_POST['abcopper'];
$abcopperm = $_POST['abcopperm'];
$abcrudeoil = $_POST['abcrudeoil'];
$abcrudeoilm = $_POST['abcrudeoilm'];
$abgold = $_POST['abgold'];
$abgoldm = $_POST['abgoldm'];
$ablead = $_POST['ablead'];
$ableadm = $_POST['ableadm'];
$abnaturalgas = $_POST['abnaturalgas'];
$abnickel = $_POST['abnickel'];
$abnickelm = $_POST['abnickelm'];
$absilver = $_POST['absilver'];
$absilverm = $_POST['absilverm'];
$abzinc = $_POST['abzinc'];
$abzincm = $_POST['abzincm'];
$X = $price * $abalumini * $lowertrigger * $Additional;
if ($abalumini) {
$Y = ($price - $stoploss) * $abalumini;
}
if ($Y > $X) {
echo "$Y";
} else {
echo "$X";
}
}
}
calculator();
?>
Assuming you want to retrieve the input value corresponding to the option selected in <select id="scripselector" name="segment">, you need a way to map the value of the former select and the name of the desired input.
So, I suggest that you modify your HTML, so that values of the select and names of the inputs match:
<!-- SELECT remains the same -->
<div id="commodity" class="myclass">
<select id="scripselector" name="segment">
<option value="ALUMINI">ALUMINI</option>
<option value="ALUMINIUM">ALUMINIUM</option>
<option value="COPPER">COPPER</option>
<!-- etc. -->
</select>
</div>
<br><br>
<!-- names are modified to match the select value -->
<div id="ALUMINI" class="lot">
<label>Lot Size</label>
<input type="text" name="ALUMINI" value="1000" readonly>
</div>
<div style="display: none;" id="ALUMINIUM" class="lot">
<label>Lot Size</label>
<input type="text" name="ALUMINIUM" value="5000" readonly>
</div>
<div style="display: none;" id="COPPER" class="lot">
<label>Lot Size</label>
<input type="text" name="COPPER" value="1000" readonly>
</div>
<!-- and so on... -->
Then in your PHP code, you can retrieve the selected input value:
$selectedInputValue = 0; // zero by default
if(isset($_POST['segment']) && isset($_POST[$_POST['segment']]))
$selectedInputValue = $_POST[$_POST['segment']];
Finally, your PHP function becomes something like this:
function calculator()
{
if (isset($_POST['getdata'])) {
$price = $_POST['price'];
$stoploss = $_POST['stoploss'];
$lowertrigger = 0.25;
$Additional = 0.011;
$selectedInputValue = 0; // zero by default
if(isset($_POST['segment']) && isset($_POST[$_POST['segment']]))
$selectedInputValue = $_POST[$_POST['segment']];
$X = $price * $selectedInputValue * $lowertrigger * $Additional;
$Y = 0; // zero by default
if ($selectedInputValue) {
$Y = ($price - $stoploss) * $selectedInputValue;
}
if ($Y > $X) {
echo "$Y";
} else {
echo "$X";
}
}
}