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.
Related
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?
can I use only the layout of the form in bootstrap and have the input option frozen and the submit buttons behave like plain html button which redirects somewhere?
Why I want this?
So in the homepage I have resources which can be deleted pressing the delete button against them. On clicking the delete button the resource data is displayed like the layout of a form, of course I want typing inputs to be disabled, and a warning message on top, and YES and RESET option at the bottom. Since the form has a specific action assigned via GET method it will invariably perform that action irrespective of the choice selected. So if RESET is also selected the resource still gets deleted.
One option is to have the buttons as individual links with specific redirection properties but then I need to handcode the entire styling of the form.
Below is the code
#elseif($layout=='delete')
<div class="container-fluid mt-4">
<div class="row">
<section class="col md-7">
<div class="card mb-3">
<img src="https://cdn.pixabay.com/photo/2014/05/05/19/53/keyboard-338502_1280.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Are you sure you want to delete</h5>
<form action="{{url('/destroy/'.$student->id)}}" method="get">
#csrf
<div class="form-group">
<label>CNE</label>
<input value="{{ $student->cne }}" type="text" class="form-control" name="cne" placeholder="Enter CNE">
</div>
<div class="form-group">
<label>FirstName</label>
<input value="{{ $student->firstName }}" type="text" class="form-control" name="firstName" placeholder="Enter the first Name">
</div>
<div class="form-group">
<label>Last Name</label>
<input value="{{ $student->LastName }}" type="text" class="form-control" name="LastName" placeholder="Enter the Last Name">
</div>
<div class="form-group">
<label>Age</label>
<input value="{{ $student->age }}" type="text" class="form-control" name="age" placeholder="Enter Age">
</div>
<div class="form-group">
<label>Speciality</label>
<input value="{{ $student->Speciality }}" type="text" class="form-control" name="Speciality" placeholder="Enter the speciality">
</div>
<input type="submit" class="btn btn-info" value="yes">
<input type="submit" class="btn btn-warning" value="reset">
</form>
</div>
</div>
</section>
Firstly, if you want disable input, add readonly to your inputs :
<input value="{{ $student->cne }}" type="text" class="form-control" name="cne" placeholder="Enter CNE" readonly>
Second, now the type of your reset button = submit so when you click it, your form is submitted. Change your code :
<input type="reset" class="btn btn-warning" value="reset">
I would like to populate a bootstrap form with results from a mongo query using handlebars but am not sure where to put the relevant expressions.
For example, if the code is:
<form method="post" action="/students" enctype="multipart/form-data">
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="title">STUDENT</label>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="title">Surname</label>
<div class="col-md-2">
<input class="form-control" type="text" name="surname">
</div>
<label class="col-md-2 control-label" for="title">First Name</label>
<div class="col-md-2">
<input class="form-control" type="text" name="firstname">
</div>
</div>
</form>
and, say I have the following {{surname}} and {{firstname}} expressions, is there a place in the code I can put them to ensure that when the page renders the forms contain the surname and firstname objects already? Is this even possible?
Any help is much appreciated
If I understand you right you want the inputs value to be filled. You can set the inputs value like this
<input class="form-control" type="text" name="surname" value="{{$surname}}">
I have a table that has a form inside one of the cells. Because of the way that bootstrap controls input field sizing, it seems the documented way to do this is through this method
http://getbootstrap.com/css/#forms-control-sizes
But, because my form is sitting in a table, is there a way to do this properly?
Here is what it looks like.. and it's def not right... I don't even think I can be putting rows inside my cell..
<td>
<div class="row">
<p>$00.00</p>
<form role="form" class="form-inline cartAdd" name="itemAdd" method="post" action="shop.php">
<div class="col-lg-3">
<label class="sr-only" for="quantity">Quantity</label>
<input type="text" class="form-control quantity" name="quantity" placeholder="Qty" maxlength="3">
</div>
<div class="form-group">
<input type="hidden" class="form-control pid" name="pid" class="pid" value="1" >
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" name="button" id="7PlateButton">Add</button>
</div>
</form>
</div>
</td>
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"><