I have a input field and after clicking a button I'm calling a function and get back the right things.
Now I also want that the function is calling after pressing enter.
At the moment my code looks like this:
<div class="input-group mb-3">
<input (keyup)="searchUser($event)" stype="text" class="form-control" placeholder="Suche nach Nachnamen ..."
aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button (click)="searchForUser()" class="btn btn-outline-secondary" type="submit"
id="button-addon2">Suche</button>
</div>
</div>
I already tried to put my div in a <form></form>. Then the whole page is reloading.
Wrap the input and the button in a form tag, and rather than using a click handler on the button, make it a submit handler on the form element.
<form (submit)="searchForUser()">
Alternatively, you can remove the type="submit" completely.
This is working for me:
<form #p="ngForm" (ngSubmit)="searchForUser(u)">
<div class="input-group mb-3">
<input (keyup)="searchUser($event)" stype="text" class="form-control"
placeholder="Suche nach Nachnamen ..." aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="button-addon2">Suche</button>
</div>
</div>
</form>
Explanation: https://angular.io/api/forms/NgForm
Related
I have HTML form with submit button inside. Inside the form there are piece of HTML code which popups in modal window when filling up the form. Inside this modal are one more input and submit button. And it does not work, the form doesn't send to email. But when I move entire button HTML code right before </form> then submit button works. Here is a code:
<form name="autoForm" id="contact-form" class="row" method="post" action="php/send.php">
<div class="form-group col-md-6">
<label id="address-label" for="place">* Markė | modelis | metai | TA | miestas</label>
<input id="form_place" type="text" name="place" class="form-control" data-error="Laukas privalomas" >
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-md-12">
<label for="message">Automobilio būklė</label>
<textarea id="form_message" name="message" class="form-control h-auto" rows="4" data-error="Prašau, parašykite daugiau apie NT"
placeholder="Čia galite parašyti daugiau informacijos apie automobilio būklę"></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-container col mt-5">
<a class="btn btn-primary" id="to-modal-form"><font size="4">Sužinoti kainą</font></a>
</div>
<div id="modal-background" class="modal-background container-hidden">
<div id="modal-form" class="modal-form">
<a id="modal-close"><i class="icon-close" data-v-27b8b94e=""></i></a>
<div class="form-header">
<h2>Gaukite kainos pasiūlymus tiesiai į savo telefoną.</h2>
<p>Įveskite telefono numerį ir gaukite pasiūlymo nuorodą <b>SMS</b></p>
</div>
<div class="form-body">
<div class="form-group col-md-6">
<label class="phone" for="phone">* Jūsų telefono numeris</label>
<input id="form_phone" type="phone" name="phone" class="form-control" required="required" data-error="Laukas privalomas">
<div class="help-block with-errors"></div>
</div>
<input type="hidden" name="code" value="" id="code" />
<button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button>
<span class="privacy">Sutinku su privatumo politika</span>
</div>
</div>
</form>
Filling up first inputs there are first button <a class="btn btn-primary" id="to-modal-form"><font size="4">Sužinoti kainą</font></a> which is opening the modal windows. Inside after filling up additional input I press <button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button> which doesn't work.
But form work when button is moved before </form>. Form sends all values - inside and out of modal window.
Can't get what is wrong.
If you have button outside </form> it would not work the solution is using form="" parameter to the button it basically tell this button belong to this specific form element
<button class="btn btn-primary" form="contact-form" type="submit" id="form_submit"><font size="4">Tęsti</font></button>
Your submit button will confused which form that it should submitted if you place it outside the form tag.
You could use javascript to submit the form.
https://www.javascript-coder.com/javascript-form/javascript-form-submit/
Put a button inside your modal with onclick="submitForm('contact-form');", then add below js code
function submitForm(id) {
document.getElementById(id).submit();
}
Solved this by adding submit button before with attribute hidden:
<form>
<!-- the form content -->
<button class="btn btn-primary" type="submit" id="form_submit" hidden></button>
</form>
And that button inside of modal window made as trigger with attribute onclick="submitForm();" like this:
<button class="btn btn-primary" onclick="submitForm();"><font size="4">Tęsti</font></button>
In JS it triggers submit button using .click() method:
const submitBtn = document.getElementById('form_submit');
function submitForm() {
submitBtn.click();
}
This is my html code:
<label>Search:</label>
<input type="text" id="list_search" class="form-control col-8">
<button class="btn btn-info col-2">Search</button>
You see my input tag has 8 columns and my button has 2.
Then I don't get why I'm getting this:
Isn't supposed they should be X-aligned?
What I expect is:
But I had to use <div class="row"> there, which is modifying margins (look at the label).
You need form inline
and don't forget to set for inside label
<form class="form-inline">
<label for="list_search">Search:</label>
<input type="text" id="list_search" class="form-control">
<button class="btn btn-info">Search</button>
</form>
GL
I'm running into issues with modals and forms with Foundation.
I want to be able to fill out a form, open a modal, then have that modal be able to submit the form.
Normally, I'd have my form, and all of it's form fields, and put the modal inside the the form element, and that would be fine - but with foundation, I find that the reveal modal is moved to the bottom of the DOM.
What's the best way to accomplish what I'm after?
I've added a skeleton of what my normal structure might be like - any help would be greatly appreciated.
<form method="post" action="...">
<label for="title">Title</label>
<input type="text" name="title" id="title" placeholder="Enter campaign title here" required>
<label for="title">Description</label>
<textarea type="text" name="description" placeholder="Description of this campaign"></textarea>
<button type="button" class="button default-btn float-right" data-open="emailSendConfirmation">Publish campaign</button>
<div class="reveal" id="emailSendConfirmation" data-reveal>
<button data-close aria-label="Close modal" type="button" class="button">Cancel</button>
<button type="submit" class="button" name="status" value="Published">Publish</button>
</div>
</form>
Thanks,
Ollie
I am experiencing a issue detecting if the submit button was clicked. I was give the following form by a CSS designer:
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control span12">
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-controlspan12 form-control">
</div>
Sign In
<div class="clearfix"></div>
</form>
I would like submit the captured information by clicking on the Sign In CSS button. I am used to the usual:
<input type="Submit" value="Sign-In>
button, but not this is different, I am stuck. Any assistance will be appreciated.
try to change
Sign In
with
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
Furthermore you need to set an action attribute on your form element
Give your form and ID = "myform" And try below:
Sign In
I am using a template, the name is Treble One Page Rsponsive Theme from Wrapbootstrap which uses Twitter Bootstrap. I am implementing the template and encountered this small error which drove me crazy.
There is a search bar, consists of <input> tag and <button> tag. Previously it was fine, until I make it inside a <form>, the search bar started to act weird. The <input> field is centered, but the <button> appended into outside the field making the whole things uncentered.
Here is the image, to be clear:
picture
And here is my code:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
I've googled this template.
This code works on original template as expected:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
Main idea is to convert "input-append" div into form, instead of adding new form element within it.