I have a problem which I'm not sure how to approach, I have a WP plugin which has a form, in the form I have a with result that could have varied amount of data (depending on what the user submits).
How can I add 'selected' to the selected item so when the user returns he can edit/view the item he selected?
<select name="supplier">
<option value="Supplier 1">Supplier 1</option>
<option value="Supplier 2">Supplier 2</option>
<option value="Supplier 3">Supplier 3</option>
<option value="Supplier 4">Supplier 4</option>
</select>
A loop comes to mind, shall I assign a number to each option? There may be 100 suppliers so it would need to count right?
I would use a loop like...
$theirChosenSupplier = $supplierVarFromDatabaseOrWherever;
?>
<select name="supplier">
foreach($allSuppliers as $individualSupplier) {
if($individualSupplier == $theirChosenSupplier) {
$selected = "selected";
} else {
$selected = "";
}
?><option value="<?php echo $individualSupplier; ?>" <?php echo $selected; ?>>
<?php echo $individualSupplier; ?>
</option>
<?php } ?>
</select>
This code isn't tested but should give you an idea. Apologies if I've misunderstood the question.
adding an id is always a good thing. Assuming this is wordpress generated and you don't have a loop already there is always the option of using javascript and maybe an onchange event.
I dont know if the form is submitted first or you do some other stuff but maybe:
<select id="foo">
<option id="provider_1">Provider 1</option>
<option id="provider_2">Provider 2</option>
</select>
<script type="text/javascript">
window.onload = function() {
var selectedValue = '<?php echo someEscapeFunction($_SESSION['id_provider']); // or _GET, _POST ?>';
document.getElementById('foo').selectedIndex = document.getElementById(selectedValue).index;
}
</script>
Related
<select name="title">
<selected value="<?php echo $title; ?>"><?php echo $title; ?></selected>
<option value="Mrs">Mrs.</option>
<option value="Ms">Ms.</option>
<option value="Mr">Mr.</option>
<option value="Dr">Dr.</option>
</select>
I am trying to read a value from a column Title in a MySQL database, which is suppose to read the value, whether it be Mr., Ms., Mrs., then compare it with the values in the drop-down list. It then lets the user select another title to then update the one stored in MySQL database.
I am creating a user profile. So when the user logs in and navigates to the view to edit a profile, he/she should be presented with a drop-down list containing the title he/she selected when registered. Then if he/she wants to they can change the title in the drop-down list and press the update button and it should now update to the new title in the database.
Change your <select> dropdown list in the following way,
<select name="title">
<option value="Mrs"<?php if($title == "Mrs"){ echo " selected='selected'"; } ?>>Mrs.</option>
<option value="Ms"<?php if($title == "Ms"){ echo " selected='selected'"; } ?>>Ms.</option>
<option value="Mr"<?php if($title == "Mr"){ echo " selected='selected'"; } ?>>Mr.</option>
<option value="Dr"<?php if($title == "Dr"){ echo " selected='selected'"; } ?>>Dr.</option>
</select>
There is no selected HTML tag. Use the selected attribute of the option tag:
selected
If present, this Boolean attribute indicates that the option is initially selected. If the <option> element is the descendant of a <select> element whose multiple attribute is not set, only one single <option> of this <select> element may have the selected attribute.1
So consider this example from the Examples section of the Mozilla Developer Network page for <select>:
<!-- The second value will be selected initially -->
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
Your example code can be updated similarly:
<select name="title">
<option value="Mrs" <?php if($title=="Mrs"){ echo "selected"; } ?>>Mrs.</option>
<option value="Ms" <?php if($title=="Ms"){ echo "selected"; } ?>>Ms.</option>
<option value="Mr" <?php if($title=="Mr"){ echo "selected"; } ?>>Mr.</option>
<option value="Dr" <?php if($title =="Dr"){ echo "selected"; } ?>>Dr.</option>
</select>
A simpler way to do this would be to process the names first, using array_reduce():
<?php
$title = 'Dr';
$names = array('Mrs','Ms','Mr','Dr');
$options = array_reduce($names,function($carry,$name) use ($title) {
return $carry .= '<option value="'.$name.'"'.($title == $name?' selected':'').'>'.$name.'.</option>';
});
?>
<select name="title">
<?php echo $options;?>
</select>
See it in action in this playground example.
1https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
I tried making dropdown readonly if the data exists in database. But when even if i make it readonly, user can change the values i mean dropdown values. so i changed it to disabled. but in this, i cannot receive the values after submission. Here is my code
<select name="sign" <?php echo empty($row['sign']) ? '' : 'readonly' ?> class="form-control">
<option value="<?php echo $row['sign']; ?>"><?php echo $row['sign']; ?></option>
<?php $m1 = mysqli_query($con, "SELECT * FROM signs");
while($m2 = mysqli_fetch_array($m1)) { ?>
<option value="<?php echo $m2['sign']; ?>"><?php echo $m2['sign']; ?></option>
<?php } ?>
</select>
how can i solve it?
i think the problem is this <?php echo empty($row['sign']) ? '' : 'readonly' ?>
maybe u can do this <?php echo (empty($row['sign']) ? '' : 'readonly'); ?>
One solution is when you make it disabled, to add another hidden input with the same name and value.
Other solution is to prevent user from changing the select, there are many javascript options, try this:
http://jsfiddle.net/qk2Pc/
HTML:
<select id="my_select">
<option>Option 1</option>
<option>Option 2</option>
</select>
JS:
my_condition = true;
var lastSel = $("#my_select option:selected");
$("#my_select").change(function(){
if(my_condition)
{
lastSel.attr("selected", true);
}
});
$("#my_select").click(function(){
lastSel = $("#my_select option:selected");
});
I have 3 drop down lists, all get there values from an array. I would like to change the selection of the second and third drop down lists when the first box has changed.
i.e.
<select id="first_box">
<option> options 1</option>
<option> options 2</option>
<option> options 3</option>
</select>
<select id="second_box">
<option> options 1</option>
<option> options 2</option>
<option> options 3</option>
</select>
<select id="third_box">
<option> options 1</option>
<option> options 2</option>
<option> options 3</option>
</select>
If you select option 3 in the first box, then change the second and third boxes to option 3
Here's the code I have so far
jQuery(document).ready(function($){
$('#font-name').change(function($){
alert('first box has been changed');
});
});
UPDATE:
Sorry I should of mentioned that the 2nd and 3rd values would be different, I just used the option 1,2, 3 as an example. SORRY.
Here's my actual selection box code
<select id="font-name" name="layout_options[h1_font_name]">
<?php foreach( $fonts as $key => $font ): ?>
<option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>
<?php endforeach; ?>
</select>
<select id="font-font" name="layout_options[h1_font_font]">
<?php foreach( $fonts as $key => $font ): ?>
<option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $font['font']; ?>"><?php echo $font['font']; ?></option>
<?php endforeach; ?>
</select>
<select id="font-css" name="layout_options[h1_font_css]">
<?php foreach( $fonts as $key => $font ): ?>
<option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $font['css']; ?>"><?php echo $font['css']; ?></option>
<?php endforeach; ?>
</select>
Use change event to select the current value and set to other one
$('#first_box').change(function(){
$("select").not(this).val(this.value);
});
DEMO
IF the drop down values are diff from other then You have to use index for current selected option
$('#first_box').change(function () {
$("select").not(this).find('option:nth-child(' + ($(this).find('option:selected').index() + 1) + ')').prop('selected', true);
});
DEMO
If you need only 2 drop down for knowing ID
$('#first_box').change(function () {
$("#second_box,#third_box").find('option:nth-child(' + ($(this).find('option:selected').index() + 1) + ')').prop('selected', true);
});
You will need to first add some values to your HTML, so you will have something like this:
HTML:
<select id="first_box">
<option value="">-- Please select a value --</option>
<option value="option1">options 1</option>
<option value="option2">options 2</option>
<option value="option3">options 3</option>
</select>
<select id="second_box">
<option value="">-- Please select a value --</option>
<option value="option1">options 1</option>
<option value="option2">options 2</option>
<option value="option3">options 3</option>
</select>
<select id="third_box">
<option value="">-- Please select a value --</option>
<option value="option1">options 1</option>
<option value="option2">options 2</option>
<option value="option3">options 3</option>
</select>
Javascript:
jQuery(function($){
$('#first_box').change(function () {
var first_box_value = $(this).val();
$('#second_box').val(first_box_value);
$('#third_box').val(first_box_value);
});
});
JSfiddle example: http://jsfiddle.net/7q4ct/
Try
jQuery(document).ready(function($){
$('#first_box').change(function($){
var SelectVal=$(this).val();
$('#second_box,#third_box').val(SelectVal);
});
You're looking for what's called a chained select. Here's a php/ajax version:
Chained Select Boxes (Country, State, City)
you have to try something like below i.e try to append dynamically when ever you select ay item from firs drop down
$('#ddl1').change(function () {
//empty lists 2 and 3
$('#ddl2').html("");
$('#ddl3').html("");
var option_selected = $('option:selected', this).val();
//populate ddl2
$.each(data[option_selected]['Cities'], function (index, element) {
$('#ddl2').append($('<option>', {
value: element
}).text(element));
});
//populate ddl3
$.each(data[option_selected]['States'], function (index, element) {
$('#ddl3').append($('<option>', {
value: element
}).text(element));
});
});
Please look at the Cascading Dropdown
With example
var drop2 = $("select[name=drop2] option"); // the collection of initial options
$("select[name=drop1]").change(function(){
var drop1selected = parseInt(this.value); //get drop1 's selected value
$("select[name=drop2]")
.html(drop2) //reset dropdown list
.find('option').filter(function(){
return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value
}).remove(); // remove
});
http://jsfiddle.net/HTEkw/
Hope this helps...
Try this
$(document).ready(function()
{
$("#first_box").change(function()
{
var sel = $(this).val();
$("#second_box").val(sel);
$("#third_box").val(sel);
});
});
Fiddle: http://jsfiddle.net/eLtNG/
$('#first_box').change(function($){
if($('#first_box').val()=='option 3'){
$('#second_box, #third_box').val('option 3');
}
});
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
});
the scenario is this: see select below
<form name="limit">
<select name="limiter" onChange="limit(this.value)">
<option selected="selected"> </option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</form>
I want whenever any option is selected for 3 things to happen:
1.) js limit() function is called which all it does its takes current url, adds new query parameter 'limit' with the user selected value eg:
http://localhost/blahblah/apps/category.php?pg=1&catId=3021&limit=5
(this will cause the category.php page to be hit and # of product displayed limited to the value selected by user)
2.)Once the url is hit, it reloads but i DONT want the value selected to reset back to the default (which it currently does). I want it to reflect the users selection after page reload.
3.) Also, when i move to the next page (pagination), i would like the state to be carried ova to the next page (ie. remembering the user selection).
Just assign the selected value using PHP:
<form name="limit">
<select name="limiter" onChange="limit()">
<option <?php if(!isset($_POST['limiter'])) echo ' selected="selected"'; ?>> </option>
<option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 5) echo ' selected="selected"'; ?> value="5">5</option>
<option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 10) echo ' selected="selected"'; ?> value="10">10</option>
<option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 15) echo ' selected="selected"'; ?> value="15">15</option>
</select>
</form>
As the code gets hard to read, you could do a loop instead with PHP:
<form name="limit">
<select name="limiter" onChange="limit()">
<option <?php if(!isset($_POST['limiter'])) echo ' selected="selected"'; ?>> </option>
<?php foreach(array(5, 10, 15) as $p): ?>
<option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == $p) echo ' selected="selected"'; ?> value="<?php echo $p; ?>">
<?php echo $p; ?>
</option>
<?php endforeach; ?>
</select>
</form>
<script type="text/javascript">
function limit(value)
{
url = "localhost/yourapp?limiter="+value;
}
</script>
<form name="limit">
<select name="limiter" onChange="limit(this.value)">
<option> </option>
<option value="5" <?php if($_REQUEST['limiter'] == 5) {echo "selected";}?>>5</option>
<option value="10" <?php if($_REQUEST['limiter'] == 10) {echo "selected";}?>>10</option>
<option value="15" <?php if($_REQUEST['limiter'] == 15) {echo "selected";}?>>15</option>
</select>
</form>
I am using $_REQUEST here because I don't know your form's method. Use accordingly.
Tatu Ulmanen's answer handles the part of displaying select. To do the pagination part, simply pass the limit as a parameter in the query string.
For example, if you're currently using page links that look like this:
1
Change them to include your limit parameter so it gets passed over:
1
Just make sure to change your pagination code to account for the fact that each page is only "limit" items long. To help you do that, I need to know how you were doing your pagination.
can you check whether it works?
<script type="text/javascript">
function limit(myvalue)
{
location.href="http://yoursite?limit="+myvalue;
}
function querySt() {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == 'limit') {
for (var idx=0;idx<document.getElementById('limiter').options.length;idx++) {
if (document.getElementById('limiter').value==ft[1]) {
document.getElementById('limiter').selectedIndex=idx;
}
}
}
}
}
</script>
</head>
<body onload="querySt()">
<form name="limits">
<select onchange="limit(this.value)" id="limiter">
<option selected="selected"> </option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</form>
</body>