I am trying to achieve something via php.
Here there are couple of options.
<select class="custom-select" id="inputGroupSelect01">
<option selected="">Select Clusters ...</option>
<option value="math-related">Math Related</option>
<option value="science-related">Science Related</option>
</select>
There are Group of subject fields which will appear when the options are changed respectively.
<div class="form-row pb-5" id="math-related"">
<div class="form-group col-md-3">
<input type="number" class="form-control" id="num1" placeholder="English">
</div>
<div class="form-group col-md-3">
<input type="number" class="form-control" id="num2" placeholder="Math">
</div>
<div class="form-group col-md-3">
<input type="number" class="form-control" id="num3" placeholder="Science">
</div>
<div class="form-group col-md-3">
<input type="number" class="form-control" id="num4" placeholder="Computer">
</div>
</div>
When the option is changed to Math related OR Science Related option, the related 5-6 subject fields will be populated like image below. Some might have 5, some might have 8.
How to refresh the page and load the new sets of input fields according to selection done via PHP?
Example Image for fields
First of all change your select dropdown with your page url + parameter and make sure to replace YOUR_PAGE_URL with actual url as follows -
<select onChange="window.location.href=this.value" class="custom-select" id="inputGroupSelect01">
<option value="">Select Clusters ...</option>
<option value="YOUR_PAGE_URL?topic=math-related">Math Related</option>
<option value="YOUR_PAGE_URL?topic=science-related">Science Related</option>
</select>
After then just do a GET parameter checking on your page to populate your fields like -
if( issset($_GET['topic']) ){
if( $_GET['topic'] == 'math-related' ){
echo "Add your math related above 5-8 fields html here.";
}elseif( $_GET['topic'] == 'science-related' ){
echo "Add your science related above 5-8 fields html here.";
}
}
Related
The scenario is, I have 3 level user (Employer,Manager,Cashier), if the employer login the page, the employer just can see Manager and Cashier option in the select box;if the manager login the page, the manager just can see Cashier option in the select box
User level number I have stored in this variable $user_level, when the user login the id of the user will record in this variable $user_level. In the user value I have set the user level Employer id is 1, Manager id is 2, Cashier id is 3. For example, when the user level 1 (Employer) login the page, the option just can show Manager and Cashier option.When the user level 2 (Manager) login the page, the option just can Cashier option. My problem is how to change below the coding to if/else for conditional option ?
I have declared $user_level = $row['user_level'];
Below is my code:
<div class="form-group col-lg-6">
<label class="control-label col-lg-4">Position<span style="color:red;"> *</span></label>
<div class="col-lg-7">
<select class="form-control required" id="position" name="position">
<option value="">Please Select</option>
<option value="2">Manager</option>
<option value="3">Cashier</option>
</select>
<br>
</div>
</div>
Below the coding is check the user login current position(user level number),this part in the future will hidden:
<div class="form-group col-lg-6">
<label class="control-label col-lg-4">Current Login User Level<span style="color:red;"> *</span></label>
<div class="col-lg-7">
<input disabled type="text" class="form-control required" id="user_level" name="user_level" value="<?php echo $user_level; ?>">
</div>
</div>
Below is my output example:
Hope someone can guide me to solve this problem. Thanks a lot.
You can add if-else logic inline with the options:
<?php if($user_level != 3) { ?>
<div class="form-group col-lg-6">
<label class="control-label col-lg-4">Position<span style="color:red;"> *</span></label>
<div class="col-lg-7">
<select class="form-control required" id="position" name="position">
<option value="">Please Select</option>
<?php if($user_level == 1) { ?>
<option value="2">Manager</option>
<?php } ?>
<?php if($user_level == 1 || $user_level == 2) { ?>
<option value="3">Cashier</option>
<?php } ?>
</select>
<br>
</div>
</div>
<?php } ?>
Updated for revised requirements.
I am android developer and making one admin panel for one of my android application. I know very basic PHP. currently I am displaying input field with value and user can change with text input and can save value with submit button. Its like below
<div class="form-group">
<label class="col-md-3 control-label">Admob On/off :-</label>
<div class="col-md-6">
<input type="text" name="ads_status" id="ads_status" value="<?php echo $settings_row['ads_status'];?>" class="form-control">
</div>
</div>
Instead of input value I want show dropdown menu with two item called on and off. When user load page it should show value based on previous save. Like if user have made setting on it must display on. I am displaying value now from database. Let me know if anyone can suggest me what Should I do for it. Thanks
<div class="form-group">
<label class="col-md-3 control-label">Admob On/off :-</label>
<div class="col-md-6">
<select class="form-control " type="text" name="ads_status" >
<option value="on" <?php if($settings_row['ads_status']== 'on') echo "selected = 'selected'" ?> >On</option>
<option value="off" <?php if($settings_row['ads_status'] == 'off') echo "selected = 'selected'" ?> >Off</option>
</select>
</div>
</div>
I hope this will hep you.
enter image description hereI am new to coding. I just started building a website and I am currently working on the profile page. I wanted the input fields to be populated by the information the user has provided (see attached picture). This I have achieved.
My problem now is... I can't spit information from the database to the select tag.
For the other input fields, I just had to echo the data spooled from the database as seen in my HTML below:
<div class="col-sm-6 white-bg">
<div class="row">
<div class="col-sm-6">
<label>
<span class="text-left">FIRST NAME</span>
<input type="text" name="fname" value="<?php echo $first_name ?>" disabled>
</label>
</div>
<div class="col-sm-6">
<label>
<span class="text-left">LAST NAME</span>
<input type="text" name="lname" value="<?php echo $last_name ?>" disabled>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>
<span class="text-left">GENDER</span>
<select name="gender">
<option value="" disabled hidden selected>--Select--</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Others">Others</option>
</select>
</label>
</div>
<div class="col-sm-6">
<label>
<span class="text-left">DATE OF BIRTH</span>
<input type="DATE" name="dob" value="<?php echo $dob ?>">
</label>
</div>
</div>
</div>
But I can't do the same for the select tag. How do I have an option selected based on the information the user has provided such that the Male option is selected if the user entered male or the the Female option is selected if the user entered Female.
You should add the keyword based on the value returned from your DB.
So in your code add something like
-- For your default select option do
<?php echo(empty($theGender)?" selected":""); ?>
-- For Male/Female do, checking for value you stored
<option value="Female"<?php echo(($theGender === "female")?" selected":""); ?> >Female</option>
I'm working on a profile update page and i have a form field where users can select enabled or disabled. When i echo the value, it has a duplicate and can be confusing for the user. How can i get rid of the duplicate?
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Change Status</label>
<div class="col-sm-9">
<select class="form-control btn-danger" id="status" name="status">
<option value="<?php echo $status ?>"><?php echo $status ?></option>
<option value="Disabled">Disabled</option>
<option value="Enabled">Enabled</option>
</select>
</div>
</div>
As you can see, if the status is enabled and i hit the select menu its gonna say Enabled twice, same thing for disabled.
The only thing i thought of was to have another field labeled current status and have the select menu to change status.
I really dont want to do that.
<div class="form-group">
<label for="currentstatus" class="col-sm-3 control-label">Current Status</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="currentstatus" name="currentstatus" value="<?php echo $status ?>">
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Change Status</label>
<div class="col-sm-9">
<select class="form-control btn-danger" id="status" name="status">
<option value="<?php echo $status ?>"><?php echo $status ?></option>
<option value="Disabled">Disabled</option>
<option value="Enabled">Enabled</option>
</select>
</div>
</div>
This worked for me:
<option <?php if ($status=="Disabled") echo " selected"; ?>>Disabled</option>
<option <?php if ($status=="Enabled") echo " selected"; ?>>Enabled</option>
Instead of outputting the selected value as another option, output it as the selected attribute of an existing option. Something like this:
<select class="form-control btn-danger" id="status" name="status">
<option value="Disabled" <?php echo ($status == "Disabled") ? "selected" : ""; ?>>Disabled</option>
<option value="Enabled" <?php echo ($status == "Enabled") ? "selected" : ""; ?>>Enabled</option>
</select>
There are likely a variety of ways to achieve the same end result, but the point is to not add options based on the data you have but instead use that data to determine which of the existing, finite, hard-coded options you already have should be selected.
Here is some jQuery that will let you change the value of the select box.
function setStatusSelect(val) {
$("select#status").val(val);
}
setStatusSelect('Enabled');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Change Status</label>
<div class="col-sm-9">
<select class="form-control btn-danger" id="status" name="status">
<option value="Disabled">Disabled</option>
<option value="Enabled">Enabled</option>
</select>
</div>
</div>
If you include the Jquery function at the top of the page (so that it loads quickly) then you can do something like this:
<?php
print("<script type=\"text/javascript\">");
print("setStatusSelect(".$status.")");
print("</script>");
?>
to set the value.
I haven't tested the PHP portion, but I know the jQuery portion works.
I am trying to make a input form dropdown using bootstrap(BootStrap version 2.3.2), but my form dropwdown make a irrelevant space with it.
This is my code:
<div class="control-group" >
<label class="control-label">Event Name</label>
<div class="controls">
<div class="input-prepend">
<? $result=$this->db->get("EventType")->result();
foreach($result as $res){
$event[$res->Id]=$res->Name;
}
$event["Select"]="Select";
$js = 'id="events" class="input-large" onChange="some_function();"';
echo form_dropdown("event_type",$event, 'Select',$js); ?>
</div>
<? echo '<span style=color:red>'.form_error('event_name').'</span>'; ?>
</div>
</div>
Rendered HTML:
<div class="control-group">
<label class="control-label">Event Name</label>
<div class="controls">
<div class="input-prepend">
<select name="event_type" id="events" class="width" onChange="some_function();">
<option value="6">Music</option>
<option value="7">Seminar</option>
<option value="8">Sports</option>
<option value="9">Movie</option>
<option value="11">Conference</option>
<option value="Select" selected="selected">Select</option>
</select>
</div> <span style=color:red></span>
</div>
</div>
This is my output image
There is a gap between button of a dropdown and input text(Right side gap of the text). How can I remove this gap?
But, I want to make this input form dropdown like as
No extra space of right side.
May be there is a style in your css for select or textarea.
Whatever, You can use this style for select.
.select,
textarea,
input[type="text"]{
padding:0px;
}
I hope you will success.So,Try it.