Get value without submitting it
Question
I have a simple a+b php calculator, but you select the inputs from a dropdown.
<?php
if (isset($_POST['submit']) and ! empty($_POST['submit'])) {
if (isset($_POST['radio'])) {
$radio_input = $_POST['radio'];
$radio_input1 = $_POST['radio1'];
echo "$";
echo $radio_input1 + $radio_input;
}
}?>
<form action="asdindex.php" method="post">
<ul>
<li>
<select name="radio">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
<li>
<select name="radio1">
<option value="1.2">1.2</option>
<option value="3.1">3.1</option>
<option value="0.3">0.3</option>
<option value="1.2">1.2</option>
</select>
</li>
</ul>
<input type= "submit" name="submit"value="submit"/>
</form>
The question is how can i print the result without using a submit button/input/. I know that you can't do it with PHP. But not sure how to do it with JQ or smt. else.
3 answers
solution1
2 2017-02-05 09:24:02
You can use jQuery, function can be executed on change of second dropdown ,
sum gets calculated without hitting any button.
$(function(){ $('.check2').change(function(){ var data1= parseInt($('.check1').val()); var data2= parseInt($('.check2').val()); alert(data1 + data2); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select class="check1"> <option value="1">1</option> <option value="2">2</option> </select> <select class="check2"> <option value="3">3</option> <option value="4">4</option> </select>
solution2
0 2017-02-05 09:11:49
使用 Ajax 将选定的选项值发布到 PHP 并打印响应
solution3
0 ACCPTED 2017-02-05 09:29:57
See this fiddle
You can use Javascript to do this. See the below JS
function addValues() {
var a = 0,
b = 0;
var e = document.getElementById("radio");
a = e.options[e.selectedIndex].value;
var e1 = document.getElementById("radio1");
b = e1.options[e1.selectedIndex].value;
alert(parseFloat(a) + parseFloat(b));
}
Add the above JS inside a <script> before you close the <body> .
The function will be invoked by clicking a button. The HTML for button would be as follows
<button onclick="addValues()">Click to add</button>
Update
See the fiddle
Updated HTML
<ul>
<li>
<select name="radio" id="radio">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
<li>
<select name="radio1" id="radio1">
<option value="1.2">1.2</option>
<option value="3.1">3.1</option>
<option value="0.3">0.3</option>
<option value="1.2">1.2</option>
</select>
</li>
</ul>
<button onclick="addValues()">Click to add</button>
<br/> Result=
<span id="result"></span>
Updated JS
function addValues() {
var a = 0,
b = 0;
var e = document.getElementById("radio");
a = e.options[e.selectedIndex].value;
var e1 = document.getElementById("radio1");
b = e1.options[e1.selectedIndex].value;
document.getElementById("result").innerHTML = (parseFloat(a) + parseFloat(b));
}
Update
If you don't want the button, you can just listen for the change event of the select .
See this fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.