Could you please advise how to implement the bootstrap btn-group element which consists of one submit button and the rest of buttons work as checkboxes. Actually I've created the mentioned but my submit button doesn't work and when it is pressed, nothing happens.
Here is what I have now:
<form class="form-group" action ="" method = "get" novalidate>
<div class="btn-group-vertical" data-toggle="buttons">
<button type="submit" class="btn btn-success">Search</button>
<label class="btn btn-primary">
<input type="checkbox" name="select_tag" value="2" id="id_select_tag_0" /> Mysql
</label >
<label class="btn btn-primary">
<input type="checkbox" name="select_tag" value="3" id="id_select_tag_1" /> Disk health
</label2>
</div>
</form>
And the block looks like this
If I put submit button out of the btn-group block it works:
<form class="form-group" action ="" method = "get" novalidate>
<button type="submit" class="btn btn-success">Search</button>
...
However, it looks ugly
So is it possible to have a lot of buttons work as checkboxes and one which work as submit in one bootstrap button group?
you can do it with javascript :
<form class="form-group" action ="" method = "get" novalidate>
<div class="btn-group-vertical" data-toggle="buttons">
<button type="button" onClick="javascript:document.forms[0].submit();" class="btn btn-success">Search</button>
<label class="btn btn-primary">
<input type="checkbox" name="select_tag" value="2" id="id_select_tag_0" /> Mysql
</label >
<label class="btn btn-primary">
<input type="checkbox" name="select_tag" value="3" id="id_select_tag_1" /> Disk health
</label2>
</div>
</form>
Looks like you've some weird spaces in your form element and didn't set an action.
Try replace:
<form class="form-group" action ="" method = "get" novalidate>
With
<form class="form-group" action="#" method="get" novalidate>
just remove data-toggle="buttons"
Try this - Change your button's class:
class="btn btn-success submit"
Related
I wanted to add validation to this input
<div class="col-lg-6">
<!-- Content Here -->
<!-- Needs Validation -->
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" href="add_workout_2.php" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</div>
I tried using the required tag but it doesn't seem to work (I can just click the submit button without inputting any value).
Edit:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</form>
In this case the "required" parameter will only trigger, if a valid "submit" event is getting called correctly. Anchor tags has the "type" parameter, but it's not for the same use as an input/button tag. I'd suggest that you convert your anchor tag to a button as follows:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<button class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</button>
</form>
Then you'll get the wanted result. If you don't want the styling of the button, you can work around that with styling. For future reference, you don't need to add "value="" to the input tag for having an empty tag :-)
I hope it helped.
Change your code to this:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" required>
<input class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button" value="+ ADD EXERCISES TO WORKOU">
</form>
Here is my code:
<form class="form-horizontal" action="/abc" method="POST">
<div><input type="text" id="name" value="a"></div>
<div class="border-top row">
<button type="submit" class="btn float-right" name="update">Update
</button>
</div>
</form>
When I click button it just pass data like below:
update:
Why is it not showing other form data?
You should add name attribute to the input field to get the value of text-box on click of submit button.
<form class="form-horizontal" action="/abc" method="POST">
<div><input type="text" id="name" value="a" name="uname"></div>
<div class="border-top row">
<button type="submit" class="btn float-right" name="update">Update
</button>
</div>
</form>
I'm trying to write a login/register page and make the "login" button disabled if the fields are not filled in (login and password). However it's also affection the "register" button, which is asking for the fields to be filled in as well.
I'm not sure what is causing this and removing the "required ng-model" from the labels stops the login button from working with "ng-disabled". Can someone please help me understand what's causing this behavior?
<div class = "form-group" aling="center">
<label for="exampleInputEmail" > Usuário </label>
<input type='text' placeholder = 'Usuário'
class="form-control" required ng-model = "user">
<div class="form-group">
<label for="exampleInputPassword"> Senha </label>
<input type='password' placeholder = 'Senha'
class="form-control" required ng-model = "password">
</div>
<p>
<div class="main" ng-controller="loginController">
<button class="btn btn-default" type="submit"
ng-disabled="form1.$invalid" ng-click="login(user,password)">
Login</button>
</div>
<button href="#" class="btn btn-default" type="submit"
ng-click="register()">
Register
</button>
<p></p>
Currently what happening is when you're clicking on Register button it tries to submit a form. You should change type="submit" of Register button to type="button". Also even if you don't specify any type on button, it considered as type="submit".
<button class="btn btn-default" type="button" ng-click="register()">
Register
</button>
You Register button is in the same form as all the other fields and has type submit and since the two inputs are required the submit button is automatically disabled
Some observations :
You define the controller loginController only for Login button. Hence, username and login fields are out of scope for this controller.
Define the controller in the parent element(outside of the form) in the DOM.
DEMO
var app = angular.module('myApp', []);
app.controller("loginController", function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="loginController">
<form name="myForm" novalidate>
<div class = "form-group" aling="center">
<label for="exampleInputEmail" > Usuário </label>
<input type='text' placeholder='Usuário'
class="form-control" required ng-model="user">
<div class="form-group">
<label for="exampleInputPassword"> Senha </label>
<input type='password' placeholder='Senha'
class="form-control" required ng-model="password">
</div>
<p>
<div class="main">
<button class="btn btn-default" type="submit"
ng-disabled="myForm.$invalid" ng-click="login(user,password)">
Login</button>
</div>
<button href="#" class="btn btn-default" type="submit" ng-click="register()">Register
</button>
</div>
</form>
</div>
I'm using Bootstrap and Laravel.
I would like to align two buttons "Update" and "Delete" next to each other.
BUT the Delete button has its own route and fields. So I created two forms.
Of course, the Delete button is now below the Update button.
Question: How can I make them next to each other instead?
I think a form inside of a form is not standard. Plus, it actually messes with the fields being sent.
Are there CSS rules I could apply for this to work?
I created a JSFiddle if you want to try it out: https://jsfiddle.net/0e5jk8yr/
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="/route2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
If it's not possible with CSS, feel free to comment and suggest UI design for item update/deletion.
Thanks to everyone reading and trying to figure this out.
Side note: I'm tagging this as Laravel, in case someone knows tricks I could use with Laravel/Blade for forms leading to deletion.
If CSS doesn't work, one solution would be to use only one form leading to update(), then call the destroy() method if the delete button was pressed.
Method 1
If you want to keep the way it is right now you can give the forms the property of display: inline;.
form {
display: inline;
}
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
Method 2
However, having two forms is not necessary because you can give the inputs a name attribute and then call the functions with the name. So when the form is submitted it will either return $_POST['submit'] or $_POST['delete'].
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button name="submit" type="submit" class="btn btn-success">Update</button>
<button name="delete" type="submit" class="btn btn-danger">Delete</button>
</form>
Try this.
#form2 {
position: absolute;
top: 74px;
left: 80px;
}
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
Or like this:
.btn-danger {
position: absolute;
top: -33px;
left: 90px;
}
form {
position: relative;
}
https://jsfiddle.net/0e5jk8yr/1/
Here is your corrected code. Please check it
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
Iam new to bootstrap and I am trying to add an action="doform.php" to a form but I cant get it to work, where in this code should I add action?
<form class="form-inline">
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
I have tried the following but it doesnt do anything...
<form class="form-inline">
<div class="form-group">
<form id="back" action="doit1.php" method="post">
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
<div class="form-group">
<form id="back" action="doit1.php" method="post">
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
</form>
Inside the form tag.
And don't forget the method. I assume you'll want to use POST
<form action="doAction.php" method="POST">
Oh, and you only need one submit button.