I have tried a lot & searched a lot but i didn't found the solution.
I have HTML code
HTML
<form id="program_mode" action="" method="post">
<select name="mode" id="mode">
<option>Select</option>
<option value="<?php echo $vars['url']?>pg/event_calendar/all" <?php if($mode == 'All') echo 'selected="selected"'; ?>>All</option>
<option value="<?php echo $vars['url']?>pg/event_calendar/anytime" <?php if($mode == 'Online') echo 'selected="selected"'; ?>>Online</option>
<option value="<?php echo $vars['url']?>pg/event_calendar/offline" <?php if($mode == 'Offline') echo 'selected="selected"'; ?>>Offline</option>
</select>
</form>
Then i want in php part the selected option.
So i have written like
PHP
$mode = $_POST['mode'];
var_dump($mode);
But i am not getting the value. The thing i dont want to submit. Onchange only it should get the value. Can it will be possible ?
<form id="program_mode" action="" method="post">
<select name="mode" id="mode" onchange="val_changed()">
<option>Select</option>
<option value="<?php echo $vars['url']?>pg/event_calendar/all" <?php if($mode == 'All') echo 'selected="selected"'; ?>>All</option>
<option value="<?php echo $vars['url']?>pg/event_calendar/anytime" <?php if($mode == 'Online') echo 'selected="selected"'; ?>>Online</option>
<option value="<?php echo $vars['url']?>pg/event_calendar/offline" <?php if($mode == 'Offline') echo 'selected="selected"'; ?>>Offline</option>
</select>
</form>
With little jquery you can do with this
<script>
function val_changed()
{
var mode=$('#mode').val();
}
</script>
Ya sure, if you want to submit the form you can use form.submit() in onchange event of the dropdown like:
<select name="mode" id="mode" onchange="form.submit();">
And can access the value in PHP like:
if(isset($_POST['mode'])){
var_dump($_POST['mode']);
//extra code
}
If you dont want to submit the form you can just use a jquery function to pick the selected value: Then remove the onchange event handler from select box as:
<select name="mode" id="mode">
and just add the following jquery function:
$('#mode').change(function(e) {
var val = $(this).val();
alert(val);
});
If you want PHP to get the value only when the option is change, you should use JavaScript or jQuery.
Include the jQuery library :
<script src="http://code.jquery.com/jquery-latest.js"></script>
Then add the following code in a <script></script> tag.
$(document).ready(function(){
$("#mode").change(function(){
$.post("php_file.php", {mode:$(this).val()});
});
});
When the option changes, jQuery will send a POST request in the background to the php_file.php with mode value. PHP will take care of the rest.
This works normally like a form submitted to the PHP file. So you will get the $_POST['mode'] value in the PHP file.
Related
I'm having a hard time to fix and how can make my codes work well.
My textbox echo correctly while my dropdown box is not.
Can anyone help me and also clean my codes?
I wanna know how did you do it and can u please explain it to me.
Thank you so much.
index.php
<?php include 'test.php' ?>
<form method="post" action="index.php">
Textbox: <input type="text" name="txt1" value="<?php echo $txt1;?>">
Dropdown: <select name="drpdown1" value="<?php echo $drpdown1;?>">
<option></option>
<option value="1">Mark</option>
<option value="2">Extreme</option>
</select>
<input type="submit" name="btn1">
</form>
test.php
<?php
$txt1 = "";
$drpdown1 = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$txt1 = $_POST["txt1"];
$drpdown1 = $_POST["drpdown1"];
}
?>
You're not echoing the value of $drpdown1 correctly:
// this is wrong for a select:
<select name="drpdown1" value="<?php echo $drpdown1;?>">
// etc.
If you want to select automatically the previously selected value, you need to add the selected attribute:
<select name="drpdown1">
<option value="1" <?php if ($drpdown1 === '1') { echo "selected='selected'"; } ?>>Mark</option>
<option value="2" <?php if ($drpdown1 === '2') { echo "selected='selected'"; } ?>>Extreme</option>
// etc.
you have to know more about the dropdown box because you can not put the value inside the
<select value="<?php echo $drpdown1;?>">
you have to compare the value inside the option directly. example
<select name="drpdown1">
<?php
if($drpdown1 == ""){
?>
<option selected></option>
<option value="1">Mark</option>
<option value="2">Extreme</option>
<?php
}else if($drpdown1 == "1"){
?>
<option></option>
<option value="1" selected>Mark</option>
<option value="2">Extreme</option>
<?php
}
?>
</select>
I know this question has been asked a lot of times in several other ways but none of them helped me. So, I have formatted it in my own words.
Supppose I have a select box like this:
<select name="something">
<option value="1"><?php echo $value1; ?> for <?php echo $value2; ?>
</select>
<input type="text" name="sometext" value="">
I want to have the <?php echo $value1; ?> in the text field updated live on change of the select box option. To be clear, I DO NOT want the value="1" in the text field and I need to have that value="1" there for some reason and I cannot replace it with value="<?php echo $value1; ?>". I strictly want the inside value <?php echo $value1; ?> to be replaced in the text field. But I do not know how I can achieve it. Please help me experts. For live changing jQuery preferred.
Try below code:
<select name="something">
<option value="1" data="<?php echo $value1; ?>"><?php echo $value1; ?> for <?php echo $value2; ?></option>
</select>
<input type="text" name="sometext" value="">
See below working HTML
jQuery(document).ready(function($){
$('#something').change(function(){
$('#sometext').val($(this).find(':selected').attr('data'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="something" id="something">
<option value="1" data="value1">value1 form value01</option>
<option value="1" data="value2">value2 form value02</option>
<option value="1" data="value3">value3 form value03</option>
<option value="1" data="value4">value4 form value04</option>
</select>
<input type="text" name="sometext" id="sometext" value="">
Hope this will work for you,
$(document).ready(function() {
$('select').change(function(){
var selectedOption = $("select option:selected").text(); //Get the text
selectedOption = selectedOption.split("for"); //split the 2 value by using for
alert(selectedOption[0]); //Get the value before for
$('input').val(selectedOption[0]);
});
});
You need to fetch the selected option text instead of the usual option value, it is pretty easy to do.
You don't need to add any data attributes to achieve this, as there is a method to fetch the actual option text.
Here is a working example:
PHP for populating a select element (below I show the static HTML)
<select id="something" name="something">
<?php foreach($selectList as $value=>$text){ ?>
<option value="<?php echo $value;?>"> <?php echo $text;?> </option>
<?php } ?>
</select>
HTML
<select id="something" name="something">
<option value="1"> Value 1 </option>
<option value="2"> Value 2 </option>
<option value="3"> Value 3 </option>
</select>
<input type="text" id="sometext" name="sometext" value=""/>
jQuery
$(document).ready(function(){
$('#something').on('change',function(){
var selectedText = $(this).children(':selected').text();
$('#sometext').val(selectedText);
});
});
This approach is fast and easy to maintain.
And of course a jsfiddle to see it in action: https://jsfiddle.net/kzgapkt5
Hope it helps a bit
I would like to get value from Form without submitting it, because the client have to choose the right type of house model to get the right form that fits the selected house model, without submitting, just selecting the house model and it for example continues the rest of form after that.
I have so far tried with this:
<form method="GET" action="foo.php">
<select name="house_model">
<option value="">------</option>
<option value="<?php echo $model1;?>">Model 1</option>
<option value="<?php echo $model2;?>">Model 2</option>
<option value="<?php echo $model3;?>">Model 3</option>
</select>
</form>
<?php
$a = $_GET["housemodel"];
if($a<>'')
{
if($a == $model1)
{
echo "<input type=\"text\" name=\"a\" value=\"something model1\">";
}
else if($a == $model2)
{
echo "<input type=\"text\" name=\"b\" value=\"something model2\">";
}
else if($a == $model3)
{
echo "<input type=\"text\" name=\"c\" value=\"something model3\">";
}
}
?>
I think, if you dont want page to be refreshed when user selects value from your drop down list, then you can use ajax. AJAX is used for this purpose. if you google, then you will find lots of tutorials related to AJAX.
If you don't want to submit the form, use JavaScript to get the element. Or you can also use jquery to access the value. Make sure you put id = "something" and retrieve it using $('#something').val();
if you want to use JavaScript,
<select name="house_model" id="model">
<option value="">------</option>
<option value="<?php echo $model1;?>">Model 1</option>
<option value="<?php echo $model2;?>">Model 2</option>
<option value="<?php echo $model3;?>">Model 3</option>
</select>
<script type="text/javascript">
var model= document.getElementById('model');
alert("You entered: " + model);
</script>
AJAX codes here
$("#model").live("change", function () {
alert("You choose " + $('#model').val());
});
IF you don't want to submit your form, you can get element using AJAX/jQuery.
<form method="GET" action="foo.php" onChange="getHouseModel">
<select name="house_model" id="house_model">
<option value="">------</option>
<option value="<?php echo $model1;?>">Model 1</option>
<option value="<?php echo $model2;?>">Model 2</option>
<option value="<?php echo $model3;?>">Model 3</option>
</select>
</form>
<script type='text/javascript'>
function getHouseModel(){
var model=$('#house_model').val();
alert(model);
}
</script>
or you can write jquery like this. so you dont have to call function in tag
<script type="text/javascript">
$('#house_model').select(function() {
var model=$('#house_model').val();
alert(model);
});
</script>
There is no way of getting data from a form before submitting in in PHP! This is because before submitting the form the PHP script simply is not called.
If you want to do some validation before sending data you must use javascript which is run on the client browser. Have a look at the jQuery library which makes this very easy: http://docs.jquery.com/Plugins/Validation/validate
If you want to use PHP only then you will need to separate the form into two pages.
You have to use ajax for achiving this.For example
<form method="GET" action="foo.php">
<select name="house_model" id="house_model">
<option value="">------</option>
<option value="<?php echo $model1;?>">Model 1</option>
<option value="<?php echo $model2;?>">Model 2</option>
<option value="<?php echo $model3;?>">Model 3</option>
</select>
</form>
$("#house_model").live("change", function () {
//Write the ajax and post the value to server side
});
Having some trouble here with this.
The setup:
A select object with a choice of "Other"
User selects "Other".
Script runs when this specific value is chosen, and dynamically changes the class of input object from "hide" to "show" (hidden and visible with css display).
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<?php
$otherGrade = $_POST['grade'];
if($otherGrade = "otherGrade")
{
echo("<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID)
{
if(document.getElementById(objInputID).className=='hide')
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>");
}
else
{
echo ("");
}
?>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Should I remove the onchange event from the select object? If so, I am at a loss as how to have the script executed.
Any solutions would be greatly appreciated.
The script should always be included in your page, since you want this to run while you make the changes in the dropdown list..
<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID, currentVal, correctVal)
{
if(correctVal == currentVal)
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Live example at : http://www.jsfiddle.net/MVymF/
why are you putting this in the post event? you can just render this as standard javascript as part of the page.
On post , the page will be refreshing , ad on reloading you are not saving the selected value of the select box.
The select box is not keep selected after posting. You have to do that.
>Other
As the value of option change the display hide also gone.
Fix that
If no need to submit the page . use this
http://api.jquery.com/val/
check demo of select
Im trying to implement the search feature in my website.
when the search keyword is entered in the textbox, and the category combo is selected, the form will be Posted and the result will be shown on the same page.
what i want is to keep the selected category of the combo by default in the form after posted
For eg., If i select the category 'Automobiles' in the combo and click search, after form submit, the combo should show the automobiles as default selected option. Please help me. Any help will be appreciated
I assume you get categories from database.
you should try:
<?php
$categories = $rows; //array from database
foreach($rows as $row){
if($row['name'] == $_POST['category']){
$isSelected = ' selected="selected"'; // if the option submited in form is as same as this row we add the selected tag
} else {
$isSelected = ''; // else we remove any tag
}
echo "<option value='".$row['id']."'".$isSelected.">".$row['name']."</option>";
}
?>
Assuming that by "combo" you mean "A regular select element rendering as a drop down menu or list box" and not "A combobox that is a combination of a drop down menu and free text input":
When outputting the <option> elements, check the value against the submitted data in $_POST / $_GET and output selected (in HTML) or selected="selected" (in XHTML) as an attribute of the option element.
Here is the JQuery way I am using.
<select name="name" id="name">
<option value="a">a</option>
<option value="b">b</option>
</select>
<script type="text/javascript">
$("#name").val("<?php echo $_POST['name'];?>");
</script>
But this is only if you have jquery included in your webpage.
Regards
<?php
$example = $_POST["friend"];
?>
<form method="POST">
<select name="friend">
<option value="tom" <?php if (isset($example) && $example=="tom") echo ' selected';?>>Thomas Finnegan</option>
<option value="anna" <?php if (isset($example) && $example=="anna") echo ' selected';?>>Anna Karenina</option>
</select>
<br><br>
<input type="submit">
</form>
This solved my problem.
This Solved my Problem. Thanks for all those answered
<select name="name" id="name">
<option value="a">a</option>
<option value="b">b</option>
</select>
<script type="text/javascript">
document.getElementById('name').value = "<?php echo $_GET['name'];?>";
</script>
$countries_uid = $_POST['countries_uid'];
while($row = mysql_fetch_array($result)){
$uid = $row['uid'];
$country = $row['country_name'];
$isSelected = null;
if(!empty($countries_uid)){
foreach($countries_uid as $country_uid){//cycle through country_uid
if($row['uid'] == $country_uid){
$isSelected = 'selected="selected"'; // if the option submited in form is as same as this row we add the selected
}
}
}else {
$isSelected = ''; // else we remove any tag
}
echo "<option value='".$uid."'".$isSelected.">".$country."</option>";
}
this is my solutions of multiple select dropdown box after modifying Mihai Iorga codes
After trying al this "solves" nothing work. Did some research on w3school before and remember there was explanation of keeping values about radio. But it also works for Select option. See here an example. Just try it out and play with it.
<?php
$example = $_POST["example"];
?>
<form method="post">
<select name="example">
<option <?php if (isset($example) && $example=="a") echo "selected";?>>a</option>
<option <?php if (isset($example) && $example=="b") echo "selected";?>>b</option>
<option <?php if (isset($example) && $example=="c") echo "selected";?>>c</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
Easy solution:
If select box values fetched from DB then to keep selected value after form submit OR form POST
<select name="country" id="country">
<?php $countries = $wpdb->get_results( 'SELECT * FROM countries' ); ?>
<option value="">
<?php if(isset($_POST['country'])){echo htmlentities($_POST['country']); } else { echo "Select Country *"; }?>
</option>
<?php foreach($countries as $country){ ?>
<option <?php echo ($_POST['country'] == $country->country_name ? 'selected="selected"':''); ?> value="<?php echo $country->country_name; ?>"><?php echo $country->country_name; ?>
</option>
<?php } ?>
</select>