Suppose that I have the below form in an angular component. How do I focus on the Log in button after clicking on enter key?
<form class="mt-4" #contactform="ngForm">
<input type="text" class="form-control" aria-describedby="emailHelp" placeholder="" [(ngModel)]="model.eMail" required>
<input type="password" class="form-control" placeholder="" [(ngModel)]="model.password" required>
<button type="button" class="btn btn-primary btn-lg btn-block" (click)="onClickSend(contactform)">Log in</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Clear</button>
</form>
Thanks in advance.
Change the login button to type "submit" - and the enter key will trigger it.
<button type="submit" class="btn btn-primary btn-lg btn-block" (click)="onClickSend(contactform)">Log in</button>
You can also use ngSubmit on the form tag instead of click:
<form class="mt-4" #contactform="ngForm" (ngSubmit)="onClickSend(contactform)">
<button type="submit" class="btn btn-primary btn-lg btn-block">Log in</button>
</form>
Related
I'm trying to add two buttons which should only show if there is some text in the input field else it should be hidden/disabled by default,but I'm getting this error.
<div class="card card-body">
`<form>`
`<div class="form-group">`
`<input type="text" class="form-control" placeholder="Add a Log ...">`
`<input type="submit" value="Add Log" class="btn btn-light" [disabled]=!this.text>`
`<button class="btn btn-warning" [hidden]=!this.text>Clear </button>`
`</div>
`</form>
</div>
Error :
Clear
~~~~~~~~~
src/app/components/log-form/log-form.component.ts:5:16
templateUrl: './log-form.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component LogFormComponent.
You can implement this easily by using ngModel as below:
mycomp.component.html
<form>
<div class="form-group">
<input type="text" class="form-control" name="text" [(ngModel)]="textvalue" placeholder="Add a Log ...">
<input type="submit" value="Add Log" class="btn btn-light" [disabled]="!textvalue">
<button class="btn btn-warning" [hidden]="!textvalue">Clear </button>
</div>
{{textvalue}}//contains value of your input element.
</form>
mycomp.component.ts
export class MyComponent {
textvalue:string;
}
Be sure to import FormsModule in the imports[] array of app.module.ts file in order for ngModel to work.Also name attribute of input is important or you could use formControlName.
Hope this helps!!!
You are missing the quotes in your template:
[disabled]="!this.text"
No need for backticks inside of backticks
"text" not this.text
`<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Add a Log ...">
<input type="submit" value="Add Log" class="btn btn-light" [disabled]="!text">
<button class="btn btn-warning" [hidden]="!text">Clear </button>
</div>
</form>`
I have following code I want to use to pass an id to my new form but I'm getting error that resource is not available.
<form action="~/Views/Admin/AdminDemandeurs.cshtml" method="GET">
<button type="submit" class="btn btn-primary">Ajouter</button>
<button type="submit" class="btn btn-primary" id="btnModif" disabled>Modifier</button>
<button type="submit" class="btn btn-primary" id="btnSupp" disabled>Supprimer</button>
<input type="text" name="action" id="enregID" />
</form>
I'm using MVC and my view does have an entry in my controller
public ActionResult AdminDemandeurs()
{
return View();
}
Does someone has an idea?
You should submit your form to your action method,not the view.
You may use the Url.Action helper to generate the correct relative path to the action method.
<form action="#Url.Action("AdminDemandeurs","Admin")" method="GET">
<button type="submit" class="btn btn-primary">Ajouter</button>
<button type="submit" class="btn btn-primary" id="btnModif" disabled>Modifier</button>
<button type="submit" class="btn btn-primary" id="btnSupp" disabled>Supprimer</button>
<input type="text" name="action" id="enregID" />
</form>
I have a required input, with two buttons "submit" and "goBack". On clicking "goBack", I don't want to require check for the input field.
Belpw is the code I tried,
<input type="text" class="form-control" id="formGroupExampleInput" name="nameofcontract" placeholder="Name of Contract" required></form>
<button class="btn btn-danger btn-lg" type="submit">Submit</button>
<button class="btn btn-warning btn-lg " onclick="goBack()">Go Back</button>
Have a look at this lines. I hope this is what you like to achieve:
function goBack() {
if (!formGroupExampleInput.value) return;
console.log("goBack")
}
<input type="text" class="form-control" id="formGroupExampleInput" name="nameofcontract" placeholder="Name of Contract" required>
<button class="btn btn-danger btn-lg" type="submit">Submit</button>
<button class="btn btn-warning btn-lg " onclick="goBack()">Go Back</button>
set Id of both button and check blank on click
$('#Submit').click(function(){
if($('#formGroupExampleInput').val()=='')
{
alert('can not blank')
return false;
}
else
{
alert('ok')
return true;
}
})
$('#goback').click(function()
{
window.location.href='your url';
})
by default a button is submit, so a click validates the form
change the type to "button" to change the behaviour
<button class="btn btn-warning btn-lg" type="button" onclick="goBack()">Go Back</button>
reducing your example to what is required
<html>
<body>
<script>
function goBack() {
window.location.href = "https://google.com/"
}
</script>
<form>
<input type="text"
name="nameofcontract" placeholder="Name of Contract" required>
<button type="submit">Submit</button>
<button type="button" onclick="goBack()">Go Back</button>
</form>
</body>
</html>
I have a bunch of buttons and an input text box. But they are not aligned properly as shown.
<div class="col-md-12 pull-right">
<div class="pull-right">
<button type="button" class="btn btn-default btn-xs"> << </button>
<button type="button" class="btn btn-default btn-xs"> < </button>
<button type="button" class="btn btn-default btn-xs"> > </button>
<button type="button" class="btn btn-default btn-xs"> >> </button>
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
</div>
Is there a way they are alligned in one row? Also notice that the size of the input box is looking different from the others. Is there a way to fix this too?
using btn-group arranges all buttons in a row. like this
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs"><<</button>
<button type="button" class="btn btn-default btn-xs"><</button>
<button type="button" class="btn btn-default btn-xs">></button>
<button type="button" class="btn btn-default btn-xs">>></button>
<input type="number" style="width: 30px; margin-top:10px" class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
Note: When using HTML symbols(for example <,>) as text, then encode them as I did(Just a good practice).
Docs btn-groups
And I used inline style for input type number margin-top:10px; because input[type=number] in bootstrap has margin-bottom:10px; so, to balance used margin-top. Instead you can use margin-bottom:0px
As #Mike Robinson said, even .input-append does the same . the difference is rounded borders and input-append is converted to input-group from version 3
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="input-append">
<button type="button" class="btn btn-default btn-xs"><<</button>
<button type="button" class="btn btn-default btn-xs"><</button>
<button type="button" class="btn btn-default btn-xs">></button>
<button type="button" class="btn btn-default btn-xs">>></button>
<input type="number" style="width: 30px; " class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
You need an input-group. You can add on groups of buttons to either side of the input. Here they'll be on the left:
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
Read more about it here:
http://getbootstrap.com/components/#input-groups-buttons-multiple
The form-control style on your input is the thing that's moving it to the next line. It's doing so because the form-control style in bootstrap is set to display: block. By adding a new style or doing an inline style you can get them on the same page.
For instance:
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" style="display: initial;" />
Or you can make a class such as:
.newInputControl{
display: inline;
}
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" class="newInputControl" />
You can also take care of it using bootstrap, which has built the framework to handle this by placing your form-control inside an input group.
use:
form-control-static instead of form-control in your input text
Basically I need a to be able to submit the form via POST.
here is my current form.
<form action="process.php" method="post">
<button type="submit" class="btn btn-success" role="link" name="item" value="1">Item 1</button>
<button type="submit" class="btn btn-success" role="link" name="item" value="2">Item 2</button>
<button type="submit" class="btn btn-success" role="link" name="item" value="3">Item 3</button>
</form>
I just need it to work like if I click item 1, it will POST a value of 1 to the process.php. and if I click item 2, it will POST 2. The problem is, no matter which button I press, the value will be "1". If I change it to GET, there are no problems.
I've also tried this but it doesn't seem to work
<form action="process.php" method="get">
<button type="submit" name="item" value="3" formmethod="post" formaction="process.php">Item 3</button>
</form>
Any ideas?
An upgrade from m1xolyd1an's answer:
put this on your process page
<?php
if(isset($_POST["product1"])) {
$product = 1;
}
if(isset($_POST["product2"])) {
$product = 2;
}
if(isset($_POST["product3"])) {
$product = 3;
}
?>
And put this on your form
<form action="process.php" method="post">
<input type="submit" class="btn btn-success" name="product1" value="Order Now">
<input type="submit" class="btn btn-success" name="product2" value="Order Now">
<input type="submit" class="btn btn-success" name="product3" value="Order Now">
</form>
then use $product to get your value.
Personally I would handle this a bit differently. For your form I would use input type submit instead of button and then give each one a name field that will be logged to $_POST.
<?php
if(isset($_POST['buttonName1'])){
$_POST['someVariable'] = 1;
}
if(isset($_POST['buttonName2'])){
$_POST['someVariable'] = 2;
}
if(isset($_POST['buttonName3'])){
$_POST['someVariable'] = 3;
}
?>
<form action="process.php" method="post">
<input type="submit" name="buttonName1" class="btn btn-success" value="1">
<input type="submit" name="buttonName2" class="btn btn-success" value="2">
<input type="submit" name="buttonName3" class="btn btn-success" value="3">
</form>
Then in your process.php file you can call your variable to find out which button the user clicked on the first page.
$callingVariable = $_POST['someVariable'];
In html you can pass in the array to PHP. Since you are using the same name for each button type, you can just do something like,
<form action="process.php" method="post">
<button type="submit" class="btn btn-success" role="link" name="item[]" value="1">Item 1</button>
<button type="submit" class="btn btn-success" role="link" name="item[]" value="2">Item 2</button>
<button type="submit" class="btn btn-success" role="link" name="item[]" value="3">Item 3</button>
</form>
and then $_POST will then contain an array for item with all values from the input elements and you can loop through each or do whatever your logic is that you want.