I want with a simple button in a form, validate the form and at the same time, open a new tab with "link.com". But when I click on the button, the form is validate but the the "link.com" does't open. I don't know how to do that correctly ... Thank you
<form class="form-row" action="mail.php" method="post">
<div class="col-12 col-md-12 mb-2 mb-md-0">
<input type="email" class="form-control form-control-lg" id="inlineFormInputGroup" placeholder="email..." name="mail" required>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-block btn-lg btn-primary btnoffre">Je veux en recruter !</button>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-block btn-lg btn-primary btnoffre">Je veux être recruté.e !</button>
</div>
</form>
You could just add onsubmit to your form:
<form class="form-row" action="mail.php" method="post" onsubmit="window.open('http://www.google.com', '_blank')" >
I guess you want one button that does 2 things?
Maybe some JavaScript piece would help here? :
Get the correct BUTTON element - one inside :
const BUTTON = document.querySelector("div button");
And listen for click event, when it goes, trigger function that opens new tab? :
BUTTON.addEventListener('click', function(){ window.open(link.com, '_blank');
win.focus(); }, false);
Wonder if sth like this would help with this?
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'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 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 am using btn-btn-primary class of bootstrap for button styling but i have issue when form is invalid button is disabled with light blue color and grayish background that is not making enough difference with when it is enabled. How can i change background color and font in both cases ?
main.html
<form name="createProcessFormName" id="createProcessForm" role="form" class="form-horizontal">
<div class="panel-body formHeight">
<!--<p class="text-danger" ng-show="createProcessFormName.$dirty && createProcessFormName.$invalid">{{validationMessage}}</p>-->
<div class="row">
<div class="form-group col-md-6 fieldHeight">
<label for="name" class="col-md-5 required">Business
Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="name"
ng-model="DTO.LongName" ng-model-options="{updateOn: 'blur'}"
placeholder="Name" maxlength="1024" name="Name"
required>
<p class="text-danger" ng-show="createProcessFormName.processName.$touched && createProcessFormName.processName.$error.required">Business Process Name is required</p>
</div>
</div>
</div>
</form>
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>
I suggest use ng-class https://docs.angularjs.org/api/ng/directive/ngClass
which will add css class based on condtion.
When createFormName.$invalid is true, it will apply invalidCssClassName
from your css.
When createFormName.$invalid is false, it will remove invalidCssClassName
from your css.
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-class="{invalidCssClassName:createFormName.$invalid}" ng-click="submit()">Save</button>
Your best alternative would be to use the :invalid pseudo-class.
Once the form has all the required fields filled out, the form will no longer be invalid and therefore the button should go back to its normal state.
form + button.btn.btn-primary {
background: blue;
}
form:invalid + button.btn.btn-primary {
background: red;
}
<form>
<input type="text" required />
</form>
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>