Form submit from Bootstrap 3 and JSP get parameter - forms

I'm new to Bootstrap. But I'm pretty familiar with HTML. The thing is I cannot get parameter values from JSP. The parameters are from HTML page with Bootstrap 3. Here're the code. I don't understand. If I make simple html only page, then I could get the parameters.
<form class="form-horizontal" method="POST" action="makeResv.jsp">
<div class="container">
<div class="row">
<div class="control-group col-md-5">
<label for="checkIn">date1</label>
<div id="date-container">
<div class="input-group date">
<input type="text" id="checkIn" class="form-control"><span
class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="control-group col-md-5">
<label for="checkOut">date2</label>
<div id="date-container">
<div class="input-group date">
<input type="text" id="checkOut" class="form-control"><span
class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success">search</button>
</div>
</div>
</div>
</form>
In a JSP page, I'm just doing the following.
String checkIn = request.getParameter("checkIn");
String checkOut = request.getParameter("checkOut");
out.println(checkIn + " " + checkOut);
What's wrong with the above HTML code with Bootstrap?? Please give me some advise. Thanks!!
BTW, I'm using datepicker JavaScript library, but I don't think that affect the results. I cannot add the library code here but it works great anyway.
https://github.com/eternicode/bootstrap-datepicker

Bootstrap is same as HTML. The problem you are having is because you do not have any name attribute defined in your input element. You define id but to access submited variables via POST (request.getParameter() function) you need to have name attribute defined:
Replace <input> lines like this:
<input type="text" name="checkIn" id="checkIn" class="form-control">
And
<input type="text" name="checkOut" id="checkOut" class="form-control"><

Related

Html Form inside another form not redirecting to the correct URL

I've the following form on JSP:
<form class="form-horizontal" style="margin-bottom: 24px">
<fieldset id="myFieldset" disabled>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align: left">Created By</label>
<div class="col-sm-4">
<input class="form-control" type="text" name="created_by" value="${inputConfiguration.getCreatedBy()}" readonly/>
</div>
</div>
.
.
. few more divs of form-group
.
.
</fieldset>
<div class="form-group row">
<div class="col-sm-offset-4">
<form action="${pageContext.request.contextPath}/Configuration/EditConfiguration" method="GET">
<input type="hidden" name="marketplace" value="${param.marketplace}">
<input type="hidden" name="program" value="${param.program}">
<button class="btn btn-primary"> form_Edit </button>
</form>
</div>
<div class="col-sm-1">
<form action="${pageContext.request.contextPath}/Configuration/CopyConfiguration" method="GET">
<input type="hidden" name="marketplace" value="${param.marketplace}">
<input type="hidden" name="program" value="${param.program}">
<button class="btn btn-primary"> form_Copy to New </button>
</form>
</div>
</div>
</form>
However, the forms that are within the outer-form are not redirecting to the correct path on clicking their respective buttons. NOTE: the hidden input fields are just to pass them as url parameters to the paths mentioned in the action and nothing else. Can anyone suggest as to how to pass these as url params and how to make the nested forms work?

How to dynamically disable form submit button when using Bootstrap validation

I have a form that is validated using Bootstrap Validator http://1000hz.github.io/bootstrap-validator/.
You don't see the form at first (display: none). When you get to the step where you fill out the form, the Submit button is enabled, although the form is not valid.
However, if I display the form right away, the Submit button is disabled until the form is valid, as I want it to be. Does anyone have idea why is this happening and how to get it to work?
<div id="step0">
Some code here that is visible in the first step
<div class="row">
<button type="button" class="btn btn-primary" onclick="step1();">Go to step 1</button>
</div>
</div>
<div id="step1" style="display: none;">
<form id="forma-klijenta" data-toggle="validator" method="post" action="test.php">
<div class="row">
<div class="col-md-8 col-sm-12 form-right">
<h3> Lični podaci </h3>
<div class="row">
<div class="col-xs-12 form-group col-sm-6">
<input autocomplete="off" class="form-control" id="ime" data-minlength="2" name="ime" placeholder="Ime" required type="text" value=""
pattern="^[A-ZŠĐČĆŽa-zšđčćž]([-' ]?[A-ZŠĐČĆŽa-zšđčćž])+$"data-error="Ime je obavezno. Dozvoljeni specijalni karakteri su - i '." />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="row form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<!-- Kraj forme za unos podataka -->
</div>
This is how I worked around this:
Removed style="display: none;"
Added jQuery
$(document).ready(function(){
$("#step1").hide();
});

CodeIgniter function form_open() in Smarty template

I recently started working with the Smarty Template system in my CodeIgniter projects.
All works fine and I was able to echo strings and dates. But now I have a problem with the 'form_open()' function.
view_login.tpl
<form class="contact-form" action="login/process" method="post">
<div class="row">
<div class="form-group">
<label for="username">USERNAME</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">PASSWORD</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-flat flat-color">LOGIN</button>
<button type="button" class="btn btn-flat pull-right">Forgot your password?</button>
</div>
</form>
As soon as I replace the HTML tags the view doesn't load anymore. I need the form_open() because of the Cross Site Request Forgery (CSRF).
So far I've tried:
{ form_open('login/process') }
{ form url='login/process' }
{{ form_open('login/process') }}
{php} echo form_open('login/process'); {/php}
Anyone else had the same problem or knows how to fix this?
Without Smarty I never had problems with this.
Solved!
I autoloaded the form helper file.
$autoload['helper'] = array('url', 'form');
And then I used the following code:
{form_open('login/process')}
<div class="row">
<div class="form-group">
<label for="username">USERNAME</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">PASSWORD</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-flat flat-color">LOGIN</button>
<button type="button" class="btn btn-flat pull-right">Forgot your password?</button>
</div>
{form_close()}
Looking at the code given above, it does not seem that the reason why the error occurred was because of the not loading the helper functions, though that may be one of the reason.
I believe the error is mainly because you added spaces between the delimiters { and }.
The default value in Smarty for the right and left delimiters are { and } respectively. Meaning:
{form_open('')} // Ok!
{ form_open('') } // Not Ok!
So, if you would like to use the second version, you will have to change your smarty settings for the right and left delimiter:
$smarty->left_delimiter = '{ ';
$smarty->right_delimiter = ' }';
Also, when you tried
{php} echo form_open('login/process'); {/php}
I believe it did not work because you are using Smarty 3. The {php} tag is deprecated in Smarty 2 and removed in Smarty 3. If you still want to use the {php} tag, you would have to use SmartyBC.

Resizing Jasny's Bootstrap Fileupload form

I'm not able to resize Jasny's Fileupload form. First I made a centered span8 with offset2. Then I put a simple input form into the span and set it to 'input-block-level'. That's working fine: the input form has now a size of span8.
I want to do the same with the Jasny's Fileupload. I tried a lot, but it didn't work for me. What I need, is a function that replaces the span3 entry in class="uneditable-input span3" with some kind of auto-resizing function, that stretches the input box to span8. Replacing span3 with input-block-level also doesn't work.
Another possibility would be a fixed value for the control button (maybe span3) and a for the input field (span5).
Any ideas?
<div class="row-fluid">
<div class="container pagination-centered">
<div class="span8 offset2" style="background-color:#FFCC33">
<form class="form" action="someaction" method="post" enctype="multipart/form-data" style="background-color:#FFFFFF">
<div class="control-group">
<div class="controls">
<input type="text" id="someid" name="somename" class="input-block-level" placeholder="well stretched box">
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" />
</span>
Remove
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

Designing Form Using Twitter Bootstrap for column type Input

I want to design a form something like this:
I went through the documentation of Twitter Bootstrap and found that there is no proper way of doing it unless you do some CSS hacks over to achieve that. I don't want to do any CSS hacks because they make the page unresponsive.
Is there any proper way for achieving this ?
I have come up with the following code for my form:
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="input-mini" for="first">Start</label>
<label class="input-mini" for="first">End</label>
<label class="input-mini" for="first">Share</label>
</div>
<div class="control-group form-inline">
<input type="text" class="input-mini">
<input type="text" class="input-mini">
<input type="text" class="input-mini">
</div>
</fieldset>
I have also created a jsfiddle. There are two problems with the above form being rendered:
Labels are not horizontal.
The space between text input is not proper.
Yes you can achieve that layout with the help of the grid.
Something like this should do the work:
<div class="container">
<div class="row">
<div class="span1">
One
</div>
<div class="span1">
Two
</div>
<div class="span1">
Three
</div>
</div>
<div class="row">
<div class="span1">
<input type="text" class="input-mini">
</div>
<div class="span1">
<input type="text" class="input-mini">
</div>
<div class="span1">
<input type="text" class="input-mini">
</div>
</div>
<div class="row">
<!-- Same as above -->
</div>
<div class="row">
<!-- Same as above -->
</div>
</div>
See the demo here: http://bootply.com/60908