I have a submit form, when I click on the button "log in" it works, $_POST['login'] contains something, but when I press ENTER key it is empty.
form
<form class="form-vertical login-form" action="conexio.php" method="post">
<h3 class="form-title">Login to your account</h3>
<div class="alert alert-error hide">
<button class="close" data-dismiss="alert"></button>
<span>Enter any username and password.</span>
</div>
<div class="control-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Username</label>
<div class="controls">
<div class="input-icon left">
<i class="icon-user"></i>
<input class="m-wrap placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<div class="controls">
<div class="input-icon left">
<i class="icon-lock"></i>
<input class="m-wrap placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password"/>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn blue pull-right" name="login">
Login <i class="m-icon-swapright m-icon-white"></i>
</button>
</div>
</form>
Try replacing <button> with <input type='submit'>.
Related
Description
I want to have two buttons to edit and delete an identity role. The edit button works but if I want to delete a role the site is reloading but nothing happens.
The post function will not be called. Is there another way to have a post form in another post form?
Code
<div class="row mb-3">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Rollennamen bearbeiten</h4>
#using(Html.BeginForm("EditRole", "Administration", FormMethod.Post)) {
<div class="form-group row">
<label asp-for="EditRole.RoleName" class="col-sm-12 col-md-3"></label>
<div class="col-sm-12 col-md-9">
<input asp-for="EditRole.Id" type="hidden" value="#roles.Id" />
<input asp-for="EditRole.RoleName" class="form-control" value="#roles.Name" />
<span asp-validation-for="EditRole.RoleName" class="text-danger"></span>
</div>
</div>
<div class="d-flex flex-row-reverse">
<button type="submit" class="btn btn-success">Rolle bearbeiten</button>
#using(Html.BeginForm("DeleteRole", "Administration", FormMethod.Post)) {
<input name="id" type="hidden" value="#roles.Id" />
<button type="submit" class="btn btn-danger mr-2">Rolle löschen</button>
}
</div>
}
</div>
</div>
</div>
</div>
You could handle multiple submit in one form use asp-action like
#using (Html.BeginForm(FormMethod.Post))
{
<div class="d-flex flex-row-reverse">
<input type="submit" value="Save" class="btn btn-success" asp-controller="Administration" asp-action="EditRole" />
<input type="submit" value="Delete" class="btn btn-danger" asp-controller="Administration" asp-action="DeleteRole" />
</div>
}
The buttons inside my panel-body doesn't work. This is the code:
<div class="panel-body">
<table border="3">
<!-- <div id="tray"></div> -->
#forelse($carts as $cart)
<div class="row">
<div class="col-md-1">{{$cart->id}}</div>
<div class="col-md-3">{{$cart->name}}</div>
<div class="col-md-4">
<div class="row clearfix">
<div class="col-md-1">
<form action="/restaurant/minus" method="POST">
<input type="hidden" name="trayid" id="trayid" value="{{$cart->id}}">
<input type="hidden" name="trayprice" id="trayprice" value="{{$cart->price}}">
<button type="submit" class="btn btn-xs btn-primary" style="border-radius: 50%;" id="{{$menu->id}}"><i class="fa fa-minus" aria-hidden="true"></i></button>
</form>
</div>
<div class="col-md-4">
<input type="number" min="1" value="{{$cart->quantity}}" style="width:40px;">
</div>
<div class="col-md-1">
<form action="/restaurant/plus" method="post">
<input type="hidden" name="trayid" id="trayid" value="{{$cart->id}}">
<input type="hidden" name="trayprice" id="trayprice" value="{{$cart->price}}">
<button type="submit" class="btn btn-xs btn-primary" style="border-radius: 50%"><i class="fa fa-plus" aria-hidden="true"></i></button>
</form>
</div>
</div>
</div>
<div class="col-md-2">
<input type="hidden" name="trayprice" value="{{$cart->price}}">
</div>
<div class="col-md-1">
<form action="/restaurant/delete" method="post">
<input type="text" name="deleteid" id="deleteid" value="{{$cart->id}}">
<button type="submit" class="btn btn-xs btn-danger" style="border-radius: 50%;"><i class="fa fa-trash" aria-hidden="true"></i></button>
</form>
</div>
</div>
#empty
#endforelse
</table>
</div>
Meanwhile, the button in my panel-header works, and it just clears the body.
<div class="panel-heading">
<div class="row clearix">
<form class="col-md-12" method="POST" action="/restaurant/cleartray">
{{ csrf_field() }}
<p class="pull-left">Tray</p>
<button type="submit" class="btn btn-danger btn-xs pull-right"><i class="fa fa-eraser" aria-hidden="true"></i> Clear</button>
</form>
</div>
</div>
Is there anything wrong with the structure that made it impossible for the button to work?
P.S: It doesn't even gets to the route target. It doesn't refresh or something like that. It's like the button itself is unresponsive.
EDIT: I found out that the buttons in the form doesn't work once it's inside the forelse loop.
I think you can change your route action like:
<form action="/restaurant/plus" method="post">
TO
<form action="{{ url('restaurant/plus') }}" method="post">
Hope this work for you!
I kinda got the answer by literally debugging it, haha.
It turns out that having a form tag inside the table tag isn't going to go well. So I took out the table tag. (Didn't remember why I had it in the first place)
Aaaaand voila! It worked!
Today I copied literally a test piece of code from the twitter-bootstrap site into my code. I tried to get a horizontal form like in the example. but for some reason, I don't get a horzontal layout. My site http://073design.nl/kasopmaak/?
Code i used for horizontal form:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
Your code works fine only when link with bootstrap version 2.3 DEMO1
Check this works in bootstrap 3
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-2">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
I have a small contact modal on my website that does not appear. It was working before, but I must have changed something and now it won't work.
I've looked over it multiple times and I can't figure out why it's not working.
HTML:
<span data-toggle="modal">Contact</span>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact the Developers</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
You are missing the data-target attribute. Plus, you shouldn't be linking to a page when you want to open a modal ;)
<span data-toggle="modal" data-target="#contact">Contact</span>
Should fix this. See http://www.bootply.com/UED0aevXsG
I am trying to make dropdown login form in navigation bar using Bootstrap 3, but it does not look good - labels and inputs are wider than drop down ... panel.
How I can change drop down form width using col-* Bootstrap classes?
Here is the code (http://getbootstrap.com/css/#forms-horizontal):
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Sign in <b class="caret"></b>
<div class="dropdown-menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</li>
</ul>
Thanks in advance.
You could add padding to the .dropdown-menu and change your columns to col-lg-11
Example: http://bootply.com/110118