This is how my page looks like.
This is code for same.
<table class="table table-bordered">
<tbody>
<tr>
<td>
<h4>Name & address</h4>
<div class="Name">
<input ng-model="Name" type="text" placeholder="Name" class="form-control"/>
</div>
<div class="Name">
<textarea class="form-control" ng-model="Address" placeholder="Address.." rows="4"></textarea>
</div>
<div class="Name">
<select ng-init="City=Chhatarpur" ng-model="City" class="form-control">
<option value="" ng-selected="selected">City</option>
<option value="Chhatarpur" ng-selected="selected">Chhatarpur</option>
</select>
</div>
<div class="Name">
<!--<input type="text" value="+91" class="form-control" size="2" disabled/>-->
<input ng-model="Mobile" type="text" placeholder="Mobile Number" class="form-control" maxlength="10"/>
</div>
</td>
<td>
<h4>Date/time of delivery</h4>
<div ng-if="(CurrentHour>=18 && CurrentHour<24) || (CurrentHour>=1 && CurrentHour<9)" >
<input type="radio" ng-model="order.delivery" value="5"> Tomorrow (09:00-12:00) <br/>
<input type="radio" ng-model="order.delivery" value="6"> Tomorrow (12:00-15:00) <br/>
<input type="radio" ng-model="order.delivery" value="7"> Tomorrow (15:00-18:00) <br/>
<input type="radio" ng-model="order.delivery" value="8"> Tomorrow (18:00-21:00)
</div>
<h4>Payment option </h4>
<input type="radio" ng-model="order.payment" value="Cash on delivery"> Cash on delivery <br/>
<input type="radio" ng-model="order.payment" value="Card on delivery"> Card on delivery
<button style="margin-top:20px;" type="button" class="btn btn-lg btn-primary btn-block" ng-click="">Place order</button>
</td>
</tr>
</tbody>
</table>
It looks like left column taking more width than right one. I want both columns should use 50% of screen width.
What is wrong here. Can some-one please help.
Give each td a width of 50%.
<table class="table table-bordered">
<tbody>
<tr>
<td width="50%">
<h4>Name & address</h4>
<div class="Name">
<input ng-model="Name" type="text" placeholder="Name" class="form-control"/>
</div>
<div class="Name">
<textarea class="form-control" ng-model="Address" placeholder="Address.." rows="4"></textarea>
</div>
<div class="Name">
<select ng-init="City=Chhatarpur" ng-model="City" class="form-control">
<option value="" ng-selected="selected">City</option>
<option value="Chhatarpur" ng-selected="selected">Chhatarpur</option>
</select>
</div>
<div class="Name">
<!--<input type="text" value="+91" class="form-control" size="2" disabled/>-->
<input ng-model="Mobile" type="text" placeholder="Mobile Number" class="form-control" maxlength="10"/>
</div>
</td>
<td width="50%">
<h4>Date/time of delivery</h4>
<div ng-if="(CurrentHour>=18 && CurrentHour<24) || (CurrentHour>=1 && CurrentHour<9)" >
<input type="radio" ng-model="order.delivery" value="5"> Tomorrow (09:00-12:00) <br/>
<input type="radio" ng-model="order.delivery" value="6"> Tomorrow (12:00-15:00) <br/>
<input type="radio" ng-model="order.delivery" value="7"> Tomorrow (15:00-18:00) <br/>
<input type="radio" ng-model="order.delivery" value="8"> Tomorrow (18:00-21:00)
</div>
<h4>Payment option </h4>
<input type="radio" ng-model="order.payment" value="Cash on delivery"> Cash on delivery <br/>
<input type="radio" ng-model="order.payment" value="Card on delivery"> Card on delivery
<button style="margin-top:20px;" type="button" class="btn btn-lg btn-primary btn-block" ng-click="">Place order</button>
</td>
</tr>
</tbody>
</table>
JSFiddle Here
use column width classes since you are using the class table table-bordered I guess you are using bootstrap css.
if you are using bootstrapv3.0 and above use below
<div class="col-md-6">
// LEFT COLUMN CODE GOES HERE
</div>
<div class="col-md-6">
// RIGHT COLUMN CODE GOES HERE
</div>
if you are using less than bootstrapv3.0
<div class="span6">
// LEFT COLUMN CODE GOES HERE
</div>
<div class="span6">
// RIGHT COLUMN CODE GOES HERE
</div>
Related
I am developing my own website/application but I have a display problem on a title.
The web browser edge is in foreground and hide my title (Please, look at the picture with red rectangle to understand). The source code is bellow. I am doing something wrong ? I am using Bootstrap. Should I add CSS ?
<body>
<div id="divformulaire">
<h3>HERE IS MY PROBLEM:</h3>
<form method="post" action="requetes/creerMission.php" role="form" id="formulaire">
<hr/>
<input class="form-control" id="nothing1" name="nothing1" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing2" name="nothing2" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing3" type="number" name="nothing3" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing4" type="text" name="nothing4" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing5" type="text" name="nothing5" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing6" type="number" name="nothing6" placeholder="Nothing" required>
<hr/>
<span class="label label-default">Nothing</span>
<select class="form-control form-control-sm" id="nothing7" type="text" name="nothing7">
<option>Non</option>
<option>Oui</option>
</select>
<hr/>
<div class="form-group">
<label for="annonce">Nothing</label>
<textarea class="form-control" id="nothing8" name="nothing8" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="create" type="submit">Nothing</button>
</form>
</div>
</body>
Title problem
Your problem is that your div with the id of #divformulaire doesn't have any margin on the top. If you want the title to always be visible, you need to offset the entire div by roughly the amount of the browser topbar, where the URL is.
#divformulaire {
margin-top: 50px}
<body>
<div id="divformulaire">
<h3>HERE IS MY PROBLEM:</h3>
<form method="post" action="requetes/creerMission.php" role="form" id="formulaire">
<hr/>
<input class="form-control" id="nothing1" name="nothing1" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing2" name="nothing2" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing3" type="number" name="nothing3" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing4" type="text" name="nothing4" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing5" type="text" name="nothing5" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing6" type="number" name="nothing6" placeholder="Nothing" required>
<hr/>
<span class="label label-default">Nothing</span>
<select class="form-control form-control-sm" id="nothing7" type="text" name="nothing7">
<option>Non</option>
<option>Oui</option>
</select>
<hr/>
<div class="form-group">
<label for="annonce">Nothing</label>
<textarea class="form-control" id="nothing8" name="nothing8" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="create" type="submit">Nothing</button>
</form>
</div>
</body>
I've been trying to align the textboxes but i can't seem to get it right. i also tried to google it but i can't figure it out.
<form name="salary" id="salary">
<b> <tr>
Name: <input type="text"> <br>
Sales: <input type="text" name="sales" id="sales"> </td>
<br> <br> <br>
Commission: <input type="text" name="comm" id="comm">
Housing & Utilities: <input type="text" name="housing" id="housing">
<br>
Gross Pay: <input type="text" name="gross" id="gross">
Food & Clothing: <input type="text" name="food"
id="food">
<br>
Deductions: <input type="text" name="deduction" id="deduction">
Entertainment: <input type="text" name="entertainment" id="entertainment">
<br>
Net Pay: <input type="text" name="net" id="net">
Miscellaneous: <input type="text" name="mis" id="mis">
<br>
<input type="button" value="Calculate" onclick="bonus()" >
<input type="reset" value="reset">
<b> </form>
To better alignment you need to use css.
You can use in 2 way;
Pure CSS
CSS Frameworks (Bootstrap, Tailwind ...)
I will share second solution which is generated by bootstrap.
If you prefer first one that would be great loss of time so frameworks better if you know the basics of html and css.
First Step: You need to embed bootstrap files to your html file.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Second Step: Create a bootstrap form (it is actually same form but css specifications would be inheritance by bootstrap, so that's mean you don't need a lot of lines css)
<form>
<!--Creates a row with 12 columns-->
<div class="row">
<!--Use 12/12 columns that's mean 1 row-->
<div class="col-md-12">
<!--Form Group allows you a define label dependent to input and some extra features-->
<div class="form-group">
<!--Label's for and input's Id matches-->
<label for="exampleInputEmail1">Name</label>
<!--Placeholder is very useful, you can route user.-->
<input type="text" class="form-control" id="exampleInputName" aria-describedby="emailHelp"
placeholder="Enter your name">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputEmail1">Surname</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter your surname">
</div>
</div>
<!--Use 6/12 columns that's mean a half row-->
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Commission</label>
<input type="text" class="form-control" id="exampleName" placeholder="Enter Commission">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Housing & Utilities</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Gross Pay</label>
<input type="text" class="form-control" id="exampleName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Food & Clothing</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Deductions</label>
<input type="text" class="form-control" id="exampleName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Entertainments</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
For detail bootstrap forms manual: https://getbootstrap.com/docs/4.2/components/forms/
Codepen: https://codepen.io/bananamaster/pen/eYYoQPw
People tend to act iffy about HTML tables, but this is a perfectly good situation to use a table for
/* kindly match container width for aesthetics */
#salary, #salary table, #salary input[type="text"] {
width: 100%;
box-sizing: border-box;
}
<form name="salary" id="salary"><table><tr>
<td colspan="2"><!-- these two are two-cell-wide -->
Name:
<br><input type="text">
</td>
</tr><tr>
<td colspan="2">
Sales:
<br><input type="text">
</td>
</tr><tr>
<td width="50%">
Commission:
<br><input type="text">
</td>
<td width="50%">
Housing & Utilities:
<br><input type="text">
</td>
</tr><tr>
<td><!-- no need to specify width from hereon -->
Gross Pay:
<br><input type="text">
</td>
<td>
Food & Clothing:
<br><input type="text">
</td>
</tr><tr>
<td>
Deductions:
<br><input type="text">
</td>
<td>
Entertainment:
<br><input type="text">
</td>
</tr><tr>
<td>
Net Pay:
<br><input type="text">
</td>
<td>
Miscellaneous:
<br><input type="text">
</td>
</tr><tr>
<td colspan="2"><!-- this one's also wider -->
<input type="button" value="Calculate" onclick="bonus()" />
<input type="reset" value="Reset"/>
</td>
</tr></table></form>
I have the following code for my form. I am trying to make it responsive but it is not possible. When I add this code I have to scroll horizontally which I do not want. I want the whole table to fit in to my desktop without scrolling! any help?
<form id="calculateform_id" name="calculateform_name" method="post" onsubmit="return false;">
<div>
<div class="bs-example">
<table class="table table-bordered">
<thead>
<tr class="info">
<th></th>
<th><h4>Member A</h4></th>
<th><h4>Member B</h4></th>
<th><h4>Member C</h4></th>
<th><h4>Member D</h4></th>
</tr>
</thead>
<tbody>
<tr class="active">
<th>Name</th>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member1_name">
</div>
</td>
<td><div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member2_name">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member3_name">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member4_name">
</div>
</td>
</tr>
<tr class="active">
<th>Opportunity Cost / Salary</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member1_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member1_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member2_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member2_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member3_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member3_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member4_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member4_ocs" value="100,000" required="required">
</div>
</td>
</tr>
<tr class="active">
<th>Hours Worked</th>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member1_hw_id" name="member1_hw" onkeypress="return inputNumber(event);" value="30" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member2_hw_id" name="member2_hw" onkeypress="return inputNumber(event);" value="40" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member3_hw_id" name="member3_hw" onkeypress="return inputNumber(event);" value="50" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member4_hw_id" name="member4_hw" onkeypress="return inputNumber(event);" value="60" required="required">
</div>
</td>
</tr>
<tr class="active">
<th>Invested Cash</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member1_ic_id" name="member1_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member2_ic_id" name="member2_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member3_ic_id" name="member3_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member4_ic_id" name="member4_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
</tr>
<tr class="active">
<th>Contributed Cash</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member1_cc_id" name="member1_cc" value="500" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member2_cc_id" name="member2_cc" value="600" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member3_cc_id" name="member3_cc" value="750" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member4_cc_id" name="member4_cc" value="1,000" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
</tr>
<tr class="active">
<th>Date Joined The Project</th>
<td>
<div class="input-group date" id='member1_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member1_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member2_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member2_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member3_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member3_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member4_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member4_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
</tr>
<tr class="success">
<th>Your Share ($)</th>
<td><input type="text" class="blue-color form-control" name="member1_ysc" disabled/></td>
<td><input type="text" class="red-color form-control" name="member2_ysc" disabled/></td>
<td><input type="text" class="orange-color form-control" name="member3_ysc" disabled/></td>
<td><input type="text" class="green-color form-control" name="member4_ysc" disabled/></td>
</tr>
<tr class="success">
<th>Your Share (%)</th>
<td><input type="text" class="blue-color form-control" name="member1_ysp" disabled/></td>
<td><input type="text" class="red-color form-control" name="member2_ysp" disabled/></td>
<td><input type="text" class="orange-color form-control" name="member3_ysp" disabled/></td>
<td><input type="text" class="green-color form-control" name="member4_ysp" disabled/></td>
</tr>
<tr class="success">
<th>Total Share (#)</th>
<td colspan="4"><b><input type="text" id="totalshare_id" class="form-control centered" name="totalshare" disabled/></b></td>
</tr>
</tbody>
</table>
</div>
</div>
Your HTML structure is not adequated to bootstrap (no .container / container-fluid element(s), no .row element(s), no col-* elements). Furthermore, you want a 5 columns table-like form to be responsive and i don't think it's a good idea for mobile devices.
I suggest you to muck-up a mobile view and a tablet devices like view (you already have desktop view), then proceed to use bootstrap to style each view.
Model is saving but all is null values excepts dates
There is not thrown error.
$fillable are directly copied from the field at my migrations.
I cant find why is that it is saving null values on the database
Here is my Code
My Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
class Disbursement_Information extends Model
{
use SoftDeletes;
protected $table = 'disbursement';
protected $fillable = [
'cv_number',
'payee_id',
'amount',
'check_number',
'release_date',
'first_collection_date',
'last_collection_date',
'maturity_date'
];
protected $dates = [
'created_at',
'updated_at',
'deleted_at'
];
}
My Controller
public function postDisbursement(Request $request, $id){
$loans = new Disbursement_Information;
$input = $request->all();
$loans->save($input);
}
HTML FORM
<div id="step-1">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"> List of All Clients</h1>
<h2>Total Clients: <b>3</b></h2>
<div class="row">
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<hr>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="cv_number"> Check Voucher # </label>
<input type="text" class="form-control" name="cv_number" id="cv_number" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="check_number"> Check # </label>
<input type="text" class="form-control" name="check_number" id="check_number" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="first_collection_date"> First Payment </label>
<input type="date" class="form-control" name="first_collection_date" id="first_collection_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="last_collection_date"> Last Payment </label>
<input type="date" class="form-control" name="last_collection_date" id="last_collection_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="maturity_date"> Maturity Date </label>
<input type="date" class="form-control" name="maturity_date" id="maturity_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="payee_name"> Payee </label>
<input type="text" class="form-control" name="payee_name" id="payee_name" readonly>
<input type="hidden" class="form-control" name="payee_id" id="payee_id" required>
</div>
</div>
<input type="hidden" name="_token" value="JvvXJbloRAzQnj4oz4ve6Z8OLLia270Fs6utSO5a">
<table class="table table-striped">
<thead>
<th>Name</th>
<th style="">Loan Amount</th>
<th style="text-align:center">Action</th>
</thead>
<tbody>
<tr >
<td class="">
Morgado, Ashbee, Allego
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[1]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[1]" p_id = "1 "p_name="Morgado, Ashbee, Allego" target-rdb="rdb1"> Not re-loaning/loaning </label>
<label id="rdb1"><input type="radio" class="rdbPayee" name="payee_id" value="1" p_name="Morgado, Ashbee, Allego">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
<tr >
<td class="">
Melton, Barbara, None
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[2]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[2]" p_id = "2 "p_name="Melton, Barbara, None" target-rdb="rdb2"> Not re-loaning/loaning </label>
<label id="rdb2"><input type="radio" class="rdbPayee" name="payee_id" value="2" p_name="Melton, Barbara, None">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
<tr >
<td class="">
Bonyton, Ester, Jaxis
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[3]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[3]" p_id = "3 "p_name="Bonyton, Ester, Jaxis" target-rdb="rdb3"> Not re-loaning/loaning </label>
<label id="rdb3"><input type="radio" class="rdbPayee" name="payee_id" value="3" p_name="Bonyton, Ester, Jaxis">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="submit" class="btn btn-success"> Submit </button>
</div>
</div>
I have a form in which i toggle 'input text> with <select> using radio buttons. The problem is, i get the result back correctly when user enters value in <input text> but not with <select>.
Basically i'm sending searchType(the radio buttons that selects either the <input text> or the select) and searchKey(the values of <input text> or the select). When i use the <input text> the values are transferred after form submission whereas no values are transferred using select although the name is same for both. i.e searchKey
Can anyone please point out the fault in the code?
<div class="well">
<form class="form-horizontal" action="<%=request.getContextPath()%>/modules/singoliMandrini/ricerca/viewRicerca.jsp" method="post">
<fieldset>
<legend>Ricerca un mandrini</legend>
<div class="form-group" >
<label class="col-lg-2 control-label">Search by</label>
<div class="col-lg-6">
<div class="radio">
<label> <input onclick="showStuff('selection','status');" type="radio" name="searchType" value="id_singoli" />id mandrino</label>
</div>
<div class="radio">
<label> <input onclick="showStuff('selection','status');" type="radio" name="searchType" value="id_tipo" />id tipo</label>
</div>
<div class="radio">
<label> <input onclick="showStuff('selection','status');" type="radio" name="searchType" value="model" />model</label>
</div>
<div class="radio">
<label> <input onclick="showStuff('status','selection');" type="radio" name="searchType" value="status" />stato</label>
</div>
<div class="radio">
<label> <input onclick="showStuff('selection','status');" type="radio" name="searchType" value="linea" />linea</label>
</div>
</div>
</div>
<div class="form-group tempHide" id="selection">
<label for="inputEmail" class="col-lg-2 control-label">Search keywords</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="searchKey" placeholder="keywords" />
</div>
</div>
<div class="form-group tempHide" id="status">
<label for="select" class="col-lg-2 control-label">Search keywords</label>
<div class="col-lg-4">
<select class="form-control input-sm" name="searchKey">
<option value="disponibile">disponibile</option>
<option value="montato">montato</option>
<option value="scrap">scrap</option>
</select>
</div>
</div>
</fieldset>
<p class="text-right">
<input class="btn btn-info" type="submit" value="Ricerca" name="ricerca" />
</p>
</form>
</div>
<% if(request.getParameter("ricerca")!=null) {
ricercaTipo ric = new ricercaTipo();
ArrayList<ricercaBean> list = new ArrayList<ricercaBean>();
list = ric.search(ricerca);
if(list.size()>0){
%>
<div class="well">
<table class="table table-striped table-hover ">
<thead>
<tr>
<th>#</th>
<th>id</th>
<th>Brand</th>
<th>Model</th>
<th>RPM</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<% for(int index=0;index<list.size();index++) { %>
<tr class="active">
<td><%=index+1%></td>
<td><%=list.get(index).getId_mandrino()%></td>
<td><%=list.get(index).getId_tipo()%></td>
<td><%=list.get(index).getModel()%></td>
<td><%=list.get(index).getTimeStamp()%></td>
<td><%=list.get(index).getStatus()%></td>
</tr>
<%} %>
</tbody>
</table>
</div>
<% }else{%>
<div class="alert alert-dismissable alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh No!</strong> No data found for the term "<%=ricerca.getSearchType()%>" <%=ricerca.getSearchKey()%>. Try again.
I am using Jsp Beans to send the data.
Your select dropdown and text input both have the same name so their value are mapped to the same variable on the bean. You should give them different names