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.
Related
I have two forms with at the bottom respectively a button to update and to delete the data. I want to place the buttons on 1 line.
The problem is when I am using "div class row" to place the button on the same row and leave them open between the two forms (see code)
my data is deleted when I press de update button. If I close the "div class row" then naturally the buttons are working perfectly but they are now on different rows.
How can I fix this? Thanks for the help.
## Leave the class open ==> Update Delete
<form method="POST" action="/tasks/{{ $event->id }}" >
#csrf
#method('PATCH')
...
<div class="row">
<div class="col-4 offset-1">
<button type="submit" class="btn btn-block btn-primary">Update</button>
</div>
</form>
<form action="/tasks/{{$task->id}}" method="post">
#csrf
#method('DELETE')
<div class="col-4 offset-2">
<button type="submit" class="btn btn-block btn-danger">Delete</button>
</div>
</div>
</form>
## Leave the class open ==> Update
Delete
<form method="POST" action="/tasks/{{ $event->id }}" >
#csrf
#method('PATCH')
...
<div class="col-4 offset-1">
<button type="submit" class="btn btn-block btn-primary">Update</button>
</div>
</form>
<form action="/tasks/{{$task->id}}" method="post">
#csrf
#method('DELETE')
<div class="col-4 offset-6">
<button type="submit" class="btn btn-block btn-danger">Delete</button>
</div>
</div>
</form>
Yeah, this is a tricky one. Have you considered using JavaScript for the delete button?
Change the button type to button and add the onclick attribute to the button and submit the delete form on click.
<form method="POST" action="/tasks/{{ $event->id }}" >
#csrf
#method('PATCH')
...
<div class="row">
<div class="col-4 offset-1">
<button type="submit" class="btn btn-block btn-primary">Update</button>
</div>
<div class="col-4 offset-2">
<button type="button" class="btn btn-block btn-danger"
onclick="event.preventDefault();
document.getElementById('delete-task-form').submit();"
">Delete</button>
</div>
</div>
</form>
<form action="/tasks/{{$task->id}}" id="delete-task-form" method="post">
#csrf
#method('DELETE')
</form>
Create a class with display flex and align child accordingly to what you wish to achieve.
Here's some lecture:
https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/
You can just insert all the forms inside the div. So instead of wrapping them with form tag you want to wrap them with div, and put the form inside the div. That way you can arrange the button with col-md class more easily.
<div class="col-4 offset-6">
<form action="/tasks/{{$task->id}}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-block btn-danger">Delete</button>
</form>
</div>
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 have the following Bootstrap markup:
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
<button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
</div>
</div>
When I click the Create Profile button the form works fine letting me know that certain fields are "Required". But when I click the Cancel button I cannot leave the form due to incomplete required fields.
Is there a form cancel button capability in Bootstrap?
Change your code to the following:
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
Cancel
</div>
</div>
simply set the type attribute to reset as shown below;
<button type="reset" class="btn btn-default pull-right">Cancel</button>
if you would like to keep both elements as <button>. You can create a click handler with jQuery:
$('#cancel').click(() => {
location.href = '../' //returns to parent
})
A direct method is to use onclick="history.back()" Like so:
<button id="cancel" name="cancel" class="btn btn-default" onclick="history.back()">Cancel</button>
It is supported in all browsers at the time of this posting
I have the following submit button that does not take me to search.php. Please guide me what is wrong with it.
<div class="row" style="margin-top:80px;">
<form class="form-signin" id="Form1" action="search.php" method="post">
<div class=" col-xs-12" style="float:left;display:inline;">
<div class="ui-widget">
<label for="city">City: </label>
<input id="city">
</div>
<button type="button" class="btn btn-default" type="submit">Search</button>
</div>
</form>
</div>
<button type="button" .... type="submit">Search</button>
You have defined type twice. Remove the one you don't want.
I've had the following issue occur with a bootstrap-styled text field and input button many times. Notice that they are not vertically aligned:
How do I align these two elements? Here is the HTML:
<div class="span6">
<input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button>
</div>
In order to complete that, you must use proper Twitter Bootstrap classes for forms.
In this case, that is .form-inline class.
Here is proper markup:
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email"/>
<button type="submit" class="btn">Sign in</button>
</form>
Here is demo http://jsfiddle.net/YpXvT/42/
<div class="navbar-form pull-left">
<input type="text" class="span2">
<button class="btn">Sign up</button>
</div>
copied from http://twitter.github.io/bootstrap/components.html#navbar
or
<div class="input-append">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
or
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
<div class="input-group">
<input type="email" class="form-control" required="required" placeholder="monEmail#domaine.fr">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
</span>
</div>
change css for class input-group-btn in boostrap-min: vertical-align =>top
it s work for me