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.
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>
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
use Ajax post selected option values to PHP and print the response
Related
Hey guys I'm trying to create a dynamic button from a drop down list. for example, in the HTML code below...
function dropdownbutton(){
var make = document.getElementById("makelist");
var answer = make.options[make.selectedIndex].value;
alert("answer")
}
<div class="make">
<label>Make</label>
<select name="make" id="makelist" onchange="getId(this.value);">
<option value="">Select Make</option>
<option value="">1</option>
</select>
</div>
<div id="model">
<label>Model</label>
<select name="model" id="modellist" onchange="getId2(this.value);">
<option value="">Select Model</option>
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div id="year">
<label>Year</label>
<select name="year" id="yearlist" onchange="getId3(this.value);">
<option value="">Select Year</option>
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>
I'm open to trying it in different languages but I would prefer to do it in php, I simply don't know how to get the values from each dropdown.
I have taken help of Jquery here, inside the dropdownbutton() function i call all the select box element.
And using .each function extracted the value selected value of dropdowns.
i check those value if not empty then created a button inside element having Id #append_new_button
Please check the below code it might solve your issue
Thanks
function dropdownbutton() {
jQuery('#append_new_button').html('');
jQuery('select').each(function(){
var select_value = jQuery(this).val();
var select_label = jQuery("#"+jQuery(this).attr('id')+" option[value='"+select_value+"']"). text();
if(select_value != ''){
jQuery('#append_new_button').append('<input type="button" id="'+select_value+'" value="'+select_label+'"></button>')
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="make">
<label>Make</label>
<select name="make" id="makelist">
<option value="">Select Make</option>
<option value="make_1">Make 1</option>
<option value="make_2">Make 2</option>
</select>
</div>
<div id="model">
<label>Model</label>
<select name="model" id="modellist" >
<option value="">Select Model</option>
<option value="model_1">Model 1</option>
<option value="model_2">Model 2</option>
</select>
</div>
<div id="year">
<label>Year</label>
<select name="year" id="yearlist" >
<option value="">Select Year</option>
<option value="year_1">year 1</option>
<option value="year_2">year 2</option>
</select>
</div>
<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>
<div id="append_new_button">
</div>
I updated that code to find the values for each drop down
function dropdownbutton(val){
var make = document.getElementById("makelist");
var answer = make.options[make.selectedIndex].value;
var model = document.getElementById("modellist");
var answer2 = model.options[model.selectedIndex].value;
var year = document.getElementById("yearlist");
var answer3 = year.options[year.selectedIndex].value;
alert(answer2);
}
Now i need to figure out how to pass these variables to a link for example, mydomain.com/answer/answer2/answer3
i think that this code is more dynamic.
$("button").click(function() { // if button is clicked
var arr = $('select').map(function() { // run through all selects and get value
return this.value
}).get();
var url = "http://exp.com"; // base for the url
arr.forEach(function(item) {
url = url + '/' + item; // append all options to the base url
});
window.location.href(url); // redirect to base url + all options
});
Don't forget to add value to your options. <option value="1">1</option>
Please look at jsfiddle for a working example
I want to create a very simple (no plugins and basic layout) for a dropdown menu that has checkboxes for options. For example, if C and F are selected and the form is submitted, I want the url to show /index.php?category1=3&&category2=6
<form action="" method="get">
<select multiple="multiple" name="category">
<optgroup label="Category1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</optgroup>
<optgroup label="Category2">
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</optgroup>
</select>
<br><input type="submit" value="go">
</form>
I am not even sure how to start the jquery to pass the values to the url. Any help is much appreciated!
EDIT:
I figured I can do this using instead and simulate a dropdown with jquery.
Here is the jsfiddle: http://jsfiddle.net/k6R7g/
how can I show "2 Selected" instead of "Select..." when selections are made?
See code below, construct the url yourself and it will work. In case the form contains more values you can better add the category to the value of the option.
<form method="get">
<select multiple="multiple" name="category">
<optgroup label="Category1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</optgroup>
<optgroup label="Category2">
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</optgroup>
</select>
<br><input type="button" value="go" onclick="clicked();">
</form>
<script type="text/javascript">
function clicked(){
var v = "";
$('select').find(":selected").each(
function(){
if (v != ""){
v += "&";
}
v += $(this).parent()[0].label + '=' + $(this).context.value;
}
);
window.location.href = "index.php?" + v;
}
</script>
Yesterday i asked how i could generate a second dropdown list for a subcategory, so in the first dropdown i would select "Trucks" and a second dropdown would appear with the colors "Black" or "White" to pick or if in the first dropdown i select "Cars" the second generated dropdown would have "Red", "Green" or "Blue" options, that lead to this http://jsfiddle.net/7YeL6/5/ that i implemented in my code and works like a charm (i already put more results in the ".js" and is working 100%).
But now im facing a new problem because i need to generate a third category and i dont know anything about jquery.
Based on the previous code, i need a third dropdown to appear based on the second dropdown so for example:
If i select "Trucks", then "Black" a new dropdown will appear to select "New" or "Used" or if i select "Cars", then "Red" a new dropdown will appear to select "Buy" or "Rent".
HTML CODE
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
<div>
<select name="category2" id="truck" class="second">
<option value="white">white</option>
<option value="black">black</option>
</select>
<select name="category2" id="car" class="second">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
</div>
CSS CODE
#category2{
display: none;
}
.second{
display: none;
}
JS CODE
$(document).ready(function(){
$("#category").change(function () {
var str = "";
str = $("select#category option:selected").text();
if(str == "Trucks"){
$("select.second").not("#truck").hide();
$("#truck").show();
$("#truck").fadeIn(1000);
}
else if(str == "Cars"){
$("select.second").not("#car").hide();
$("#car").show();
$("#car").fadeIn(1000);
}
})
});
Thanks
It looks like you wanted to this instead
Demo: http://jsfiddle.net/7YeL6/7/
HTML CODE
<select id="category" class="first">
<option selected value="Please Select">Please Select</option>
<option value="car">Cars</option>
<option value="truck">Trucks</option>
<option value="motor">Motorcycles</option>
<option value="boat">Boats</option>
</select>
<select id="truck" class="second">
<option selected value="Please Select">Please Select</option>
<option value="white">white</option>
<option value="black">black</option>
</select>
<select id="car" class="second">
<option selected value="Please Select">Please Select</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<select id="truck-white" class="third">
<option value="size1">truck-white1</option>
<option value="size2">truck-white2</option>
</select>
<select id="truck-black" class="third">
<option value="size1">truck-black1</option>
<option value="size2">truck-black2</option>
</select>
<select id="car-red" class="third">
<option value="1">car-red1</option>
<option value="2">car-red2</option>
<option value="3">car-red3</option>
</select>
<select id="car-green" class="third">
<option value="1">car-green1</option>
<option value="2">car-green2</option>
<option value="3">car-green3</option>
</select>
CSS CODE
.second{
display: none;
}
.third{
display: none;
}
JQuery CODE
$(".first").change(function () {
var str = "";
str = $(this).val();
$('.second').hide();
$('.third').hide();
$('#'+str).show();
});
$(".second").change(function () {
var str = "";
str = $(this).val();
var id = $(this).attr('id');
$('.third').hide();
$('#' + id + "-" + str).show();
})
I have a html form defined . I have a button for the user to select his occupation . If his occupation happens to be a student then i need to generate another new button dynamically . If the user selects anything other than a student then i dont want any new button . I am unsure how to do . Do i use jquery ? I have no idea to use jquery . Can some one help ? Any pointers
Thanks.
<?php
?>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
</script>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<form>
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
</form>
</body>
</html>
Personally I accomplish this by placing the additional form element in the HTML, simply hidden like so:
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
Then you can use JS, as I prefer jQuery, to show the div or hide the div when applicable:
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
Using jQuery would simplify this:
Let's say you have the following:
<form>
<select name="occupation">
<option value="Non-Student">Non-Student</option>
<option value="Student">Student</option>
</select>
</form>
Then the following would be used to append the button if the user selected 'Student':
$(function(){
$('select[name="occupation"]').change(function(){
var val = $(this).val();
if(val=='Student'){
$('form').append('<button>New Button</button>');
}
});
});
Is this the best way of doing this...
I have some drop downs and when a user selects an option I take their selection and send it to a php page to query a database then return that data to a div...
code is below
<?PHP
include('includes/inc_header.php');
#<-- SQL QUERIES START ------------------------------------------->
$sql1 = "SELECT Team.ShortLabel ShortLabel,Team.Label Label
FROM adlTeam Team
INNER JOIN adlPlanet Planet ON Team.TeamKey = Planet.TeamKey
GROUP BY ShortLabel";
$queryrow1 = mysql_query($sql1);
#<-- SQL QUERIES END ------------------------------------------->
?>
<script type="text/javascript">
$(document).ready(function()
{
$("#selectOwner").change(function ()
{
$.post('process.php', $(this).serialize()
,function(data){$("#ownerInfo").html(data)});
return false;
});
$("#selectZoom").change(function ()
{
$.post('zoomchange.php', $(this).serialize()
,function(data)
{
$("#mapchanges").html(data)
});
return false;
});
$("#nameStatus").change(function ()
{
$.post('mapchanges.php', $(this).serialize(), function(data)
{
$("#zoomchanges").html(data)
});
return false;
});
});
</script>
<div id="primary_content">
<form name="myform" id="myform" action="" method="POST">
<h3>SELECT TEAM</h3>
<select name="selectOwner" id="selectOwner" size="10"
style = "width:250px;margin-top:-12px;margin-left:15px;">
<?PHP
while ($clanlist = mysql_fetch_array($queryrow1))
{
#<-- SQL QUERIES START ------->
$sql3 = "SELECT Red, Green, Blue FROM adlteam
WHERE ShortLabel = '".$clanlist['ShortLabel']."'";
$queryrow3 = mysql_query($sql3);
$colors = mysql_fetch_array($queryrow3);
#<-- SQL QUERIES END ------------>
?>
<option id="ownerID_input" name="ownerID"
value="<?php
echo $clanlist['ShortLabel']; ?>"><?php echo $clanlist['Label']; ?>
</option>
<?PHP
}
?>
</select>
</form>
<div id="ownerInfo"></div>
<div id="planetInfo"></div>
<div id="mapchanges"></div>
<div id="zoomchanges"></div>
<div id="mapoptions">
<span class="h4">ZOOM:</span>
<select name="selectZoom" id="selectZoom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<input type="checkbox" style="margin-top:10px;"
name="nameStatus" id="nameStatus">
<span class="pinfo">Planet Names</span>
</div>
</div>
<div id="secondary_content">
<iframe src="mapgendisplay.html" name="testFrame" id="testFrame"
width="695" height="564" scrolling="no"
frameborder="0" allowtransparency></iframe>
</div>
<?PHP include('includes/inc_footer.php'); ?>
From what I can see, that does look like a good way of doing what you're trying to do. More information would be useful though.
It's possible you could reduce the code by making the functions more general:
var phpfile = new Array();
phpfile["selectZoom"] = "zoomchange.php";
...
...
var elementID = new Array();
elementID["selectZoom"] = "#mapchanges";
...
...
$("select").change(function() {
$.post(
phpfile[$(this).id()],
$(this).serialize(),
function(data) {
$(elementID[$(this).id()]).html(data)
}
);
});