So I'm trying to style the select tag using bootstrap, but this is the output that I'm getting.. https://ibb.co/iyycak
And this is how I want it to look like.. https://ibb.co/eMkC85
<div class="col-sm-4">
<label for="orderReasonCode">Order Reason :</label>
<select class="form-control" name="orderReasonCode" id="orderReasonCode" title="Order reason" data-width="250px">
<?php echo getTableDD($DB->pre . "order_reason", "orderReasonCode", "orderReasonName", $_POST['orderReasonCode']); ?>
</select>
Related
I'm about to change a script, and right know the script are using an <select> with one options and echo to be used to show the products.
Now I'll like to change the <select> to a <input> so I can scan a barcode, and the information from the product should be added to the DB as it is right now, but I'm lost, I have used several hours to figuere out how to change it, I thought the solution was to use a hidded but then I can't add the first knowen product to my list.
Could someone please help me? :)
I've tried to use more boxes to get the products, but that was a big mess.
<div class="col-md-6">
<div class="form-group">
<label for="date">Product Name</label>
<select class="form-control select2" name="prod_name" tabindex="1" autofocus required>
<?php
$branch=$_SESSION['branch'];
$cid=$_REQUEST['cid'];
include('../dist/includes/dbcon.php');
$query2=mysqli_query($con,"select * from product where branch_id='$branch' order by prod_name")or die(mysqli_error());
while($row=mysqli_fetch_array($query2)){
?>
<option value="<?php echo $row['prod_id'];?>"><?php echo $row['prod_name']." Available(".$row['prod_qty'].")";?></option>
<?php }?>
</select>
<input type="hidden" class="form-control" name="cid" value="<?php echo $cid;?>" required>
</div><!-- /.form group -->
</div>
<div class=" col-md-2">
<div class="form-group">
<label for="date">Quantity</label>
<div class="input-group">
<input type="number" class="form-control pull-right" id="date" name="qty" placeholder="Quantity" tabindex="2" value="1" required>
</div><!-- /.input group -->
</div><!-- /.form group -->
</div>
<div class="col-md-2">
<div class="form-group">
<label for="date"></label>
<div class="input-group">
<button class="btn btn-lg btn-primary" type="submit" tabindex="3" name="addtocart">+</button>
</div>
</div>
The code should be changed to use a <input> or something simular, so I can use a barcode scanner to add my items to a list.
What I did to get my result was:
I changed the prod_id to be the barcode, and on scan the form is submitted to a temp_db, to show every items, and then added a "finish db" called inStock, and everything was as it should be! :)
/Kenneth
I am building a application form and I want to add a field for visitors to select a date and time. How would I be able to add that to the drop down field that I have added so far. I thinking for a calendar and time dropdown would work for this type of form? I have added the div tag below.
<div class="col-md-12 vehicle-assessment">
<h6>Hirer Details </h6>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
</div>
</div>
If you really want to use a dropdown menu this would be done like this assuming you have a list of DateTime objects. Time would be done in a similar way.
<div class="col-md-12 vehicle-assessment">
<h6>Hirer Details </h6>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
</div>
<div class="form-group">
<label>Date</label>
<select id="date">
<option value="">--Please choose an option--</option>
<?php
// Assuming $dates is a list of DateTime Objects
foreach $date in $dates {
echo "<option value='" . $date->getTimestamp() . "'>" . $date->format('Y-m-d') . "</option>";
}
?>
</select>
</div>
</div>
But I'd suggest using the inputs time and date. If you have specific time frames you want people to insert this can be added by min and max. If you need additional constraints you could alway write some JS-Code to enforce no sunday or something like that.
<div class="col-md-12 vehicle-assessment">
<h6>Hirer Details </h6>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
</div>
<div class="form-group">
<label>Date</label>
<input type="date" name="date"
value="2018-07-22"
min="2018-01-01" max="2018-12-31" />
</div>
<div class="form-group">
<label>Date</label>
<input type="time" name="time"
min="0:00" max="24:00" required />
</div>
</div>
You can use jQuery datepicker
http://jqueryui.com/datepicker/
or you can use
<input type="date" name="date" />
but the last solution wont work for all browsers, if you want to use cross browser than you should use datepicker plugin or any other plugins available on internet
I have a form with multiple checkboxes which are stored as different columns in a database.
I want to display them as a single column in a webpage, how can I do that?
HTML Form:
<div class="form-group">
<label class="col-md-2 control-label">R-11</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="r11" value="R11">
</div>
<label class="col-md-2 control-label">E-1</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="e1" value="E1">
</div>
<label class="col-md-2 control-label">E-2</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="e2" value="E2">
</div>
<label class="col-md-2 control-label">E-3</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="e3" value="E3">
</div>
<label class="col-md-2 control-label">L-1</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="l1" value="L1">
</div>
<label class="col-md-2 control-label">R-12</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="r12" value="R12">
</div>
<label class="col-md-2 control-label">C-1</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="c1" value="C1">
</div>
<label class="col-md-2 control-label">C-2</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="c2" value="C2">
</div>
<label class="col-md-2 control-label">C-3</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="c3" value="C3">
</div>
</div>
PHP Code, generating the rows and columns:
<?php
while($maininfo=mysqli_fetch_assoc($records)){
echo "<tr>";
echo "<td>".$maininfo['run_number']."</td>";
echo "<td>".$maininfo['date']."</td>";
echo "<td>".$maininfo['station']."</td>";
echo "<td>".$maininfo['time_of_call']."</td>";
echo "<td>".$maininfo['onscene']."</td>";
echo "<td>".$maininfo['inservice']."</td>";
echo "<td>".$maininfo['address']."</td>";
echo "<td>".$maininfo['category1']."</td>";
echo "<td>".$maininfo['category2']."</td>";
echo "<td>".$maininfo['info']."</td>";
echo "<td>".$maininfo['shift']."</td>";
echo "<td>".$maininfo['name']."</td>";
echo "<td>".$maininfo['r11']."</td>";
echo "<td>".$maininfo['e1']."</td>";
echo "<td>".$maininfo['e2']."</td>";
echo "<td>".$maininfo['e3']."</td>";
echo "<td>".$maininfo['l1']."</td>";
echo "<td>".$maininfo['r12']."</td>";
echo "<td>".$maininfo['c1']."</td>";
echo "<td>".$maininfo['c2']."</td>";
echo "<td>".$maininfo['c3']."</td>";
echo "</tr>";
}//end while
?>
I would like the table in the website to show all of the r-11 thru c-3 in one column. How can I do that? I have tried merging a couple of them together like:
echo "<td>".$maininfo['r11', 'e1']."</td>";
However, that doesn't work.
This represents the output from one database column:
$maininfo['r11']
This is two:
$maininfo['r11'] . $maininfo['e1']
Wrap those two in an HTML table cell:
"<td>" . $maininfo['r11'] . $maininfo['e1'] . "</td>"
Repeat as necessary for however you want to design the HTML output. Add spaces, separators, more HTML markup, etc.
Basically, the values are still individual things. You simply need to concatenate the output together into the HTML structure you want. It's not up to the database to do this, or the array structure. They have their own jobs to do. It's up to you to build your output strings.
echo "<td>".$maininfo['r11'].$maininfo['e1']."</td>";
I have a form which is posted via php and if I get a error it highlights only the input field red. What I would like to do or know if there is a way to do is highlight the whole div field which contains the select field and everything and show that this whole div has a error.
Here is my html code.
<div class="form-group">
<div class="<?php if(form_error('fullname')!= null){echo ' has-error';} ?>">
<label class="col-md-4 control-label">
<?php echo lang("full_name"); ?>
</label>
<div class="col-md-8">
<input type="text" name="fullname" class="form-control" value="<?php if (isset($userinfo['Fullname'])) {echo $userinfo['Fullname'];} ?>" placeholder="<?php echo lang(" fullname "); ?>">
</div>
</div>
</div>
Right now it only highlights input field but I want it to highlight the whole div form-group.
Since you are using bootstrap, you could try this. Please change
<div class="form-group">
to
<div class="form-group alert alert-danger">
Try this.
<div class="form-group <?php if(form_error('fullname')!= null){echo ' bg-danger';} ?>">
<div class="<?php if(form_error('fullname')!= null){echo ' has-error';} ?>">
<label class="col-md-4 control-label">
<?php echo lang("full_name"); ?>
</label>
<div class="col-md-8">
<input type="text" name="fullname" class="form-control" value="<?php if (isset($userinfo['Fullname'])) {echo $userinfo['Fullname'];} ?>" placeholder="<?php echo lang(" fullname "); ?>">
</div>
</div>
</div>
What I have done is used, .bg-danger, one of the Bootstrap Contextual Classes based on the same if condition you have to apply the has-error class.
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.