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>
Related
So I have one form and I need two submit buttons, i need the ngNativeValidate to validate it, how can I get the value of the button that submitted the form in the onClickResolveTramite()?
It looks simples but I've searched for it and found nothing, i just need a true or false to know if it's approved or not.
<div class="modal-body">
<form (ngSubmit)="onClickResolveTramite(form)"
#form="ngForm"
id="resolveTraimte"
ngNativeValidate
autocomplete="off">
<!-- STATUS -->
<div class="form-row">
<div class="form-group col">
<label for="message">
Reason
</label>
<span>*</span>
<textarea class="form-control"
name="message"
rows="4"
id="message"
[(ngModel)]="tramite.message"
placeholder="Reason"
required></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="user">
User
<span>*</span>
</label>
<select class="form-control"
name="user"
id="user"
[(ngModel)]="user"
required>
<option *ngFor="let user of tramite.users"
[ngValue]="user">
{{user.nome}}
</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer"
style="border: none;">
<button class="btn btn-light"
(click)="onClickclose()">
Cancel
</button>
<button *ngIf="tramite.needApro"
type="submit"
form="resolveTraimte"
class="btn btn-danger"
name="submitTramite"
value="repprove"
formaction="repprove">
Repprove
</button>
<button class="btn btn-success"
type="submit"
name="submitTramite"
form="resolveTraimte"
value="approve"
formaction="approve">
{{ tramite.needApro ? 'Approve' : 'Complete' }}
</button>
// Controller
onClickResolveTramite(form: NgForm) {
console.log(form);
}
Assign different id to each button. Then you can obtain id of button which triggered submit using
document.activeElement.id
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"
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
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.
I've created Bootstrap form with the following code :
<form class="form-inline" role="form" method="GET" action="/startup/searchprojects">
<div class="form-group">
<label class="sr-only" for="keywords">Key words</label> <input
type="text" class="form-control" id="keywords"
placeholder="keywords">
</div>
<div class="form-group example example-countries">
<label class="sr-only" for="localisation">Country</label>
<input class="typeahead" type="text" placeholder="countries">
</div>
<button type="submit" class="btn btn-default">
<fmt:message key="search.button.title" />
</button>
</form>
The form display on the same line. two inputs text with the submit button on the same line.
But when i add Spring MVC form tags, the form changes. Each input went on one line. So i have one line for the keywords input, one line for the input country and one line for the submit button. My form is now vertical.
Here the spring mvc form :
<form:form class="form-inline" role="form" method="GET" commandName="search-form" action="/startup/searchprojects">
<div class="form-group">
<form:label path="keywords" class="sr-only" for="keywords">Key words</form:label>
<form:input path="keywords" type="text" class="form-control" id="keywords"
placeholder="key words"></form:input>
</div>
<div class="form-group example example-countries">
<form:label path="country" class="sr-only" for="localisation">Country</form:label>
<form:input path="country" class="typeahead" type="text" placeholder="countries"></form:input>
</div>
<button type="submit" class="btn btn-default">
<fmt:message key="search.button.title" />
</button>
</form:form>
Try putting style="display: inline" in every div you use
<div style="display: inline"> some content</div>
I adjust width of #search-form. It was problem of width.