I'm having some trouble passing the value of some HTML elements to PHP variable. I have a PHP web app where I give the users some drop down option. What I want to do is after the user has selected the option I give than to click on a button and make some calculations based on his/her selection.
I have tried using the POST and GET method but because I'm new to php I probably did it wrong. I also try with ids but no results.
Here is the HTML code
The 1st dropdown menu :
<div>
<select id="kleidwma" onchange="kleidwmata_change(this.value);kwdikos();ypsos();"
class="form-control selectpicker kleidwmata" data-size="10" data-
style="btn-white" name="guard_kleidwmata" required >
<option value="" > </option>
<option value="12">12 MS</option>
<option value="14">14 KETE</option>
<option value="15">15 ARRIKTON</option>
<option value="16">16 KETE</option>
<option value="22">22 KETE</option>
</select>
</div>
The 2nd dropdown menu :
<div>
<select id="sigkratisi" onchange="kwdikos()" name="sigkratisi"
class="form-control sigkratisi" required>
<option value="" ></option>
<option value="metalliki" >Μεταλλική</option>
<option value="xilogonia" >Ξυλογωνία</option>
</select>
</div>
Here is the button to be clicked after the selection has been made :
<div class="row" style="margin-top:20px; margin-left: 235px;">
<div class="col-md-7">
<input type="hidden" name="tmp_calculate" value="pending" />
<button onclick="calculate()" type="button" class="btn btn-success" >
<?php echo "Υπολογισμός";?></button>
</div>
</div>
And finally here is the function that is called :
function calculate()
{
$var1 = sigkratisi;
$var2 = kleidwma;
"code to be executed base on the var1 and var2"
}
I hope it's clear enough.
Thanks in advance for your time
you can use Forms
<form name="f" action="" method="POST">
<div>
<select id="kleidwma" name="variable"
class="form-control selectpicker kleidwmata" data-size="10" data-
style="btn-white" name="guard_kleidwmata" required >
<option value="" > </option>
<option value="12">12 MS</option>
<option value="14">14 KETE</option>
<option value="15">15 ARRIKTON</option>
<option value="16">16 KETE</option>
<option value="22">22 KETE</option>
</select>
<input type="submit" value="submit" />
</div>
</form>
in PHP
<?php
if(isset($_POST['variable']))
{
echo $_POST['variable'];
}
?>
Related
I have a database driven table where the last column in the table contains a form that repeats for each row. I want to have a day_inperson field show if the value in the spring_2021_status field is equal to "Both" Since the form is repeated on the page, it doesn't work.
Here is my code for the repeating form. The form itself works fine and inserts into the database. Just need the one field to show if it meets the value of "Both":
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" id="spring_2021_status" name="spring_2021_status">
<option></option>
<option value="In Person" <?php if (!(strcmp('In Person', ($survey->getColumnVal("spring_2021_status"))))) { echo "selected=\"selected\"";} ?>>In Person</option>
<option value="Remote" <?php if (!(strcmp('Remote', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>Remote</option>
<option value="Both" <?php if (!(strcmp('Both', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>Both</option>
<option value="N/A" <?php if (!(strcmp('N/A', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>N/A</option>
</select>
<br>
<script>
$('#spring_2021_status').on('change',function(){
if( $(this).val()==="Both"){
$("#update_status2").show()
}
else{
$("#update_status2").hide()
}
});
</script>
<div class="row" id="update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
<?php echo($survey->getColumnVal("notes")); ?></textarea>
</div>
<input type="hidden" value="<?php echo($survey->getColumnVal("theein")); ?>" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>
You can use class selector inside your div update_status2 then whenever your select-box gets change use $(this).closest('form').find().. this line will get closest form from select-box and then find your div which you need to show/hide.
Demo Code :
//onchange of sleect
$('[name=spring_2021_status]').on('change', function() {
if ($(this).val() === "Both") {
//get closest form tag and then find your div
$(this).closest('form').find(".update_status2").show()
} else {
$(this).closest('form').find(".update_status2").hide()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" name="spring_2021_status">
<option></option>
<option value="In Person" selected>In Person</option>
<option value="Remote">Remote</option>
<option value="Both">Both</option>
<option value="N/A">N/A</option>
</select>
<br>
<!--added class-->
<div class="row update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
something...</textarea>
</div>
<input type="hidden" value="abc" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" name="spring_2021_status">
<option></option>
<option value="In Person" selected>In Person</option>
<option value="Remote">Remote</option>
<option value="Both">Both</option>
<option value="N/A">N/A</option>
</select>
<br>
<div class="row update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
something...</textarea>
</div>
<input type="hidden" value="abc" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>
Here i have two fields such as follows
<div class="left_2 two">
<select name="abc_type" id="abc_type_2" class="form-control">
<option value="AB">LSK-AB</option>
<option value="AC">LSK-AC</option>
<option value="BC">LSK-BC</option>
</select>
</div>
<div class="left_2 one">
<select name="abc_type" id="abc_type_1" class="form-control">
<option value="A">LSK-A</option>
<option value="B">LSK-B</option>
<option value="C">LSK-C</option>
</select>
</div>
i will be using only one field at a time and the remaining field will be hidden and the problem am always getting the value A which is present in second select tag while getting submitted.how can i pass the correct value which i choosed
Here is the solution what ever field will be hidden add disabled in the input field Check the code below.
<?php
if(isset($_POST['abc_type'])){
echo $_POST['abc_type'];
}
?>
<form action="" method="post">
<div class="left_2 two">
<select name="abc_type" id="abc_type_2" class="form-control">
<option value="AB">LSK-AB</option>
<option value="AC">LSK-AC</option>
<option value="BC">LSK-BC</option>
</select>
</div>
<div class="left_2 one">
<select name="abc_type" id="abc_type_1" class="form-control">
<option value="A">LSK-A</option>
<option value="B">LSK-B</option>
<option value="C">LSK-C</option>
</select>
</div>
<input type="submit" name="submit" value="submit"/>
</form>
I have a 'this year' dropdown with a form attached. I then select one of the years, like say 2016. When I click the submit button I want the page to be reloaded while the value in the dropdown stays at 2016 (the one that was previously selected).
How can I do that? Here's my form:
<form class="form" method="POST" id="myID" name="myName">
<label id="year" name="year">YEARS</label>
<select name="year" id="year" class="form-control">
<option value="0" selected disabled="">CHOOSE YEAR</option>
<?php foreach($year as $rows){?>
<option value="<?php echo $rows->years?>"><?php echo $rows->years?>
</option>
<?php }?>
</select>
<button id="filter_button" style="margin-top: 26px" name="filter_button"
type="submit" class="for btn btn-info">Show</button>
</form>
You should use the value from $_POST to set the selected as default. Below is the updated code:
<form class="form" method="POST" id="myID" name="myName">
<label id="year" name="year">YEARS</label>
<select name="year" id="year" class="form-control">
<option value="0" selected disabled="">CHOOSE YEAR</option>
<?php foreach($year as $rows){
$isSelected = (isset($_POST['year']) && ($_POST['year'] == $rows->years)) ? 'selected' : '';
?>
<option <?php echo $isSelected; ?> value="<?php echo $rows->years?>"><?php echo $rows->years?>
</option>
<?php }?>
</select>
<button id="filter_button" style="margin-top: 26px" name="filter_button"
type="submit" class="for btn btn-info">Show</button>
</form>
I'm using Contao as CMS and for a filter, I need to build my own select.
This is my Code, what is working so fare:
<form action="media-center" id="cc_filter_339" name="cc_filter_339" method="get" enctype="application/x-www-form-urlencoded" onchange="this.submit();">
<div class="formbody">
<select class="" name="language">
<option value="language_reset">Sprache</option>
<option value="de">Deutsch</option>
<option value="en">English</option>
<option value="fr">Français</option>
<option value="nl">Nederlands</option>
</select>
<div class="widget submit_container clearall clear_all_filters">
<input type="submit" id="ctrl_cc_filter_339_clearall" class="submit clearall clear_all_filters" value="Filter zurücksetzten" name="cc_filter_339_clearall">
</div>
</div>
</form>
The only problem is, the option "Sprache" is always selcted, it dosnt mater which option I click.
I hope you guys can help my with that.
You need to check $_GET value and then add selected attribute to your options. Do like below:-
<form action="media-center" id="cc_filter_339" name="cc_filter_339" method="get" enctype="application/x-www-form-urlencoded" onchange="this.submit();">
<div class="formbody">
<select class="" name="language">
<option value="language_reset" <?php if(isset($_GET['language']) && $_GET['language']=='anguage_reset'){echo "selected";}?>>Sprache</option>
<option value="de" <?php if(isset($_GET['language']) && $_GET['language']=='de'){echo "selected";}?>>Deutsch</option>
<option value="en" <?php if(isset($_GET['language']) && $_GET['language']=='en'){echo "selected";}?>>English</option>
<option value="fr" <?php if(isset($_GET['language']) && $_GET['language']=='fr'){echo "selected";}?>>Français</option>
<option value="nl" <?php if(isset($_GET['language']) && $_GET['language']=='nl'){echo "selected";}?>>Nederlands</option>
</select>
<div class="widget submit_container clearall clear_all_filters">
<input type="submit" id="ctrl_cc_filter_339_clearall" class="submit clearall clear_all_filters" value="Filter zurücksetzten" name="cc_filter_339_clearall">
</div>
</div>
</form>
Before anyone yells Repost, there aren't many cases like mine that I've seen.I have a contact form that has the possibility to have a main Select option, a sub-Select option and then a sub-Select option of that one. Overall, There are 27 options to choose from and I think I could make the php give me all 27 of those and then do a "yes they selected this one but not that one" type of report, but I digress.How do I have the php script for my contact form send only what is selected from a possible three-tiered select menu? EDIT: I'm totally willing to use something other than PHP to help facilitate this, I just need help with the PHP script as well.Edit: To be clear, I'm try to create and populate a php script, not valdiate the form/check that all required sections are filled out.Code
<form action="sending.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
Name:<br>
<input name="name" type="text" value="" size="30"/><br>
Email:<br>
<input name="email" type="text" value="" size="30"/><br>
Service:<br>
<select name="service" id="service" class="service">
<option>Select a Service</option>
<option value="screen" data-target="devices" id="screen">Screen Replacement</option>
<option value="comp" data-target="comp" id="comp">Computer Work</option>
<option value="misc" data-target="misc" id="misc">Miscellaneous</option>
</select>
<div style="display:none" id="service-devices">
<select name="devices" id="devices" class="devices">
<option>Select a Device</option>
<option value="iphone" data-target="iphones" id="iphone">iPhone</option>
<option value="ipad" data-target="ipads" id="ipad">iPad</option>
<!--<option value="watch" id="watch">Apple Watch</option> -->
<option value="android" id="android">Android</option>
</select>
<div style="display:none" id="devices-iphones">
<select name="iphone" id="iphone" class="iphone">
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option>Select a Model</option>
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
</div>
<div style="display:none" id="devices-ipads">
<select name="ipad" id="ipad" class="ipad">
<option>Select a Model</option>
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
</div>
</div>
<div style="display:none" id="service-comp">
<select name="compwork" id="compwork" class="compwork">
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
</div>
<div style="display:none" id="service-misc">
<select name="miscellaneous" id="miscellaneous" class="miscellaneous">
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
</div><br>
Message:<br>
<textarea name="message" rows="7" cols="30"></textarea><br>
<input type="submit" value="Submit Request"/>
</form>
I assume that you do have jquery to display the relevant select boxes upon selection of devices etc... I have made a few changes in your html form, like adding id="form" in your form tag. Also added value="" for options like "Please select Service".. Here is the code. Hope this helps.. Refer to this as well..
Jquery form submit to check empty fields
<form id="form" action="sending.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
Name:<br>
<input name="name" type="text" value="" size="30"/><br>
Email:<br>
<input name="email" type="text" value="" size="30"/><br>
Service:<br>
<select name="service" id="service" class="service">
<option value="">Select a Service</option>
<option value="screen" data-target="devices" id="screen">Screen Replacement</option>
<option value="comp" data-target="comp" id="comp">Computer Work</option>
<option value="misc" data-target="misc" id="misc">Miscellaneous</option>
</select>
<div style="display:none" id="service-devices">
<select name="devices" id="devices" class="devices">
<option value="">Select a Device</option>
<option value="iphone" data-target="iphones" id="iphone">iPhone</option>
<option value="ipad" data-target="ipads" id="ipad">iPad</option>
<!--<option value="watch" id="watch">Apple Watch</option> -->
<option value="android" id="android">Android</option>
</select>
<div style="display:none" id="devices-iphones">
<select name="iphone" id="iphone" class="iphone">
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option value="">Select a Model</option>
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
</div>
<div style="display:none" id="devices-ipads">
<select name="ipad" id="ipad" class="ipad">
<option value="">Select a Model</option>
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
</div>
</div>
<div style="display:none" id="service-comp">
<select name="compwork" id="compwork" class="compwork">
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
</div>
<div style="display:none" id="service-misc">
<select name="miscellaneous" id="miscellaneous" class="miscellaneous">
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
</div><br>
Message:<br>
<textarea name="message" rows="7" cols="30"></textarea><br>
<input type="submit" value="Submit Request"/>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('select').change(function(){
var boxid = $(this).children('option:selected').attr('data-target');
alert(boxid);
if(boxid == "devices") {
var divId = "service-" + boxid;
}
document.getElementById(divId).style.display = "block";
});
$("form").submit(function(){
// $(':input[value=""]').attr('disabled', true);
$("input[type='text'],select,input[type='password'],textarea",this).each(function() {
if($(this).val().trim() == "") {
$(this).attr('disabled', true);
}
})
});
});
</script>